HTML5 Canvas: globalCompositeOperation (eraser)

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

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.

Answer 2

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.