How to connect two HTML elements by drawing lines in a background canvas?

Question

Probably a more mathematical question, but here it goes ...

What I want to do is two HTML elements that should be connected by an animated line on the canvas background

Here is a fiddle with a simplified version of what I want to do.

http://jsfiddle.net/loupax/zUqXn/

There are actually lines, but they are outside the canvas, and if you use the element inspector, you can see the coordinates of the drawn lines in the canvas. Can someone help me with what I am doing wrong and the lines have gone from outside?

This is proof that the lines are drawn, but inappropriate. (replacement of the working phase and canvas size with fixed sizes)

http://jsfiddle.net/loupax/zUqXn/8/

EDIT It seems that what I'm trying to do is not possible for a liquid layout. After many troubles, I found that the Canvas element is its own plane, and there is no safe way to map snap coordinates to canvas coordinates without fixed dimensions

Answer 1

I found out the reason for the downtime of the lines.

It looks like the width and height of the CSS width are completely different from the actual width and height of the canvas element. Therefore, if you want the coordinates of the HTML elements to correspond to the coordinates of the lines on the Canvas element, you need to set a fixed width on the div that contains it, and the same fixed width and height, directly on the element

Here is an example so you can see:

http://jsfiddle.net/loupax/zUqXn/29/