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.