JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="cnv" width="300" height="300"></canvas>

CSS

#cnv {
    width: 300px;
    height: 300px;
    outline: solid 1px steelblue;
}

JavaScript

ctx = document.getElementById('cnv').getContext('2d');

ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.lineWidth = 10;
ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';

ctx.beginPath();
ctx.moveTo(50, 100);
ctx.lineTo(250, 100);
ctx.lineTo(250, 250);
ctx.lineTo(100, 250);
ctx.lineTo(100, 50);
ctx.moveTo(100, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 200);
ctx.lineTo(200, 200);
ctx.lineTo(200, 150);
ctx.lineTo(50, 150);
ctx.lineTo(50, 100);
ctx.closePath();
ctx.stroke();

ctx.strokeStyle = 'rgba(0, 255, 0, 0.5)';
ctx.beginPath();
ctx.moveTo(50, 250);
ctx.lineTo(250, 50);
ctx.closePath();
ctx.stroke();