How do I draw transparent PNGs onto a canvas in Firefox?

Question

I've been setting up a small framework for rendering positionable and animated graphics onto a <canvas> element - primarily to help my understanding of it.

I downloaded a random sprite sheet off the internet for testing - it has a transparent background which seems to render fine in Chrome, on my iPhone and Safari.

This is the demo: http://martywallace.com/simplecanvas/

In Firefox however the transparent sections of the sprite load as white, which ends up looking like this:

Is there a Firefox-specific way to enable transparency, or is it not supported?

Answer 1

Here's what has happened [stupidity disclaimer]:

1. I downloaded the originally transparent image and tested with it in Chrome, Safari and iPhone.
2. The image was 1MB so I downsized it to PNG8 (and forgot to allow transparency when exporting).
3. The cached version of the image was used in the browsers I had been testing with (which I didn't notice).
4. When I then moved onto Firefox, the new non-transparent was being used (because of no previous caching).

Result: Firefox renders transparent PNGs fine - happy with this question being closed as "too localized".