Further Explorations - HTML5 Canvas - page 916

this this . type = "factory" ;

this

this . dragging = false false ;

When a user clicks on an instance of Ornament , the mouseUp() method is called (by way of
DisplayList , but we will get to that in the next section) and we dispatch an event to sub-
scribers to say the bulb has been clicked. In this app, the only subscribers will be an instance
of the DragAndDrop class, but in theory, there could be many more.

this this . onMouseUp = function function ( mouseX , mouseY ) {

this this . dispatch ( this this . EVENT_CLICKED );

}

Instead of drawing everything in a main drawScreen() function of DragAndDrop.js , as we
havedonethroughouttherestofthisbook,ourdisplayobjects(like Ornament )willhavetheir
own draw() functions. This function draws the bulbimage at the specified x and y location at
the size of width and height .

This helps keep the draw() function in the main app class as simple as possible:

this this . draw = function function () {

this this . context . drawImage ( this this . image , this this . x , this this . y , this this . width , this this . height );

}

The last thing we do in our class is call the loadImage() function, which loads the image file
associated with the file property:

this this . loadImage = function function ( file ) {

this this . image = new new Image ();

this this . image . onload = this this . imageLoaded ;

this this . image . src = file ;

}

this this . imageLoaded = function function () {

this this . loaded = true true ;

}

this this . loadImage ( this this . file );

You can see the final code listing in Ornament.js in the code distribution.