animation loop using requestAnimationFrame

Because of the increased interest in HTML5-based animation, web browsers have implemented an API
that lets developers indicate they're using JavaScript specifically for animation, which allows for browserbased
optimizations. The function window.requestAnimationFrame accepts a callback function as an
argument and executes it prior to redrawing the screen. In some browsers, a second, optional parameter is
implemented that specifies an HTML element that provides the visual bounds of the animation. Changes to
the program that are made in this function argument happen before the next browser repaint. To create an
animation loop, chain together multiple calls to requestAnimationFrame:
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
//animation code...
}());
This might be a small snippet of code, but it’s important you understand exactly how it works because it
provides the core animation loop used in the book examples. We’ve defined a function, drawFrame, that
contains the animation code to run on every frame. On the first line in this function, we make a call to
window.requestAnimationFrame and pass a reference to the same drawFrame function that we’re

defining. The second optional argument is the canvas element that we’ll draw to. You might find it
surprising that we can pass a function as an argument to another function before we have finished defining
it. Just keep in mind, by the time it is needed here as an argument, it has already been defined.
When we execute the drawFrame function, window.requestAnimationFrame queues the drawFrame
function to be run again at the next animation interval, which repeats this process. Because we keep
requesting that the function run again, we’ve chained together a loop. Therefore, any code we place in this
function is called again and again, allowing us to animate the canvas at discreet intervals.
To start the loop, after drawFrame has been defined, wrap the function in parentheses and immediately
invoke it. This is a more space-efficient—and arguably clearer—alternative to defining the function first,
then immediately invoking it on the following line.
Because requestAnimationFrame is a relatively new feature, browsers are still working on their own
implementations of it. Because you want your code to be cross-platform, here is a little code snippet that
you can use to normalize the function across multiple browsers:
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = (window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
return window.setTimeout(callback, 1000/60);
});

}
This code tests whether the function window.requestAnimationFrame is defined, and if it’s not, runs
through the known browser implementations and assigns that as the function. If it cannot find a browserspecific
version of the function, then it falls back to a JavaScript timer-based animation using setTimeout
at an interval of 60 frames a second.
Because this environment check is used in all of the examples, include it in the utils.js file to import into
our documents. This way, you can be sure the animation loop works across multiple browsers, keeping the
scripts uncluttered so we can concentrate on understanding the core ideas of each exercise.