Erase existing shapes with "destination-out"
suggest changecontext.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);
![](/essential/htmlcanvas/img/2d67b1b2406487cd2cbfa2b738cdc62d65552d7c.png)
Found a mistake? Have a question or improvement idea?
Let me know.
Table Of Contents