Lately I’ve been doing some performance testing of different canvas drawing functions, I specifically wanted to test the performance of drawing radial gradients vs. arcs and images.
You can see my Canvas Draw Tests jsPerf, it gives you a nice graph of the historic runs by browser. Feel free to run your own test using your favorite browser.
HTML5 Canvas Drawing Speed Tests
I’ve also included the code and test page I wrote here so you can try it out for yourself and tweak the test for your own needs if you like.
Sorry your browser doesn't support the HTML5 canvas! Use requestAnimationFrame Radial Gradient Arc (Circle) Image Make it Pretty!
I’m not done with my tests, I’d like to do further investigating and compare the performance of drawing paths and other shapes as well. At this point, it seems image drawing is across the board faster. I was actually surprised that in some browsers it seems that drawing radial gradients is faster than drawing a filled circle (arc). As I work on my next HTML5 game these performance testing methods will be helpful to figure out how to keep the game running at high frame rates. Another good resource for tricks to keep canvas drawing as fast as possible is the very good tutorial over at HTML5 Rocks: Improving HTML5 Canvas Performance.