Canvas Transformations and Animation

It is impressive how powerful the HTML5 canvas is, and what can be achieved with it using minimal code can definitely give you a buzz. In this next section, we will introduce some transformation operations that we can use to provide additional animation to our car.

Before we get into that, though, we’ll have a look at a simple example to get an overview of how transformations operate. There are a number of different transformation operations that are available to you when using the canvas; however, since this isn’t a book on the HTML5 canvas specifically, we will only touch on two operations that we require to expand on our sample:

translate: The translate method shifts the origin of the canvas to the specified position. By default, the origin (0,0) of the canvas refers to the top-left corner, but that can be changed using the translate method.

rotate: The rotate method rotates the canvas around the origin. Used in combination with the translate method, it can do some very cool things.

NOTE: Once you start using transformation operations, you won’t want to have to reverse changes to the context state all the time. This is why we recommended getting into the habit of using the save and restore methods of the canvas, as they will prevent you from having to keep track of the various transformations and state changes you make.

For more information on canvas transformations and the importance of the save and restore methods, we highly recommend the Mozilla Developer Center’s information on the topic, at https://developer.mozilla.org/en/Canvas_tutorial/Transformations.

CHAPTER 7: Exploring Interactivity

Let’s take a look at what we can do with translate and rotate methods in a simple example. Create another HTML file for this example, rotation.html, and base it on one of our earlier examples. Then create a rotation.js file and include that in the HTML:

(function() { var canvas = null, context = null, angle = 0;

function resetCanvas() { ... } // resetContext

function animate() { context.save(); try {

// clear the drawing surface context.clearRect(0, 0, canvas.width, canvas.height);

// set the origin of the context to the center of the canvas

context.translate(canvas.width * 0.5, canvas.height * 0.5);

// rotate the canvas around the origin (canvas center)

context.rotate(angle);

// draw a rectangle at the specified position

context.fillStyle = "#FF0000"; context.fillRect(-30, -30, 60, 60);

// increment the angle

angle += 0.05 * Math.PI;

} finally {

context.restore(); } // try..finally } // animate

$(window).bind("resize", resetCanvas).bind("reorient", resetCanvas);

$(document).ready(function() { window.scrollTo(0, 1); resetCanvas();

setInterval(animate, 40); }); })();

While transformations can sound difficult, the preceding is very simple code and should produce a result similar that displayed in Figure 7–9.

CHAPTER 7: Exploring Interactivity

Figure 7–9. A rotating animation can be created simply by using various canvas transformation operations. Just quickly, we will walk through the code from this implementation of the animate

function:

1. The translate method is called shortly after the canvas is cleared, and we set the origin of the canvas to the center of the canvas.

2. The rotate method is then called, passing in the angle of rotation (in radians) that should be applied.

3. Next, a canvas fillStyle is specified, and the fillRect method is called to draw

a solid-red square at the center of the canvas.

4. The value of the angle variable is then incremented for the next time the square is drawn.

When working with transformations on the canvas, it is important to remember a few things:

The translate method shifts the origin of the canvas, which means that both of your subsequent transformation operations and any draw operations are now made relative to the point you translated to.

Calling context.save() prior to performing the translation, and then using context.restore() after, will help to make using transformations manageable. Although not always appropriate, having the origin shift back to a constant point after transformation operations will make your draw code easier to manage and keep track of.

CHAPTER 7: Exploring Interactivity

Canvas Transformations and Animation