Как привязать элемент Canvas к координатам элементов? HTML

Question

У меня есть 2 блока, у которых имеются атрибуты data-x и data-y с их указанными координатами , так же имеется элемент canvas который соединяет блоки заранее нарисованной линией.

Не могу придумать как можно реализовать функцию, что бы canvas элемент менял свои координаты в зависимости от расположение блоков, допустим если их положение на странице изменится - линия должна все равно их соединять

Каким способом лучше всего это сделать?

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


    let width = canvas.width = innerWidth
    let height = canvas.height = innerHeight


    context.clearRect(0, 0, width, height)
    context.beginPath()
    context.moveTo(300, 50)
    context.lineTo(100,50)
    context.stroke()

div {
  position: absolute;
  width: 100px;
  height: 100px;
}
#div1{
  background-color: green;
}
#div2 {
  margin-left: 250px;
  background-color: red;
}

<div id='div1' data-x="300" data-y="50"></div>
<div id='div2' data-x="100" data-y="50"></div>
  <canvas id="canvas"></canvas>

БЛОГ НА HUSL

Как привязать элемент Canvas к координатам элементов? HTML

Ответы (0 шт):