javascript - 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.