5

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:

enter image description here

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

Marty
  • 39,033
  • 19
  • 93
  • 162
  • this has been asked before http://stackoverflow.com/questions/2916938/how-to-draw-transparent-image-with-html5-canvas-element – Barkermn01 Mar 06 '12 at 22:26
  • 1
    @MartinBarker That question is different; it asks how to apply transparency to an entire image being drawn onto a canvas, dynamically. I just want the transparency that is part of the image by default to be not rendered as white - an issue which is browser-specific. – Marty Mar 06 '12 at 22:28
  • 1
    If you draw a transparent png on an empty canvas, will anyone see it? – mVChr Mar 06 '12 at 22:39

1 Answers1

2

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".

Marty
  • 39,033
  • 19
  • 93
  • 162
  • @EricYin The picture above is a screenshot of the canvas itself rendering a portion of the 1MB image multiple times in different locations - the actual sprite sheet itself was close to 1MB. – Marty Mar 06 '12 at 23:05