Prawdopodobnie bardziej pytanie matematyczne, ale tutaj idzie ...

Chcę, aby dwa elementy HTML były połączone animowaną linią na płótnie tła

Oto skrzypce z uproszczoną wersją tego, co chcę zrobić.

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

Linie są rzeczywiście tam, ale są poza obszarem roboczym, a jeśli użyjesz inspektora elementów, możesz zobaczyć współrzędne narysowanych linii w obszarze roboczym. Czy ktoś może mi pomóc w tym, co robię źle, a linie są wyciągane z miejsca?

To dowód, że linie są narysowane, ale nie na miejscu. (zastąpiono płynną scenę i rozmiar płótna stałymi wymiarami)

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

EDYCJA Wygląda na to, że to, co próbuję zrobić, nie jest możliwe dla układu płynów. Po wielu kłopotach odkryłem, że element Canvas jest jego własną płaszczyzną i nie ma bezpiecznego sposobu dopasowania współrzędnych kotwicy do współrzędnych płótna bez ustalonych rozmiarów