Lately, I have been working with the fancy HTML 5 canvas element.
One of the errors that I encountered during development was this oddity:
Uncaught Error: INDEX_SIZE_ERR: DOM Exception 1
After making sure every value was absolutely defined in the code and still getting the error, I was stumped. I asked on twitter what causes this error, but I didn’t get a response so I moved on to google. A thread on stackoverflow provided this insight:
It happens because circlesR values can become negative at some point. The radius of a circle cannot be negative.
This holds true for just about any canvas drawing method. I was using
drawImage to draw a sliced up image on to the canvas. The error is alerting you to a negative value in one of the numeric arguments in whatever drawing method was called.
ctx.drawImage(this.avatar, xAxis, yAxis, 32, 64, this.position.x, this.position.y, 32, 64);
It turns out that my xAxis was negative for some calls. That borked canvas and instead of just saying, there is a negative number in your drawImage call, drawImage cannot accept negative numbers, it gave an index size error.
So in short, make sure you don’t use negative numbers in any canvas calls. To make it easier, just use
console.log and copy the arguments of the drawing call and put them inside an array.
Good luck with canvas!