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

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/