Uncaught Error: INDEX_SIZE_ERR: DOM Exception 1 on Canvas
Hello all,
Sometimes when developing applications using HTML Canvas on mobile, Android stock browser doesn’t load your canvas and doesn’t return any error.
If you’re drawing some images the problem can be found in the drawImage() having incorrect parameters.
This is the drawImage definition:
context.drawImage(
img, // Specifies the image, canvas, or video element to use
sx, // Optional. The x coordinate where to start clipping
sy, // Optional. The y coordinate where to start clipping
swidth, // Optional. The width of the clipped image
sheight, // Optional. The height of the clipped image
x, // The x coordinate where to place the image on the canvas
y, // The y coordinate where to place the image on the canvas
width, // Optional. The width of the image to use (stretch or reduce the image)
height // Optional. The height of the image to use (stretch or reduce the image)
);I suggest you to ensure that all the width/height parameters fit with the image size.
Example: If you try to clip (sx,sy) a 30x30 logo, you could declare:
context.drawImage(logo,0,0,999,999,0,0,30,30)and some browsers understand you just don't care about the fact you make a 999x999 clip on a 30x30 image, but others get angry and throws exceptions. The same goes for SX,SY: if you try to start clipping out of 30,30 you have nothing in your image and that's bad!
The point is: don't go out of the image field while clipping, with sx or sy, or with dimensions.
That's all 🙂
No comments yet.