"Erasing" in html5 canvas

Question

I have a doodling application in html5 canvas, and I'm trying to figure out the best way to implement an eraser control. First impulse was just to have the eraser draw the background color [white], but this is problematic because if the user moves an image or another layer to where they've previously erased, they see the white drawing where they erased.

Ideally, I'd like to have the erase control change the pixels to black transparent. I can't simply use lineTo to do this because, obviously, it just draws a black transparent line over it, and that leaves the original doodle untouched. Any ideas on how to do this?

Thanks.

Answer 1

Look into clearRect if your eraser is a rectangle. The clearRect function, as per the specification, will make pixels in the rectangle transparent black, as you want.

If you wish to have other eraser shapes [ie: circle?] you must manipulate pixel data. Note that if you want a feathering-like eraser, this becomes hellish.

Most helpful reference in the world: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element

Answer 2

If you want to draw a black transparent stroke, you probably want:

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

Remember to save the previous globalCompositeOperation and then restore it later or transparency won't work properly!