Images on the Canvas - HTML5 Canvas - page 222

Displaying an Image on the Canvas with drawImage()

After we have an image loaded in, we can display it on the screen in a number of ways.
The drawImage() Canvas method is used for displaying image data directly onto the canvas.
drawImage() is overloaded and takes three separate sets of parameters, each allowing varied
manipulationofboththeimage'ssourcepixelsandthedestinationlocationforthosepixelson
the canvas. Let's first look at the most basic:

drawImage ( Image , dx , dy )

This function takes in three parameters: an Image object, and x and y values representing the
top-left corner location to start painting the image on the canvas.
Here is the code we would use to place our spaceship image at the 0,0 location (the top-left
corner) of the canvas:

context . drawImage ( spaceShip , 0 , 0 );

If we want to place another copy at 50,50, we would simply make the same call but change
the location:

context . drawImage ( spaceShip , 50 , 50 );

Example 4-1 shows the full code for what we have done so far.

Example 4-1. Load and display an image file
var

var spaceShip = new new Image ();

spaceShip . addEventListener ( 'load' , eventSheetLoaded , false

false );

spaceShip . src = "ship1.png" ;

function function eventSheetLoaded () {

drawScreen ();

}

function function drawScreen () {

context . drawImage ( spaceShip , 0 , 0 );
context . drawImage ( spaceShip , 50 , 50 );

}

Figure 4-1 shows the 32×32 ship1.png file.