What's the best way to do it?
I've looked at How to draw a line between 2 elements using JQuery and refreshing that line? but soon realised they were talking about a single canvas ;)
I also took a gander at http://raphaeljs.com/
It's live at http://--- - Names anonymised and objects won't save their positions when moved...
All guidance is welcome and greatly appreciated. Even if you want me to rewrite all the canvas stuff from scratch. :)
You have several options:
Add another canvas for each line you want to draw, it's size should be a rectangle whose diagonal is the line you want to draw. it's z-index should be lower than the draggables so it will not hide the mouse clicking. each line-canvas should be redrawn whenever one of its two end canvas draggables are dragged.
Same as before, but maintain only one canvas at the bottom. whenever any draggable is dragged, clear the canvas and redraw all the lines.
rewrite your code that everything is on one canvas and everything is redrawn every time. Using this method you won't be able to use jQuery UI's dragables and will have to implement the dragging yourself.
If I'd have to choose I would go for option 2.
