Cut Hole in Canvas (eraser)
document.body.style.background = 'gray';
const canvas = document.createElement('canvas');
const c = canvas.getContext('2d');
canvas.width = 300;
canvas.height = 300;
c.fillStyle='rgba(255, 0, 0, 0.8)'
c.fillRect(0, 0, canvas.width, canvas.height);
c.globalCompositeOperation = 'destination-out';
c.fillStyle = 'black';
c.fillRect(100, 100, 150, 50);
document.body.appendChild(canvas);
destination-out is great for creating masks and eraser tools – things like that – in this case a 150×50 rectangle is cut out of a red background.
