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?

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.

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.

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.

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.