• Choose a category
• All
• Classic-Fiction

context.textBaseline = 'top';

context.fillText ("Canvas!", 0, 0);

}

}

Image Basics

The Canvas API allows access to the DOM-defined Image object type through the use of the drawImage() method. The image can be defined in HTML, such as:

Or it can be defined in JavaScript. We create a new JavaScript Image instance like this:

var spaceShip = new Image();

We can then set the file source of the image by assigning a URL to the src attribute of our newly created Image object:

spaceShip.src = "ship1.png";

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();

}

NOTE

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";

function eventShipLoaded() {

drawScreen();

}

function drawScreen() {

context.drawImage(spaceShip, 0, 0);

context.drawImage(spaceShip, 50, 50);

}

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

Figure 4-1. Load and display an image file

In practice, we would probably not put all of our drawing code directly into a function such as drawScreen(). It almost always makes more sense to create a separate function, such as placeShip(), shown here:

function drawScreen() {

placeShip(context, spaceShip, 0, 0);

placeShip(context, spaceShip, 50, 50);

}

function placeShip(ctx, obj, posX, posY, width, height) {

if (width && height) {

context.drawImage(obj, posX, posY, width, height);

} else {

context.drawImage(obj, posX, posY);

}

}

The placeShip() function accepts the context, the image object, the x and y positions, and a height and width. If a height and width are passed in, the first version of the drawScreen() function is called. If not, the second version is called. We will look at resizing images as they are drawn in the next section.

The ship1.png file we are using is a 32×32 pixel .png bitmap, which we have modified from Ari Feldman’s excellent SpriteLib. SpriteLib is a free library of pixel-based game sprites that Ari has made available for use in games and books. You can find the