Doodle, A Demo Drawing Program - Part 3 | 3 | WebReference

Doodle, A Demo Drawing Program - Part 3 | 3

To page 1To page 2current page

Doodle, A Demo Drawing Program - Part 3

The Graphics Package

The graphics package first introduced in OO JavaScript Graphics and now used by Doodle to display widgets needs some enhancements. In particular, the Doodle widgets need some way to be notified when users click on them.

In the graphics package, a shape is a collection of plot elements. Each plot element is represented in the browser as a <div> element. The Graphics.Shape base class now provides the generic code that controls the maintenance of these elements.

The plots array stores these <div> elements for each shape. Since this array stores all the <div> elements used to display the graphics shape, it's easy to attach event handlers to the entire shape by iterating through all of the elements...

Other attributes like cursor style can be set in the same way.

The canvas widgets use these functions in their setTrigger() methods; setMouseDown() is used to trigger the object deletion and setStyle() is used to change the cursor style to a pointer to give the user a visual cue that something will happen if they click on the widget.

The graphics line now inherits from the shape class.

Download The Code

Right click the links below and select "Save Target As" to download copies of the demo code.
core.js Core utilities and functions.
graphics.js Object Oriented JavaScript graphics package
doodle_canvas.js Canvas class
doodle_doc.js Document class
doodle.js Doodle application class
doodle.html Simple demonstration HTML page


In this article, we've put the Doodle application through a minor refactoring exercise with a number of different parts to the code changing shape:

The refactoring exercise in this article hasn't had much effect on the user's on-screen experience. In fact, the only difference is that lines may now be removed once drawn. The changes behind the scenes are significant; as the application becomes more complex, a solid code structure will prevent the complexity from escalating to unmanageable levels.

The refactoring process might seem unnecessary considering its lack of effect on the user experience, but without it, an application may flounder before it gets anywhere. The trick to maintainable development is to recognise the need for refactoring early and do it before the code becomes too coupled.


While I've endeavoured to make this code as browser compatible as possible, I've only tested it with Internet Explorer (6.0), Firefox (1.5) and Netscape (7.1) as this represents of a large proportion of users.

About the Author

Guyon Roche is a freelance web developer in London, Great Britain. He specializes in Windows platforms with an interest in bridging the gaps between different technologies, visit for more details.

To page 1To page 2current page

Created: October 13, 2006
Revised: November 29, 2006