html5-canvas Compositing Erase existing shapes with "destination-out"


Example

context.globalCompositeOperation = "destination-out"

"destination-out" compositing uses new shapes to erase existing drawings.

The new shape is not actually drawn -- it is just used as a "cookie-cutter" to erase existing pixels.

context.drawImage(apple,0,0);
context.globalCompositeOperation = 'destination-out';   // bitemark erases
context.drawImage(bitemark,100,40);

enter image description here