Images on the Canvas - HTML5 Canvas - page 125

Preloading Images
Before an image can be called in code, we must ensure that it has properly loaded and
is ready to be used. We do this by creating an event listener to fire off when the load
event on the image occurs:
spaceShip.addEventListener('load', eventShipLoaded , false);
When the image is fully loaded, the eventShipLoaded() function will fire off. Inside this
function we will then call drawScreen() , as we have in the previous chapters:
function eventShipLoaded() {
drawScreen();
}
In practice, we would not create a separate event listener function for
each loaded image. This code example works fine if your application
contains only a single image. In Chapter 9 , we will build a game with
multiple image files (and sounds) and use a single listener function for
all loaded resources.
Displaying an Image on the Canvas with drawImage()
Once 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 manipulation of both the image's source pixels and the destination
location for those pixels on 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 spaceShip = new Image();
spaceShip.addEventListener('load', eventShipLoaded , false);
spaceShip.src = "ship1.png";