Time for action – creating an animation on the canvas

In this example, we'll draw the same flag as we did before, except that this time we'll animate the different shapes. The underlying HTML used in this example is exactly the same as in the previous examples. All that changes is the contents of the <script> element at the end of the <body>.

  1. To make the working file for this example, just remove everything in the <script> element at the bottom of canvas-explorer.html and resave the file as canvas-animated.html.
  2. The first thing we'll do is bring the blue rectangle in from the side of the canvas to the center of the <canvas> element. Add the following code to the now empty <script> element at the bottom of the page:
    (function() { var canvas = document.getElementById("c"), ...

Get jQuery 1.4 Animation Techniques Beginner's Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial