How to Use the Transformations Feature in Your HTML5 Game

By Andy Harris

The Sprite class has the capability to move and rotate in your HTML5 game, but these features are not built into normal JavaScript. You can use the transformation features of the canvas tag to get this behavior.

Transformations are math operations that can be applied to any drawing or image to change the appearance. There are three major transformations:

  • translation: Moves a particular amount in X and Y.

  • rotation: Rotates around a particular point.

  • scale: Changes the size of the drawing in X and Y.

The canvas element allows all these operations on any type of drawing. However, the way the canvas element does this gets a little closer to math than you may have gotten before. Transformations in the canvas element can be hard to understand until you understand a little about how they really work.

How to perform transformations on a game object

In math, you don’t really transform objects. Instead, you modify the coordinate system and draw your image in the newly transformed coordinate system. It’s common in a vector-drawing application to have several hidden coordinate systems working at once. That’s important, because it’s the way canvas transformations work. Essentially, when you want to perform transformations on an object, you do the following:

  1. Announce the beginning of a temporary coordinate system.

    The main image already has its own coordinate system that won’t change. Before you can transform anything, you need to build a new coordinate system to hold those changes. The save() command indicates the beginning of a new coordinate system definition.

  2. Move the center with translate().

    The origin (0, 0) starts in the upper-left corner of the canvas by default. Normally, you’ll build your transformed objects on the (new) origin and move the origin to place the object. If you translate (50, 50) and then draw an image at (0, 0), the image will be drawn at the origin of the temporary coordinate system, which will be at (50, 50) in the main canvas.

  3. Rotate the coordinate system with rotate().

    The rotate() command rotates the new coordinate system around its origin. The rotation parameter is a degree in radians.

  4. Scale the coordinate system in X and Y.

    You can also alter the new coordinate system by applying X and Y scale values. This allows you to create stretched and squashed images.

  5. Create elements in the new coordinate system.

    After you’ve applied all the transformations you want, you can use all the ordinary canvas drawing techniques. However, these drawings will be drawn in the virtual coordinate system you just made, not in the canvas’s main coordinate system.

  6. Close the temporary coordinate system.

    Generally, you’ll want to apply different transformations to different parts of your canvas. When you’re finished with a particular transformation, use the restore() command to close out the new coordinate system. All subsequent drawing commands will use the default coordinate system of the canvas object.

How to transform a game image

It can be hard to understand how mathematical transformations work because they seem so simple on the surface. Build a program to see how this all fits together.


<html lang = "en">
 <meta charset = "UTF-8" />
 <script type = "text/javascript">
 function draw(){
 var drawing = document.getElementById("drawing");
 var con = drawing.getContext("2d");
 var car = new Image();
 car.src = "car.png";;
 con.translate(100, 100);
 con.rotate(Math.PI / 4);
 con.scale(3.0, 1.5);
 con.drawImage(car, -25, -25, 50, 50);
 //draw a rectangle using the ordinary
 //coordinate system
 con.strokeStyle = "red";
 con.lineWidth = 5;
 con.strokeRect(0, 0, 200, 200);
 } // end draw
<body onload = "draw()">
 <canvas id = "drawing"
   height = "200"
   width = "200">
 <p>Canvas not supported</p>

This program does the normal canvas setup and then creates a transformation that translates the image to the center of the canvas, rotates the image, and changes the image’s size:

  1. Create a page with a canvas.

    Normally, simpleGame will create the canvas for you, but in this case, the canvas element is made by hand.

  2. Do all the normal setup stuff.

    This involves the regular housekeeping: getting access to the canvas and its context and creating the image.

  3. Begin a new coordinate system.

    The save() command doesn’t really save anything. It indicates the beginning of a new coordinate system. Any drawing commands that occur between this save() statement and the matching restore() will follow transformation functions.

  4. Translate the new system.

    Move the coordinate system to (100, 100), which is the center of the canvas.

  5. Rotate the new system.

    Rotate the image by pi / 4 radians, which is 45 percent.

  6. Scale the new system.

    Multiply the X values by 3 and the Y values by 1.5.

  7. Draw an image.

    Because this image is drawn inside a save() / restore() block, it’s drawn with the transformations intact.

  8. End the subsystem with restore().

    The restore() command closes up the temporary coordinate system so all subsequent commands will refer to the parent coordinate system.

  9. Draw a red rectangle in the default system.

    The red stroked rectangle is drawn outside the normal coordinate system, so it’s not scaled or rotated.

The main design of the Sprite object is an image surrounded by a transformation. When you create a sprite, it builds the image object, and it defines a transformation with translation, rotation, and scale.

As you manipulate the position, angle, and speed of the sprite, you’re really simply changing the values sent to the transform. The image is offset so the (x, y) properties of the sprite specify the center of the sprite. That way, sprites rotate around their center, which gives a more natural appearance.