JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width="300" height="300" id="my-canvas" style="background: #00ff00"/>

JavaScript

const ctx = document.getElementById('my-canvas').getContext('2d')
ctx.lineWidth = 5
ctx.shadowOffsetX = -3
ctx.shadowOffsetY = -3
ctx.shadowBlur = 3 * window.devicePixelRatio
ctx.shadowColor = 'red'
ctx.strokeStyle = 'black'
const segments = [
 [{x: 0, y: 50},
  {x: 50, y: 50}],
 [{x: 50, y: 0},
  {x: 50, y: 50}],
 [{x: 100, y: 50},
  {x: 50, y: 50}],
 [{x: 50, y: 100},
  {x: 50, y: 50}],
]
segments.forEach(segment => {
  ctx.beginPath()
  ctx.moveTo(segment[0].x, segment[0].y)
  ctx.lineTo(segment[1].x, segment[1].y)
  ctx.stroke()
})