As the HTML5 canvas API doesn't provide methods for animation, we'll have to create our own Animation class for handling an animation stage. This recipe will cover the basics of animation and provide an Animation class for all of our future animation projects.
As browsers and computer hardware are not created equally, it's important to understand that the optimal FPS (Frames Per Second) value for each animation varies depending on the browser, the computer's hardware, and the animation's algorithm. Therefore, it would be quite difficult for a developer to figure out what the best FPS value is for each user. Fortunately, browsers are now implementing a requestAnimationFrame
method of the window
object which can automatically determine the best FPS for animations (thank goodness). As we'll see later in this chapter, a typical FPS value for a smooth animation is somewhere between 40 and 60 frames per second.
Take a look at the preceding diagram. To...