JSFiddle - React, Tailwind, and code Playground

by laszlooo

HTML

<div id="div1" style="position: absolute; top: 50px; left: 50px;">Első div</div>
<div id="div2" style="position: absolute; top: 100px; left: 200px;">Második div</div>
<canvas id="canvas" style="position: absolute; top: 0; left: 0;"></canvas>

JavaScript

const div1 = document.getElementById("div1");
const div2 = document.getElementById("div2");
const canvas = document.getElementById("canvas");

const ctx = canvas.getContext("2d");
ctx.strokeStyle = "black";
ctx.beginPath();
ctx.moveTo(div1.offsetLeft + div1.offsetWidth, div1.offsetTop + div1.offsetHeight / 2);
ctx.lineTo(div2.offsetLeft, div2.offsetTop + div2.offsetHeight / 2);
ctx.stroke();