HTML5 Canvas Cookbook

Creating an Animation class

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.

Getting ready...

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 ...