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.