Images on the Canvas - HTML5 Canvas - page 139

Notice in Example 4-7 that we remove the original call to draw
Screen() from the previous examples, and replace it with a new event
listener function that is called after the tileSheet has been loaded. The
new function is called eventShipLoaded() .
Example 4-7. Rotation transformation
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;
var x = 50;
var y = 50;
function eventShipLoaded() {
drawScreen();
}
function drawScreen() {
//draw a background so we can see the Canvas edges
context.fillStyle = "#aaaaaa";
context.fillRect(0,0,500,500);
context.save();
context.setTransform(1,0,0,1,0,0)
context.translate(x+16, y+16);
var angleInRadians = rotation * Math.PI / 180;
context.rotate(angleInRadians);
var sourceX = Math.floor(animationFrames[frameIndex] % 8) *32;
var sourceY = Math.floor(animationFrames[frameIndex] / 8) *32;
context.drawImage(tileSheet, sourceX, sourceY,32,32,-16,-16,32,32);
context.restore();
}
function eventShipLoaded() {
drawScreen();
}
Figure 4-8 shows the output for this example.