JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="mycanvas" height="500" width="500"></canvas>

JavaScript

var canvas = document.getElementById("mycanvas");
var context = canvas.getContext('2d');
context.strokeStyle = "#000000";
context.lineWidth = 1;

context.beginPath();
context.moveTo(50, 100.5);
context.lineTo(200, 100.5);
context.stroke();

context.beginPath();
context.moveTo(50, 110);
context.lineTo(200, 110);
context.stroke();

context.beginPath();
context.moveTo(50, 120);
context.lineTo(200, 140);
context.stroke();

context.beginPath();
context.moveTo(50.5, 140);
context.lineTo(200, 160.5);
context.stroke();



/*context.beginPath();
context.moveTo(50, 50.5);
context.lineTo(300.5, 50.5);
context.lineTo(300.5, 100);
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(50, 120.5);
context.lineTo(200, 120.5);
context.stroke();

context.beginPath();
context.moveTo(50, 150);
context.lineTo(300, 150);
context.lineTo(300, 200);
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(50, 100);
context.lineTo(200, 100);
context.stroke();*/