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 game.

On an ipad that would be a 1024x786 canvas; at a resolution like this I notice a significant drop in framerate. On smaller resolution like 480x320 on iphone the game runs smooth! I guess this is because the device is fillrate limited.

Anyhow I would like to optimize as much as possible. I would be very grateful if you could post any general performance tips that you have for html5 canvas development.

Answer 1

Also see this canvas performance optimization article on html5rocks, which contains jsperf data which includes mobile browsers.

Answer 2

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