many canvas objects result in "InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable"

Question

Trying to manage 10.000 simple shapes on a <canvas>, I experimented with caching as a replacement for redrawing. Much to my surprise:

• Using ImageData and canvas.{get|put}Image seems terribly slow.
• Caching patterns with canvas.createPattern is nearly as quick as redrawing.
• Caching an entire canvas for each shape is even quicker than redrawing.

For some reason, however, some canvases break during caching. After some lookups, at irregular intervals (every 2-5 cache lookups), a canvas is retrieved that causes an

InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable

to be thrown. I am using the same code for caching the different objects, so I think the problem is not the caching, but rather the number of canvas objects.

Maybe it is also of interest that I am animating the shapes to (0,0), reducing their size as well to nothing. Errors do happen even when the rectangle is 6x3px big, for example, so it should not be about sizing.

Any idea? If no immediate idea comes up, I'll simplify the code for posting. Thanks, nobi

Answer 1

In my case I have seen this error becase of zero canvas area: if width*height = 0, then such canvases give this error during drawImage.