Lots of HTML canvasses or one big one?

Question

I'm planning an interface to show lots of little widgets (drawn on a <canvas>), which may move around (for example in a list that gets sorted different ways with jQuery). The number of widgets may be anywhere between 10 and 100.

I could do this with one big canvas and just paint lots of widgets in the correct place. Or I could have lots of <canvas>ses in <li>s. Are canvasses light-weight enough for this kind of thing? Is there a compelling performance reason to chose one or the other?

Answer 1

I had to do something similar 3 years ago to represent BPM. I Implemented it with <canvas> (I built a lib on top of both canvas and VML - for IE - ) , and I choose the second option u proposed.

The problem with canvas is that if you have lots of interactions (click on a particular element, move it etc), then each time you have to repaint everything (and this, for a large canvas full of elements, isn't the best in terms of performance). I preferred to represent X placeholders (each placeholder is a div containing a canvas), and I noticed performance was better and obviously DOM events (attached to canvas' container) were lot easier to manage.

Another way to implement this kind of interactive stuff could be by using SVG (and by now, I'd prefer this), through raphaelJS for example. For animations and 2d representation without interaction, I'd use <canvas>.