886826 - Add chapter to the canvas tutorial about "Advanced animations"

Status: RESOLVED FIXED

(Developer Documentation Graveyard :: API: Miscellaneous, defect, P2)

Description

[Eric Shepherd [:sheppy]]

:: Developer Documentation Request

      Request Type: New Documentation
     Gecko Version: unspecified
 Technical Contact: 

:: Details

We have a basic animations article (https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Basic_animations), but we need to follow it up with an article that covers more advanced techniques, so that we don't have to start the Basic animations article with text that basically says canvas isn't good for games and other high-performance animations.

This article should cover things like requestAnimationFrame, optimization techniques, and other APIs that make it possible to make canvas animation fast.

Comment 1

[Eric Shepherd [:sheppy]]

From Hacks: https://hacks.mozilla.org/2013/05/optimizing-your-javascript-game-for-firefox-os/

Also, I suggest this URL for the new article: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Advanced_animations

Comment 2

[Eric Shepherd [:sheppy]]

Also see: http://blog.safaribooksonline.com/2012/04/25/css-tricks-for-html5-canvas-games/

Comment 3

[Florian Scholz (Open Web Docs)]

The basic animations article uses requestAnimationFrame now (as recommend for any animation)
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations

An advanced animations article has been added to explain some physics like velocity, acceleration, boundary collision checks. 
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Advanced_animations

requestAnimationFrame and web games are also covered in this article in the game development zone:
https://developer.mozilla.org/en-US/docs/Games/Techniques/Efficient_animation_for_web_games

I'm calling this done.