JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

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

ctx.beginPath();
ctx.globalCompositeOperation = 'xor';
ctx.lineWidth = 10;
ctx.strokeStyle = "rgba(0, 0, 0, 0.5)";
ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
ctx.rect(20,20,100,100);
ctx.fill();
ctx.stroke();