Is there a way to draw a line between two points on a HTML page without Canvas?

Question

I'm designing a web interface for a robotic arm, and I need a way to draw lines between points in a HTML div element, given a start (x, y) and a end (x, y). I'd rather not use a canvas, because I need the lines to be elements themselves (They should have onclick events and CSS styles). Maybe something with SVG? Note that this is different from questions like this, as that question was trying to connect elements, whereas I'm trying to connect points inside an element.

<div id="somediv">
    <!--This div is 100px * 100px, I need to draw a line 4px thick from (23, 24) to (87, 96)-->
</div>

It would actually be preferable if I could create the line based on a single point and angle, but the math to convert that to two points is easy.

Yes, an SVG would make sense here, but we maybe need more context to help implement. — Keith, Jun 05 '23 at 20:23
arent the points inside an element also elements? In that sense, you are still trying to connect elements. — The Fool, Jun 05 '23 at 20:32
@TheFool I'm trying to connect two points, both inside the same element. If there is a way to specify a point inside an element as an element, I don't know it. — TheTridentGuy supports Ukraine, Jun 05 '23 at 20:35
I mean conceptionally, if I were to use the regular DOM, I probably would also have my points be actual elements, so I can hook into all the functionality that comes with that. You can just stick 2 spans or whatever in your div. With relative position, it should be possible to put your points where you want, relative to the parent div. Then you would still need SVG magic to connect arbitrary point elements. — The Fool, Jun 05 '23 at 20:37

score 3 · Accepted Answer · answered Jun 05 '23 at 20:44

The basic idea here is to place the SVG on top of the DIV element, make the DIV position relative, and the SVG absolute to do this. And then you can draw the SVG to any x/y point you like.

And as expected, events like click work with SVG, try clicking the line, and double clicking the yellow box.

example ->

document.querySelector('#theline').
  addEventListener('click', 
    () => alert("line clicked"));

document.querySelector('#somediv').
  addEventListener('dblclick', 
    () => alert('box double clicked'));

#somediv {
  width: 100px;
  height: 100px;
  background-color: yellow;
  position: relative;
}

#svg {
  position: absolute;
  top: 0px;
  left: 0px;
}

<div id="somediv">
    <!--This div is 100px * 100px, I need to draw a line 4px thick from (23, 24) to (87, 96)-->
   <svg id="svg" width="100" height="100"> 
      <line 
        style="cursor:pointer"
        id="theline" 
        x1="23" y1="24" x2="87" y2="96" stroke="black" stroke-width="4"/>
   </svg>
</div>

score 0 · Answer 2 · answered Jun 05 '23 at 20:57

I modified @Keith's answer, making it into a function that draws a line between given points in a element:

function drawLine(x1, y1, x2, y2, line_class,     element=document.documentElement) {
            element.innerHTML += `<svg><line class=${line_class} x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}"/></svg>`
}

drawLine(20, 25, 89, 78, "line", document.getElementById("adiv"))

.line {
    stroke-width: 5px;
    stroke: black;
}
#adiv {
    height: 100px;
    width: 100px;
    background-color: blue;
}

<div id="adiv">
</div>

Is there a way to draw a line between two points on a HTML page without Canvas?

2 Answers2