PNG Transparency on Canvas

Question

Does canvas support PNG alpha? Im having some issues with a few PNGs that I've added to the canvas. The edges of the images are black and jagged as if no alpha channel exists or is being recognized.

Answer 1

If you put a 24-bit PNG with alpha on the canvas it understands it.

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images

Maybe your PNGs are not clean, i.e. have non-transparent regions at the borders?

Answer 2

Use clearRect() or fillRect() before redrawing the PNG image, if you are doing it in a requestAnimationFrame or setInterval loop.

I stumbled upon this question as I had a similar problem, but my image was already at 24-bit. Had a requestAnimationFrame loop redrawing the PNG image to the canvas and (as you said) as they overlapped, the result was this "burned" edges where it should have the alpha "fade-out" transparency.

Simply by cleaning the area before calling drawImage, you can prevent that image to be rendered over itself.