Sometimes, we want to draw a line between two divs with JavaScript.

In this article, we’ll look at how to draw a line between two divs with JavaScript.

Draw a Line Between Two divs with JavaScript

To draw a line between two divs with JavaScript, we create a div that starts from the bottom right corner of the first div to the top right corner of the 2nd div.

We can do that by shifting the div, setting the length and rotating it so that it looks like it’s between the 2 divs.

For instance, if we have 2 divs:

<div id='d1' style='width: 20px; position: absolute; top: 1px; left: 2px'>
  foo
</div>

<div id='d2' style='width: 20px; position: absolute; top: 100px; left: 200px'>
  bar
</div>

Then we can connect the bottom right corner of the first div to the top right corner of the 2nd div by writing:

const getOffset = (el) => {
  const rect = el.getBoundingClientRect();
  return {
    left: rect.left + window.pageXOffset,
    top: rect.top + window.pageYOffset,
    width: rect.width || el.offsetWidth,
    height: rect.height || el.offsetHeight
  };
}

const connect = (div1, div2, color, thickness) => {
  const off1 = getOffset(div1);
  const off2 = getOffset(div2);

  const x1 = off1.left + off1.width;
  const y1 = off1.top + off1.height;

  const x2 = off2.left + off2.width;
  const y2 = off2.top;

  const length = Math.sqrt(((x2 - x1) * (x2 - x1)) + ((y2 - y1) * (y2 - y1)));

  const cx = ((x1 + x2) / 2) - (length / 2);
  const cy = ((y1 + y2) / 2) - (thickness / 2);

  const angle = Math.atan2((y1 - y2), (x1 - x2)) * (180 / Math.PI);

  const htmlLine = "<div style='padding:0px; margin:0px; height:" + thickness + "px; background-color:" + color + "; line-height:1px; position:absolute; left:" + cx + "px; top:" + cy + "px; width:" + length + "px; -moz-transform:rotate(" + angle + "deg); -webkit-transform:rotate(" + angle + "deg); -o-transform:rotate(" + angle + "deg); -ms-transform:rotate(" + angle + "deg); transform:rotate(" + angle + "deg);' />";

  document.body.innerHTML += htmlLine;
}

const d1 = document.getElementById('d1')
const d2 = document.getElementById('d2')
connect(d1, d2, 'green', 5)

We create the getOffset function with element el as its parameter.

Then we get the position and dimensions of the element with getBoundingClientRect method.

pageXOffset gets us the horizontal offset of el relative to the page.

pageYOffset gets us the vertical offset of el relative to the page.

left and top gets the left and top CSS values.

And width and height gets the width and height.

Next, we create the connect function that takes the 2 divs to connect, the color and the thickness respectively.

We call getOffset with the 2 divs in the beginning of the function.

x1 and y1 are the x and y coordinates of the bottom right of div1 with the offsets counted.

x2 and y2 are the x and y coordinates of the top right of div2 with the offsets counted.

Next, we use the distance formula to calculate the length between the 2 corners with:

const length = Math.sqrt(((x2 - x1) * (x2 - x1)) + ((y2 - y1) * (y2 - y1)));

Then we calculate the width of the line div with:

const cx = ((x1 + x2) / 2) - (length / 2);

The height or thickness is calculated with:

const cy = ((y1 + y2) / 2) - (thickness / 2);

Next, we find the angle to rotate with:

const angle = Math.atan2((y1 - y2), (x1 - x2)) * (180 / Math.PI);

Finally, we define the line HTML in a string and assign it to htmlLine by combining all the values we calculated in the style attribute value.

And then we concatenate the htmlLine value to the body’s innerHTML.

Finally, we select the 2 divs with document.getElementById.

And then we call connect with the 2 divs, the color 'green', and 5 pixels thickness to render the line connecting the 2 divs.

Now we should see a green line between the 2 divs.

Conclusion

To draw a line between two divs with JavaScript, we create a div that starts from the bottom right corner of the first div to the top right corner of the 2nd div.

We can do that by shifting the div, setting the length and rotating it so that it looks like it’s between the 2 divs.