HTML5 Canvas performance for scaling sprites

Well…This is likely a nobrainer for most, but for some reason it took me quite a while to figure this one out.  In my latest game asteroidsInc I have been designing I was experiencing some pretty awful frame rates, and so I started to try and optimized the code for better performance.  I was using the JavaScript drawImage function to scale the images I was using as sprites in order to achieve a retro pixely effect.  While it did accomplish the effect I was looking for it turns out the frame rate took a big hit due to the scaling.  To improve the performance I simply used Photoshop to enlarge my images (in order to retain the retro effect) and then used the drawImage function using no scaling. The performance boost was quite significant. In hindsight it seems quite obvious that using the scaling was a bad idea on sprites and would require more resources to render, but hey…sometimes the obvious just takes a little longer.


In recap, if you are are trying to animate multiple objects on the canvas it appears that resizing the images themselves has performance advantages over using the drawImage to scale the images.

  1. jasonmcleod says:

    Thanks for posting this, it’s nice to see someone else confirm the performance hit before I run through and scale all my artwork.

  1. There are no trackbacks for this post yet.