How to paint on canvas in javascript with alphamask?

Question

I have a png image with white edges. I would like to make the edges transparent.

Is there a way to specify a color to be not painted - like a color key or alphamask.

Are there any examples?

For example this image has white edges, and I would like to paint two of them close to eachother without the white.

How can I do that in javascript with canvas?

Answer 1

Convert the image to GIF format? GIF allows any single colour value to represent transparent pixels.

Answer 2

See globalCompositeOperation, or draw it in another canvas,remove white pixels (getImageData, if white, make it transparent) and putImageData of the new array to your canvas.