Images on the Canvas - HTML5 Canvas - page 140

Figure 4-8. Applying a rotation transformation
Let's take this one step further by applying the animation technique from Exam-
ple 4-5 and looping through the eight tiles while facing the tank at the 90-degree angle.
Animating a Transformed Image
To apply a series of image tiles to the rotated context, we simply have to add back in
the frame tick loop code and increment the frameIndex variable on each frame tick.
Example 4-8 has added this into the code for Example 4-7 .
Example 4-8. Animation and rotation
var tileSheet = new Image();
tileSheet.addEventListener('load', eventShipLoaded , false);
tileSheet.src = "tanks_sheet.png";
var animationFrames = [1,2,3,4,5,6,7,8];
var frameIndex = 0;
var rotation = 90;