«

»

Apr 29

HTML5 Canvas Drawing Speed Testing using Stats.js and jsperf.com

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!





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.

  • chris gregory

    i’m not sure fps is the only measure of performance you need to look at here too. also the number of objects you can instantiate and/or move per second. looking at your ‘make it pretty’ it looks like it’s going a lot slower despite high fps because it’s not making as many new objects per unit time. some things will be able to be added really fast, some won’t add very fast at all. in particular, displaying new images can involve hard disk reads which will make that much slower (?? i would think anyway but i am not any type of expert, just starting work on my own game at the moment so reading various sources to see what works well, i found your site because of the hex grid code…. i was thinking of just using a bitmap and then drawing over various regions of it to move counters, but that seems like it would give terrible performance, though who knows… i guess i’d have to test)

  • Nice Blog. Read an another. In HTML5 Canvas plays role for Graphics. Canvas consists of a drawable region defined in HTML5 code with width and height attributes. Canvas is a two-dimensional grid. We can draw graphics or animations using JavaScript on a canvas. Let us talk about a rectangle. To draw a rectangle look at the below code. Read more at http://jharaphula.com/using-canvas-in-html5