JSFiddle - React, Tailwind, and code Playground

by twobomb three

HTML

<div class="icon"></div>
<canvas id="canvas" height="600" width="900"></canvas>

<div class="icon-two"></div>

<div class="icon-three"></div>

CSS

.icon, .icon-two, .icon-three { 
  width: 26px;
  height: 26px;
  background: red;
  border-radius: 50%;
  }
  .icon {
    margin: 0 auto
  }
.icon-two {
  margin-top: 100px
}
canvas{
  position:absolute;
}
.icon-three {
  margin-top: 300px;
  margin-left: auto;
  margin-right: auto;
}

JavaScript

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

var element1 = document.querySelector('.icon');
var element2 = document.querySelector('.icon-two');
var element3 = document.querySelector('.icon-three');

var position1 = element1.getBoundingClientRect();
var position2 = element2.getBoundingClientRect();
var position3 = element3.getBoundingClientRect();
var positionCanvas = canvas.getBoundingClientRect();

var p1X = position1.left - positionCanvas.left + position1.width/2;
var p1Y = position1.top -  positionCanvas.top + position1.height/2;

var p2X = position2.left - positionCanvas.left + position2.width/2;
var p2Y = position2.top -  positionCanvas.top + position2.height/2;

var p3X = position3.left - positionCanvas.left + position3.width/2;
var p3Y = position3.top -  positionCanvas.top + position3.height/2;

ctx.strokeStyle = "blue";
ctx.lineWidth = 2;
ctx.beginPath();      
ctx.moveTo(p1X, p1Y+15);
ctx.lineTo(p1X, 30);;
ctx.lineTo(p2X, 30);
ctx.lineTo(p2X, p2Y-15);
ctx.moveTo(p2X, p2Y+15); 
ctx.lineTo(p2X, p2Y+200); 
ctx.lineTo(p3X, p2Y+200); 
ctx.lineTo(p3X, p3Y-15); 
ctx.stroke();