HTML5 Canvas: globalCompositeOperation (eraser)

Question

How can I use globalCompositeOperation to erase something?

http://canvaspaint.org/ has an eraser, but this is only a white line - it's okay only if your background is white ...

I know you can use ctx.clearRect (). But for me this did not work, because by dragging the mouse with an eraser (set to 8x8px), it only makes 8x8px unconnected squares - not a very smooth line.

Is there a way to use globalCompositeOperation as an eraser?

Sort of:

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

Thank.

Answer 1

, globalCompositeOperation . "copy" , . strokeStyle = "rgba(0,0,0,0)", .

: , @will-huang. , globalCompositeOperation destination-out, strokeStyle - rgba(0,0,0,1). ( RGB, , - 1.0, .)

: http://jsfiddle.net/FGcrq/1/

Answer 2

ctx.globalCompositeOperation = "destination-out";

. "xor" .

Answer 3

. . , , . ctx.lineWidth=//default 1.0 ctx.strokeStyle=//default black ctx.save() ctx.restore(), .