Images on the Canvas - HTML5 Canvas - page 138

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.