Images on the Canvas - HTML5 Canvas - page 221

Preloading Images

Beforeanimagecanbecalledincode,wemustensurethatithasproperlyloadedandisready
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' , eventSheetLoaded , false false );

When the image is fully loaded, the eventSheetLoaded() function will fire off. Inside this
function, we will then call drawScreen() , as we have in the previous chapters:

function function eventSheetLoaded () {

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 re-
sources.