HTML Canvas performance - import image or draw canvas

For images of this complexity/simplicity, is it better to create pngs and import into canvas or draw the paths and fill on the canvas?

http://www.freeiconsdownload.com/site-i开发者_开发技巧mages/Large/developer_icons_452x336.jpg

With Canvas, in general, it is almost always better to draw from a PNG/in-memory canvas than to construct and draw a path. (see footnote) Here's some simple data. We're talking a factor of 10 here. For simple stuff.

Especially if you are going to draw those objects over and over, 60 times a second.

And especially when text is involved.

With complex canvas-generated shapes, several performance-minded people have taken to pre-rendering them on in-memory canvases and then drawing from canvas to canvas (using drawImage) instead of recreating the path each time. It is worth it in an awful lot of cases, but of course nothing can beat profiling and timing your own specific situation.

Not to get off course, but I'd just like to remind that you probably shouldn't be worrying about this sort of thing until you are (nearly) finished with your Canvas app.

"We should forget about small efficiencies, say about 97% of the time: premature optimization is the root of all evil" -Knuth

A big thing to note is that for a lot of applications, the performance of drawing these buttons might not even matter (or else have no tangible difference) and you probably do not want to even worry about which way is faster until you are already finished the first iteration of your Canvas app and are working on the "polish, polish, polish" update.

Some may wonder when rendering paths on the fly is better and it's probably obvious to most but in case it isn't I will give it a mention. There are certainly times path-rendering-on-the-fly is the case: Interactive paths such as in drawing programs and animations born out of paths, where the next frame is not another still image but an addition to a path. These and more - anywhere that you want to update the path itself with each frame - are the places that you'll want to keep paths and not try to pre-render anything.

I imagine that each browser would perform differently, it would probably be best to write a quick benchmark and time how long it takes to draw say 1000 of each type.

That being said, in terms of ease of programming, if you have the PNGs already why not use them as is.