Take the 2-minute tour ×

i am developing a game for the html5-canvas platform 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! so i guess this is because the device is fillrate limited.

but anyhow i would like to optimize as much as possible.

so i would be very grateful if you could post any general performance tips that you have, when it comes to html5-canvas development.

share|improve this question
Two articles about Pixel Manipulation performance optimization: - elekslabs.com/2012/11/html5-canvas-performance-and.html - elekslabs.com/2012/11/html5-canvas-performance-and_9.html –  Victor Haydin Nov 9 '12 at 12:33

3 Answers 3

up vote 22 down vote accepted

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

share|improve this answer
+1 Interesting article –  pimvdb Sep 10 '11 at 10:21
This is basically the best article on the subject that can exist. –  Jasconius Oct 4 '11 at 23:49

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

share|improve this answer
thanks for the link. infact i have already read this one. unfortunately my game relies heavily on images so i cant really get rid of them. i will try to respect the other rules though! –  clamp Feb 22 '11 at 16:43
This article is misleading as an answer of this question : its topic is not the canvas but generally html5 coding. Most of the points given here apply to problems entirely separate from the canvas, like css properties of html elements. Using and caching images (as an offscreen canvas) is actually a good practice when drawing complex shapes to the canvas. –  MONK Apr 3 at 23:08

A couple of more 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.

share|improve this answer

Your Answer


