HTML and CSS Reference

In-Depth Information

Let's look at an example where we rotate the tank 90 degrees so it is facing to the right

rather than up.

Step 1: Save the current context to the stack

The
save()
context function will take the current contents of the canvas (in our case

the gray background rectangle) and store it away for “safekeeping”:

context.save();

Once we have transformed the tank, we will replace it with the
restore()
function call.

Step 2: Reset the transformation matrix to identity

The next step in transforming an object is to clear the transformation matrix by passing

it values that reset it to the identity values:

context.setTransform(1,0,0,1,0,0)

Step 3: Code the transform algorithm

Each transformation will be slightly different, but usually if you are rotating an object,

you will want to translate the matrix to the center point of that object. Our tank will

be positioned at 50,50 on the canvas, so we will translate it to 66,66. Since our tank is

a 32×32 square tile, we simply add half of 32, or 16, to both the
x
and
y
location points:

context.translate(x+16, y+16);

Next, we need to find the angle in radians for the direction we want the tank to be

rotated. For this example, we will choose 90 degrees:

var rotation = 90;

var angleInRadians = rotation * Math.PI / 180;

context.rotate(angleInRadians);

Step 4: Draw the image

When we draw the image, we must remember that the drawing's point of origin is no

longer the 50,50 point from previous examples. Once the transformation matrix has

been applied to translate to a new point, that point is now considered the 0,0 origin

point for drawing.

This can be confusing at first, but it becomes clear with practice. To draw our image

with 50,50 as the top-left coordinate, we must subtract 16 from the current position in

both the
x
and
y
directions:

context.drawImage(tileSheet, sourceX, sourceY,32,32,-16,-16,32,32);

Example 4-7
adds in this rotation code to
Example 4-4
. When you run the example

now, you will see the tank facing to the right.