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:


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


A class that represents the draggable objects in the application


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


A recourse file filled with nifty functions that we can reuse


The main application class


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.


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:


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

Get HTML5 Canvas, 2nd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.