Images on the Canvas - HTML5 Canvas - page 291

The Colliding Objects

We are going to use two PNG image files as the design for our objects. They will both be
48-pixel by 48-pixel images. The first will be a blue plus sign, and the second will be a red
circle witharound“bite” takenoutofit. Figure 4-19 showsthedrawingobjects forourpixel-
level collision detection.

Figure 4-19. The drawing objects for our pixel-level collision detection

We will create two objects to hold the data for these images:

var var blueObject = {};

var var redObject = {};

blueObject . x = 0 ;
blueObject . y = 200 ;
blueObject . dx = 2 ;
blueObject . width = 48 ;
blueObject . height = 48 ;
blueObject . image = new new Image ();

blueObject . image . src = "blueplus.png" ;

redObject . x = 348 ;
redObject . y = 200 ;
redObject . dx =- 2 ;
redObject . width = 48 ;
redObject . height = 48 ;
redObject . image = new new Image ();

redObject . image . src = "redcircle.png" ;