JS Canvas - Save Transparent Image

Question

I am using the following code for downloading (taking a snapshot) of a canvas:

    var strMime = "image/png";
    var canvas = document.getElementsByTagName('canvas')[0];
    var link = document.createElement("a");
    link.href = canvas.toDataURL(strMime);
    link.download = 'test1.png';
    link.click();

the thing is that it creates the "test1.png" image with a white background (even if i set the canvas style background color to be transparent)

any idea how to generate transparent png files from canvas?

Mohhamad Hasham Mohhamad Hasham · Accepted Answer · 2017-08-28T08:17:12

Refer to

https://www.patrick-wied.at/blog/how-to-create-transparency-in-images-with-html5canvas

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

JS Canvas - Save Transparent Image

1 Answers