Как нарисовать линию между точками в 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 для соединения строк в каждом столбце)