Building a graph with draggable nodes

Question

I want to populate some user data on the browser as a graph of draggable nodes, with each node representing a user and the edges are relationships between them. I figured out a solution(it works): I use draggable divs over an HTML5 canvas (the divs have a greater z-index than the canvas, and hence are visible). The canvas is then used to draw the lines connecting the divs. The problem is that every time the "drag" event is triggered by the user dragging a node, the entire canvas needs to be cleared and ALL the edges need to be redrawn. That leads to flicker and this, I think, is not the optimal solution. Please note that I'm not really a HTML/CSS pro, and may be my solution is very naive.

I can use any suggestions from you CSS(3)/HTML(5) Gurus. I am open to all sorts of solutions, but would like to avoid Flash/[Silver|Moon]light.

As some example, I really like the Pearltrees interface, but mine need not be that fancy. I tried "reading" main.js from their page source, but its a gazillion functions, all wrapped up in a single line each.

Answer 1

You don't have to clear the entire canvas each time it draws. That's just the simplest way to code it.

Instead you can keep track of the line(s) related to the moved node and just redraw that section by drawing over the line with the background color (more complicated if background isn't a solid color), then drawing the new line.

You'll run into complications when you have intersecting lines that you'll need to handle. For simplicity, erasing can be done in rectangles then some math will figure out if you're intersecting other lines, if so they will need to be redrawn as well.

If you want to get really fancy you can redraw in a more granular fashion but rectangles should be sufficient in most cases.