How to draw a bezier line between two DOM elements

Question

How can I draw a Bezier Line between two non-static DOM elements, like this:

The two lines should be drawn between the

<div class="brick small">Line starts here</div>

and the

<div class="brick small">Line ends here</div>

of this CodePen: https://codepen.io/anon/pen/XeamWe

Note that the boxes can be dragged. If one of the elements changes its position, the line should be updated accordingly.

If I'm not wrong I can't use a canvas, right? What can I use instead?

Doctrine

Why wouldn't you be able to use a canvas? – Indetermination

What is the cubic bezier curve that you have tried to draw between the elements? See stackoverflow.com/help/mcve – Inherent

@PatrickEvans Because the boxes are DOM elements. AFAIK, I would have to overlap the canvas and the boxes container. – Doctrine

And there is nothing stopping you from doing that. Overlay the canvas, set it's pointer-events to none and draw as needed – Indetermination

Answer 1

Let me point you toward the answer I beleve you're looking for, it's a dom element type called 'SVG' which is supported by most if not all web browsers of today (so you won't need to plug in anything external), in which you can draw lines, shapes, apply graphical filters much like in Photoshop and many other useful things, but the one to be pointed out here is the so called 'path', a shape that can consist of both straight lines with sharp corners, or curved lines (bezier) or both combined.

The easiest way to create such paths is to first draw them in for example Illustrator, save the shape in the SVG format, open that file in a text editor and pretty much just copy the generated markup code and paste it into your html, as it is supported there. This will result in the drawn shape to be displayed on your site. But in your case, you won't come around the a little bit complex structuring of the paths, because you wish to have control of it using javascript, so I would suggest first making a few simple paths in this way by exporting from Illustrator, study these in code, then manipulate their bezier values in javascript until you get the hang of how they work, once you've done that you will be able to create the accurate bezier shape you have in mind and (knowing the positions of the elements you want to connect) position them so that they connect your boxes.

Paths can even be decorated with markers, like an arrowhead in the end or beginning of the path, you can even design your own markers as you like them to look and much more if you would dig deeper into it.

Good luck! :)

Electroscope