Doodle, A Demo Drawing Program

[previous][next]

How does it work?

The demo shown on page one is made from a collection of JavaScript components that fall into three categories; core, graphics and canvas. Each category is represented by its own JavaScript file.

The core.js file contains useful utilities such as:

• JavaScript class inheritance. Allowing JavaScript classes to inherit members and behaviour from another class. Visit link for details.
• Browser detection. Allows different code to be executed depending on the browser being used.
• DHTML convenience functions including calculations of element positions, widths and browser scroll positions.
• JavaScript extensions such as function binding, string manipulations, etc.

The graphics.js file contains an object oriented JavaScript graphics package that I presented about 2 years ago.

The canvas.js file contains a new class called Canvas that binds the mouse input from the use with the graphics package.

The Canvas Class

The bindEvent() function is an enhancement to the JavaScript Function object that allows a member function of an object to be used as a callback function. Like everything else in JavaScript, functions are objects, complete with prototypes. Calling bindEvent() on an object method creates a new function that encapsulates the object with the method and returns the new function so that it may be used as a callback.

The three mouse handlers work together to give the user the ability to make marks on the canvas element by clicking and dragging over the canvas.

The onMouseDown() and onMouseMove() functions both calculate the mouse position using the getMousePos() method to subtract the window coordinates of the top left corner of the canvas from the mouse position.

Note that this calculation must be done in full each time in case the position of the canvas changes between mouse events.

[previous][next]

Created: June 20, 2006
Revised: August 3, 2006

URL: https://webreference.com/programming/javascript/gr/column20/1