如何在javascript中的点之间画线

Question

我尝试使用javascript代码在表格中绘制线（右边框）。我的代码

plotPoints(item,  index) {
  var myElement = document.querySelector("#image-" + item + "-" + index);
  (id is id = "image-0-4")
  var position = this.getPosition(myElement);
  console.log("The image is located at: " + position.x + ", " + position.y);

  var first = index + 1;
  var second = index + 2;
  var third = index + 3;

  var testDiv1 = document.getElementById("p1-" + item + "-" + first);
  var position1 = this.getPosition(testDiv1);
  console.log("The image is located at 1: " + position1.x + ", " + position1.y);

  var testDiv2 = document.getElementById("p1-" + item + "-" + second);
  var position2 = this.getPosition(testDiv2);
  console.log("The image is located at 1: " + position2.x + ", " + position2.y);

  var testDiv3 = document.getElementById("p1-" + item + "-" + third);
  var position3 = this.getPosition(testDiv3);
  console.log("The image is located at 1: " + position3.x + ", " + position3.y);

}


getPosition(el) {
  var xPos = 0;
  var yPos = 0;

  while (el) {
    if (el.tagName == "BODY") {
      // deal with browser quirks with body/window/document and page scroll
      var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
      var yScroll = el.scrollTop || document.documentElement.scrollTop;

      xPos += (el.offsetLeft - xScroll + el.clientLeft);
      yPos += (el.offsetTop - yScroll + el.clientTop);
    } else {
      // for all other non-BODY elements
      xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
      yPos += (el.offsetTop - el.scrollTop + el.clientTop);
    }

    el = el.offsetParent;
  }
  return {
    x: xPos,
    y: yPos
  };
}

我试图画出一条线以连接相同的数字块。使用位置函数获得所有块的x和y位置。

如何在同一数字块之间绘制线（例如1号块在每一列之间连接线）