Images on the Canvas - HTML5 Canvas - page 228

Example 4-3 copies the second version of our spaceship (tile number 2) to the canvas and po-
sitions itat50,50.Italsoscales theimage to64×64,producingtheresult shownin Figure 4-6 .

Example 4-3. Using all of the drawImage() parameters
var

var tileSheet = new new Image ();

tileSheet . addEventListener ( 'load' , eventSheetLoaded , false

false );

tileSheet . src = "ships.png" ;

function function eventSheetLoaded () {

drawScreen ();

}

function function drawScreen () { //draw a background so we can see the Canvas edges

context . fillStyle = "#aaaaaa" ;
context . fillRect ( 0 , 0 , 500 , 500 );
context . drawImage ( tileSheet , 32 , 0 , 32 , 32 , 50 , 50 , 64 , 64 );

}

As you can see, we have changed the name of our Image instance to tileSheet because it
represents more than just the source for the single ship image.