Question

I’m developing a drawing application with canvas.
I would like to implement an erase functionality, but not a simple erase which is a simple white pen, a real rubber.

In fact, I have a transparent canvas added over the application, and I would like, when I draw, I can erase what I drawn, i.e put opacity to 0 !

I already search on Google & stackoverflow and I find that :

Code : JavaScript – Sélectionner

context.globalCompositeOperation = "destination-out"; 
context.strokeStyle = "rgba(0,0,0,0)";

But it don’t work … Too, I try different modes of globalCompositeOperation shown on MDN but there is no difference.
Help please.

Answer 1

It doesn’t work because you draw a transparent line over what you are trying to erase… So it does nothing.

It is easy to erase when you have a white background, you just draw white over. But it is not what you want.

The trick here is to use clearRect which remove what is on the canvas, instead of drawing over other shapes.

context.clearRect(cursorX, cursorY, brushWidth, brushHeight);

It will appear as small squares but I can’t see another way to do it, except maybe with pixel manipulation.