html5 canvas general performance tips

Question

I am developing a game for html5 canvas while mainly targeting mobile devices. The canvas is resized to the biggest available resolution, so that it almost makes a fullscreen ga

Answer 1

You can read Making an iPad HTML5 App & making it really fast by Thomas Fuchs

The key points he make:

1. Images slow things down immensely– get rid of them
2. Avoid text-shadow & box-shadow
3. Hardware-acceleration is quite new… and buggy (concurrent animations is limited)
4. Avoid opacity if possible (sometimes interferes with hardware-accelerated rendering)
5. Use translate3d, not translate (the latter is not hard-accelerated)

Some other points that can improve performance significantly:

• use getImageData as infrequently as possible (major slowdown) [2]
• combine more than one canvas in order to repaint smaller parts that are changing more frequently

You can also benchmark your app with Chrome/Firebug Profile can show you which functions are slow.

[2] http://ajaxian.com/archives/canvas-image-data-optimization-tip