HTML5 Canvas drawImage issue in Windows 7 but only in Firefox

Question

I'm having a problem with a program I'm developing (you can see it at www.energematrice6.com/gview2)

The galaxy viewer draws stars on 6 different layers. The back layers work fine (using a simple stroke command). The top 3 layers use the drawImage() functionality to take a saved image and draw it to the canvas (using the functions starGradDraw and starGradDraw2).

These images were created by another function when the program first executed and saved to an object variable (basically just a buffer).

Everything works correctly on my home computer, my laptop, my wife's computer, and just about every other machine I've tested this on (or had friends test it on).

When I tried to open it in Firefox 10.0.2 on my work computer (same version I use at home), the first three layers of stars are blank. The only other difference I can think of is that none of my home computers use a 64 bit operating system or specifically Windows 7.

Everything else still seems to work fine in the program, and firebug is not popping any errors. It's just not drawing the images (or halting the program). I'm really not sure what to try next.

Any ideas?

(I can paste some code if you like, but the program is over a thousand lines long and I'm not sure where the problem could be coming in or how it could error only on this machine.)

Answer 1

After rather a massive amount of research and bug-hunting, I've discovered that this problem is a bug in Firefox itself.

Apparently in the current version, with 2-D graphics hardware acceleration enabled, Firefox does not save radial gradients correctly when they are drawn directly to a buffer canvas (off-screen only).

Turning off hardware acceleration allows the browser to correctly process the commands.

A bug report has been filed and, hopefully, the issue will be fixed.