PNG Transparency on Canvas

canvas png transparency alpha color-channel
Rigil picture Rigil · Jan 13, 2011 · Viewed 11.2k times · Source

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

oberhamsi picture oberhamsi · Jan 13, 2011

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?

Related questions

Drawing PNG to a canvas element -- not showing transparency

I'm trying to use drawImage to draw a semi-transparent PNG on a canvas element. However, it draws the image as completely opaque. When I look at the resource that's being loaded and load the actual PNG in the browser, it …

Read More
Capture HTML Canvas as gif/jpg/png/pdf?

Is it possible to capture or print what's displayed in an html canvas as an image or pdf? I'd like to generate an image via canvas, and be able to generate a png from that image.

Read More
Base64 PNG data to HTML5 canvas

I want to load a PNG image encoded in Base64 to canvas element. I have this code: <html> <head> </head> <body> <canvas id="c"></canvas> <script type="…

Read More