Firefox throwing a exception with HTML Canvas putImageData

Question

So I was working on this little javascript experiment and I needed a widget to track the FPS of it. I ported a widget I\'ve been using with Actionscript 3 to Javascript and

Answer 1

It's a bug in Firefox. Mozilla knows about it. Here's the workaround:

1. Make a new in-memory canvas:

   var spriteCanvas = document.createElement('canvas');
   

2. Set the height/width of the canvas to the height/width of your image:

   spriteCanvas.setAttribute('width', 20);
   spriteCanvas.setAttribute('height', 20);
   

3. Put the image data into the canvas at position (0,0):

   spriteCanvas.getContext('2d').putImageData(imageData, 0, 0);
   

4. On the context for your main canvas, draw your canvas sprite using drawImage using any position on-screen or off-screen:

   context.drawImage(spriteCanvas, 50, 100); // clipping is allowed