5

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?

Joe
  • 46,419
  • 33
  • 155
  • 245

2 Answers2

2

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>.

stecb
  • 14,478
  • 2
  • 50
  • 68
  • +1 for the personal experience. Also, wow, did canvas exist 3 years ago? I bet finding documentation was quite a task :) – Felix Jun 21 '11 at 15:20
  • Thanks for +1 :) .. and, Yes, there was a pretty good mozilla doc about canvas..And for example google excanvas was already present :) – stecb Jun 21 '11 at 16:20
  • I have an "old" Sitepoint book from 07 called The Art and Science of Javascript that has a chapter on Canvas. I remember I completely ignored that chapter at the time. – kinakuta Jun 22 '11 at 08:35
1

I have heard that performance goes WAAAAAYYYYYY down for a canvas with a height greater than 600px. So you might want to work around that. Looking for reference now...

circusdei
  • 1,967
  • 12
  • 28