如何通过在背景画布中绘制线条来连接两个 HTML 元素？

<div id="element1">Element 1</div>
<div id="element2">Element 2</div>

#element1 {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 100px;
  height: 100px;
  background-color: red;
}

#element2 {
  position: absolute;
  top: 200px;
  left: 200px;
  width: 100px;
  height: 100px;
  background-color: blue;
}

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

const element1 = document.getElementById('element1');
const element2 = document.getElementById('element2');

const element1Rect = element1.getBoundingClientRect();
const element2Rect = element2.getBoundingClientRect();

const centerX1 = element1Rect.left + element1Rect.width / 2;
const centerY1 = element1Rect.top + element1Rect.height / 2;
const centerX2 = element2Rect.left + element2Rect.width / 2;
const centerY2 = element2Rect.top + element2Rect.height / 2;

ctx.beginPath();
ctx.moveTo(centerX1, centerY1);
ctx.lineTo(centerX2, centerY2);
ctx.stroke();