2D Canvas: low-level, 2D graphics rendering - HTML5 in Action - page 235

In response, browser vendors created a JavaScript function, requestAnima-
tionFrame() , that interprets the number of frames to display for a user's computer
( https://developer.mozilla.org/en/DOM/window.requestAnimationFrame ) . The bad news is
that requestAnimationFrame() isn't supported by all major browsers. The good
news is that Paul Irish created a polyfill that lets you use it anyway ( http://mng.bz/h9v9 ) .
Controlling fluctuating frames
requestAnimationFrame() is inconsistent in how many frames it shows per second.
It dynamically adjusts to what a computer can handle with a goal of 60 fps, so it might re-
turn anywhere from 1 to 60 fps. If it's returning less than 60 fps, it can cause movement
logic such as x += 1 to tear, become choppy, or randomly speed up and slow down because
of frame rates fluctuating. If you need your code to run at a consistent speed, you have two
options.
Option 1 is to put logic updates into setInterval() and drawing logic into request-
AnimationFrame() . The second and best option is to create a delta and multiply all of
your movement values by it (example x += 1 * delta); that way, animation is always con-
sistent (more info on rolling your own delta is available at http://creativejs.com/resources/
requestanimationframe/ ) .
Integrate animations into your engine with the following listing by adding window .re-
questAnimFrame directly above your Game object. Then add to your existing Game
object with a new method that uses requestAnimFrame() .