Uncaught Error: INDEX_SIZE_ERR

Question

I am drawing on a canvas with the following line:

ctx.drawImage(compositeImage, 0, 0, image.width, image.height, i, j, scaledCompositeImageWidth, scaledCompositeImageHeight);

This code has executed error free on Safari, Chrome, Firefox (and even IE using google's excanvas library). However, a recent update to Chrome now throws the following error:

Uncaught Error: INDEX_SIZE_ERR: DOM Exception 1

This code often positions part or all of the drawn image OFF the canvas, anyone got any idea what's going on here?

Cubeb

Answer 1

Is compositeImage pointing at a valid (fully loaded) image?

I've seen this exception happen if you try to draw the image before it has loaded.

E.g.

img = new Image();
img.src = '/some/image.png';
ctx.drawImage( img, ..... ); // Throws error

Should be something like

img = new Image();
img.onload = function() {
  ctx.drawImage( img, .... );
};
img.src = '/some/image.png';

To ensure the image has loaded.

Remains

In my case i was trying to copy image with more size that it had - i.e. my sprite image had 100px, and i tried to copy 25px starting from 80px pos, when i fixed image size to be 105px all started to work. – Philipp

Answer 2

Why?

It happens if you draw the image before it is loaded because that is what the html5 2dcontext draft specifies for interpreting the first argument of drawImage():

If one of the sw or sh arguments is zero, the implementation must raise an INDEX_SIZE_ERR exception.

sw, sh being source-image width and height

@jimr's answer is good, just thought it would be relevant to add this here.

Hemostat

Answer 3

Another cause for this error is, the dimensions of the source image are too large; they extend beyond the actual image dimensions. When this occurs, you'll see this error in IE, but not in Chrome or Firefox.

Say you have a 150x150 image:

var imageElement = ...;

Then if you try to draw it using larger source dimensions:

var sourceX = 0;
var sourceY = 0;
var sourceWidth = 200; // Too big!
var sourceHeight = 200; // Too big!
canvasContext.drawImage(imageElement, 
   sourceX, sourceY, sourceWidth, sourceHeight, // Too big! Will throw INDEX_SIZE_ERR
   destX, destY, destWidth, destHeight);

This will throw INDEX_SIZE_ERR on IE. (The latest IE being IE11 at the time of this writing.)

The fix is simply constraining the source dimensions:

var sourceWidth = Math.min(200, imageElement.naturalWidth);
var sourceHeight = Math.min(200, imageElement.naturalHeight);

malloc4k's answer alluded to this, however, he suggested it was because image.width was zero. I added this new answer because image width being zero is not necessarily the cause of the error on IE.

Kortneykoruna

Answer 4

Due to my experience, INDEX_SIZE_ERR in IE (even version 10) is likely to happen when you are operating on canvas that has been manipulated with drawImage() with wrong clip size.

And if you loaded your image dynamically, then it is likely that values of image.width and image.height are ==0, so you are invoking

ctx.drawImage(compositeImage, 0, 0, 0, 0, ...

In my case the solution (that worked) was to use image.naturalWidth and image.naturalHeight instead.

Prochora