Basics of JavaScript for Animation - HTML5 Animation with JavaScript - page 17

Keeping these steps in mind, we'll create a function that we can call repeatedly to update the object's
position and draw it to the canvas element. We then create a JavaScript timer to set up the loop:
function drawFrame () {
ball.x += 1;
ball.draw(context);
}
window.setInterval(drawFrame, 1000/60);
Here, we've set up the drawFrame function to update the ball and render it to the canvas using its draw
method (which we haven't created yet). We pass drawFrame as an argument to window.setInterval ,
which repeatedly executes the function at an interval specified in milliseconds by the second argument. In
this example, that's 1000/60 , which is 60 frames a second, or about 17 ms.
For a long time, this was the way developers had to set up an animation loop using JavaScript. If you
really wanted to, you could still use this method in the example code throughout this topic. The problem is
that JavaScript timers were never intended to be used for animation. They are not accurate to the
millisecond—timer resolutions vary across browsers—so you cannot count on them for high quality
animations. Furthermore, the delay specified by the second argument is only a request to be executed at a
given time. If there are other jobs in the browser's execution queue that need to be run, then the animation
code has to wait.
Because animation was never a feature of the previous HTML specification, browser vendors had not
placed much priority on these kinds of optimizations. However, with HTML5's canvas element and a new
emphasis on multimedia content, browsers are once again competing against each other on performance
and speed. Recognition that animation has become an increasingly important component of web
applications has led browser vendors to invent new solutions to handle the demands placed on them.
An 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 browser-
based 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 topic 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