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

Question

Probably more of a math question, but here it goes...

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

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

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

The lines are actually there, but they are outside of the canvas, and if you use your element inspector you can see the coordinates of the drawn lines in the canvas. Could someone help me on what I'm doing wrong and the lines get drawn out of place?

This is the proof that the lines are drawn but out of place. (replaced fluid stage and canvas size with fixed dimensions)

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

EDIT Looks like what I'm trying to do is not possible for a fluid layout. After a lot of trouble I found out that the Canvas element is it's own plane and there is no safe way to match anchor coordinates with canvas coordinates with no fixed sizes

Answer 1

I have found out the reason of the missplacement of the lines.

It seems like that CSS width and height of canvas is completely different than the actual width and height of the canvas element. So if you wish to make the coordinates of the HTML elements match the coordinates of the lines on the Canvas element, you need to set fixed width on the div that contains it and the same and fixed width and height, directly on the element

Here is the fixed example so you can have a look:

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