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

Answer 2

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

Answer 3

A couple of more links:

• HTML5 Games 0.2: Integers are Your Friends
• HTML5 Canvas Performance in deviantART muro
• Game Engine Listing. See esp. "Other" for extra links.

It's hard to give any specific tips as I'm not familiar enough with your game. You might want to split up rendering to multiple layers, though. This makes sense particularly if you have some static elements there. This way you can avoid some clearing and end up with nicer code overall.