Provavelmente mais uma questão de matemática, mas aqui vai ...

O que eu quero fazer é que dois elementos HTML sejam conectados por uma linha animada em uma tela de fundo

Aqui está um violino com uma versão simplificada do que eu quero fazer.

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

As linhas estão realmente lá, mas estão fora da tela e, se você usar o inspetor de elementos, poderá ver as coordenadas das linhas desenhadas na tela. Alguém poderia me ajudar sobre o que estou fazendo de errado e as linhas são desenhadas fora do lugar?

Esta é a prova de que as linhas estão desenhadas mas fora de lugar. (substituído estágio de fluido e tamanho de tela com dimensões fixas)

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

EDIT Parece que o que estou tentando fazer não é possível para um layout fluido. Depois de muitos problemas, descobri que o elemento Canvas é seu próprio plano e não há maneira segura de combinar coordenadas de âncora com coordenadas de canvas sem tamanhos fixos