Question

How can I use globalCompositeOperation for erasing something?

http://canvaspaint.org/ has an eraser, but that’s just a white line – ok only if your background is white…

I know you can use ctx.clearRect(). But it didn’t really worked for me because while dragging a mouse with eraser (set to 8x8px) it only makes unconnected 8x8px squares – not really a smooth line.

Is there a way how to use globalCompositeOperation as an eraser?

Something like:

ctx.globalCompositeOperation = "___something___";
ctx.beginPath();
ctx.lineTo(mouseX , mouseY);
ctx.closePath();

Thank you.

Answer 1

Yes you can erase using globalCompositeOperation as described here. Just set it to "copy" and use e.g. strokeStyle = "rgba(0,0,0,0)" and that will clear the canvas in the stroke.

Update: thanks for pointing out this doesn’t work now @will-huang. You should as mentioned have globalCompositeOperation set to destination-out and strokeStyle set to rgba(0,0,0,1). (Actually you can have any RGB values, just you need the alpha set to 1.0 to fully erase the contents of the stroke.)

Here’s an example of erasing: http://jsfiddle.net/FGcrq/1/