Erase existing shapes with "destination-out"

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);

Found a mistake? Have a question or improvement idea? Let me know.

Table Of Contents