Canvas tag - drawarc vs image

Question

I implemented a canvas element that uses drawarc to create the effect of the appearance of bubbles at different speeds on the background (this is an underwater thematic site for an underwater client). It looks really good, and I'm pretty happy with it, but I noticed a slight performance issue in some browsers (IE9 in particular).

I draw bubbles using drawarc to create translucent circles - can someone tell me if it is more or less expensive (in terms of performance on the client side) to stick images / sprites on the canvas instead?

-Mike

Answer 1

Drawing arcs / circles is much more expensive than drawing images. Drawing images is most likely the most effective method of drawing on canvas. I wrote this Bachelor's thesis on this topic. This is in German, but mostly when drawing arcs using an arc and arcTo you get less than 15,000 operations per second in IE9. When drawing images, you get more than 160,000 operations per second.