HTML5 Canvas Cookbook

Chapter 5. Bringing the Canvas to Life with Animation

In this chapter, we will cover:

• Creating an Animation class
• Creating a linear motion
• Creating an acceleration
• Creating an oscillation
• Oscillating a bubble
• Swinging a pendulum
• Animating mechanical gears
• Animating a clock
• Simulating particle physics
• Creating microscopic life forms
• Stressing the canvas and displaying the FPS

Introduction

In the first half of this book, we covered the fundamental capabilities of the HTML5 canvas, including path drawing, shape drawing, working with images and video, and transformations. This chapter focuses on animation, which is not a part of the HTML5 canvas API. Although the API doesn't provide us with animation functionality, we can certainly create an Animation class that ...