JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body style="background: url(http://jsfiddle.net/css/../img/logo.png) repeat;">

<canvas id="canvas" width="256" height="256"></canvas>

</body>
</html>

JavaScript

var c = document.getElementById('canvas');
var ctx = c.getContext('2d');

// Put something in the canvas first
ctx.fillStyle = '#f00';
ctx.fillRect(10,10,236,236);

// Set up erasing 
ctx.globalCompositeOperation = "destination-out";
ctx.strokeStyle = 'rgba(0,0,0,1.0)';

// And draw a thick line that removes what's already there
ctx.lineWidth=20;

ctx.beginPath();
  ctx.moveTo(30,30);
  ctx.lineTo(220,220);
ctx.stroke();