HTML5 Canvas：globalCompositeOperation（橡皮擦）

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

Answer 2

ctx.globalCompositeOperation = "destination-out";

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

Answer 3

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.