How to draw a line between two points using js and CSS

Question

This is a simple HTML page with 2 points and a line connecting the points, added using jQuery.

The result is that the line has no connecting points, but the line is offset for some reason.

function drawLine(){

    const line_ = $("<div>", { class: "line" });
    const p1 = $("#point1");
    var p1T = p1.position().top;
    var p1L = p1.css("left");

    // set line top equal to point1 top
    var lineT = p1T + "px";

    line_.css ({
        width: length + "px",
        transform: `rotate(${angle}rad)`,
        top: lineT,
        left: p1L
    });

    p1.parent().append(line_);
 }

// Get the elements representing the two points you want to draw a line between
 const point1 = document.getElementById('point1');
 const point2 = document.getElementById('point2');
 
 // Calculate the coordinates of the two points
 const point1Rect = point1.getBoundingClientRect();
 const point2Rect = point2.getBoundingClientRect();
 
 // Calculate the length and angle of the line
 const length = Math.sqrt((point2Rect.left - point1Rect.left) ** 2 + (point2Rect.top - point1Rect.top) ** 2);
 const angle = Math.atan2(point2Rect.top - point1Rect.top, point2Rect.left - point1Rect.left);

 drawLine();

 

#line-container {
  position: relative;
  border: 1px solid blue;
}

.line {
  position: absolute;
  height: 2px;
  background-color: aqua;
  margin: 0px;
}

.point{
  position: absolute; 
  margin: 0px;
  
}

#point1{
  background-color: red;
  top: 100px; 
  left: 100px; 
  width: 10px; 
  height: 10px;
}
#point2{
  background-color: blue;
  top: 200px; 
  left: 300px; 
  width: 10px; 
  height: 10px;
}

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <div id="line-container">
    <div id="point1" class="point"></div>
    <div id="point2" class="point"></div>
  </div>

The line and 2 points have position:absolute;, so top and left are relative to the container. p>

margin Also set all 3 to zero

The line top is set to the point1 top, but the line is above point1.

why is that?

Answer 1

The line rotates around the center, and you want it to rotate based on the origin, which in this case is the top left corner, but could be any other point. So you need to add transform-origin: top left

function drawLine() {

  const line_ = $("<div>", {
    class: "line"
  });
  const p1 = $("#point1");
  var p1T = p1.position().top;
  var p1L = p1.position().left;

  // set line top equal to point1 top
  var lineT = p1T + "px";

  line_.css({
    width: length + "px",
    transform: `rotate(${angle}rad)`,
    "transform-origin": "top left",
    top: lineT,
    left: p1L
  });

  p1.parent().append(line_);
}

// Get the elements representing the two points you want to draw a line between
const point1 = document.getElementById('point1');
const point2 = document.getElementById('point2');

// Calculate the coordinates of the two points
const point1Rect = point1.getBoundingClientRect();
const point2Rect = point2.getBoundingClientRect();

// Calculate the length and angle of the line
const length = Math.sqrt((point2Rect.left - point1Rect.left) ** 2 + (point2Rect.top - point1Rect.top) ** 2);
const angle = Math.atan2(point2Rect.top - point1Rect.top, point2Rect.left - point1Rect.left);

drawLine();

#line-container {
  position: relative;
  border: 1px solid blue;
}

.line {
  position: absolute;
  height: 2px;
  background-color: aqua;
  margin: 0px;
}

.point {
  position: absolute;
  margin: 0px;
}

#point1 {
  background-color: red;
  top: 100px;
  left: 100px;
  width: 10px;
  height: 10px;
}

#point2 {
  background-color: blue;
  top: 200px;
  left: 300px;
  width: 10px;
  height: 10px;
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div id="line-container">
  <div id="point1" class="point"></div>
  <div id="point2" class="point"></div>
</div>