HTML5 Canvas Performance Tips

Here are some things we learned when building the i.TV grid with HTML5 Canvas, which was a fun experiment, but probably a terrible idea. You can decide if it was a good idea here: http://i.tv/guide.

1. Close your paths! (Avoid memory leaks)
2. Don't draw when you don't need to! (Improve FPS)
3. Profile! Profile! Profile!
4. Keep your canvas as small as possible. (Decrease memory use and improve FPS)
5. Check out requestAnimationFrame for animations. (Optimize FPS)
6. Mobile browsers don't do well with canvas animations (5 FPS FTW!)
7. Native scrolling > JS Scrolling!
8. DOM = slow, Canvas may be slower.

Here are some other techniques I've heard an help as well:
9. Typed arrays http://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays/
10. Consider variable re-use to prevent garbage collection. (Smoother animation)

Here are some other general tips for dealing with Canvas:
11. Make sure to handle touch events for mobile
12. Test your offset code in multiple browsers as it can get a little hairy