HTML5 Canvas, 2nd Edition

Application Design

To create our framework, we will be creating objects and resource files that will help us design our application. Here is a brief run-down of what we will be creating:

EventDispatcher.js

The base class for objects that need to broadcast events to other objects

Ornament.js

A class that represents the draggable objects in the application

DisplayList.js

A class that represents the “retained mode” that we will simulate for our application

GameUtilities.js

A recourse file filled with nifty functions that we can reuse

DragAndDrop.js

The main application class

DragAndDrop.html

The HTML file that pulls all of our code together

You can find these files in the Chapter 11 /draganddrop folder in the code distribution.

EventDispatcher.js

The first thing we need to do is to create a way for our JavaScript object to subscribe to and dispatch events. Standard DOM objects can have event listeners to listen for events—for example:

theCanvas.addEventListener("mouseup",onMouseUp, false);

However, Canvas images and drawing paths cannot create events because they are not kept in a retained mode. Our task is to create an event dispatcher object in JavaScript that we can use as the base class for other objects. We will use the EventDispatcher object as the base class for our Ornament class, so when an ornament is clicked, we can dispatch an event and the subscriber to that event can take some action.

EventDispatcher.js needs the following three methods:

addEventListener()

Allows us to add a listener (subscriber) ...