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.
To facilitate my testing I used Stats.js - a graphical performance monitor you can easily add to your sites to test milliseconds between javascript calls and frames per second. 
Another great resource for testing javascript performance is jsPerf.com, to create a test you simply add your setup and teardown code and then specify the code you want to test the performance of.
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!
Results
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.
