How can I use globalCompositeOperation for erasing something?

/ 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.

How can I use globalCompositeOperation for erasing something?

http://canvaspaint/ 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.

• javascript
• canvas

• This may help you: stackoverflow./questions/3328906/erasing-in-html5-canvas – Castrohenge Commented Aug 10, 2010 at 10:39

3 Answers 3

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/FGcrq/1/

ctx.globalCompositeOperation = "destination-out";

That should do the trick. You can also use "xor" for erasing goodness.

I don't think so. But just change the line color to whatever the background color is. Also, if you want different sizes of eraser increase the line size. ctx.lineWidth=//default 1.0 and ctx.strokeStyle=//default black I would also suggest using ctx.save() and ctx.restore() so you don't have to worry about resetting your line attributes.