Time for action – adding graphics to the game

We are going to draw a blackboard background to the game:

1. Download the graphics files from the code example bundle or the following URL: http://mak.la/book-assets. The graphics files include all the graphics that we need in this chapter.

2. Put the newly downloaded graphics files into a folder named images.

3. Now it is time to really load the image. There is a board.png file in the graphics file we just downloaded. It is a blackboard graphic that we will draw in the Canvas as a background. Add the following code after the code we just added in the previous step:

   untangleGame.loadImages = function() {
     // load the background image
     untangleGame.background = new Image();
   
     untangleGame.background.onerror = function() {
       console.log("Error loading the image.");
     }
     untangleGame.background.src = "images/board.png";
   };

4. Since the image loading takes time, we also need to ensure it is loaded before drawing it:

   untangleGame.drawBackground = function() ...