Canvas tag - drawarc vs image

Question

I've implemented a canvas element that uses drawarc to create the effect of bubbles rising up at various speeds on the background (it's an underwater themed site for an underwater-themed client) - It looks really good and I'm pretty pleased with it, but I'm noticing a slight performance issue in some browsers (specifically IE9).

I'm drawing the bubbles using drawarc to create semi translucent circles - can anyone tell me if this is more or less expensive (in terms of client side performance) to stamp images/sprites onto the canvas instead?

-Mike

Answer 1

Drawing arcs / circles is much more expensive than drawing images. Drawing images is most likely the most efficient method for drawing anything to a canvas. I wrote my Bachelor Thesis on this subject. It is in german, but basicly when drawing arcs using arc and arcTo you get less than 15.000 operations / sec in IE9. When drawing images you get more than 160.000 operations per second.