I was experimenting with a bit of Javascript and the HTML canvas element the other day and came across a very unhelpful error when trying to call the drawImage function:

INDEX_SIZE_ERR: DOM Exception 1

A quick internet search didn’t help much, but after a bit of head scratching I finally got to the bottom of it, and thought i’d share the answer for anyone else googling the same error code.

The error is thrown if you attempt to draw an image which hasn’t fully loaded yet, so the solution is to move the code which draws the image into a function called by the images’ onload event, like so:

var img = new Image();
img.onload = function()
{
    canvas.drawImage(img, 0, 0) ;
}
img.src = 'image.png';

And voila, no more error.