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

Yeah, this error seems to happen when using (get|put)ImageData off the edges of the canvas.

For my encounter with this problem, I simply added some clipping logic that checks the edges of the region to be drawn against the edges of the canvas, and clips it where necessary, only drawing the visible region. It seems to have fixed the problem.

Answer 2

This is old by now, but this ONLY giving me problems on FF on windows. FF on mac works how it should.

Answer 3

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
   

Answer 4

I had the same error because the value I tried to set to graphData.data[index] was a string and not an integer. To fix it, i converted the string in an integer with parseInt().

Answer 5

I've been dealing with this issue for a few days now (in firefox). The best idea I could come up with is to dynamically remove the pixels that are going off the screen. I'm worried that it will take too much cpu to do this. hopefully someone comes up with a better idea :/

but to reiterate, I've only seen this error when putImageData is trying to draw ANY pixel outside of the canvas perimeter. eg. any x or y value < 0.

-- on second read -- It looks like you're already resizing your image data. You might try sizing your image down to 68px if you're in a 70px container? Probably won't work, but worth a try..

Answer 6

I was having similar problem with drawImage(), when attempted to draw a tile on a canvas of the same size in this manner:

var image = new Image();
     image.onload = function() {
         context.drawImage(image, 0, 0, this.tileSize, this.tileSize);
       }
     image.src = this.baseURL + tileId;

The problem disappeared, when I removed height and width parameters from the call and used this:

context.drawImage(image, 0, 0);