Doodle, A Demo Drawing Program
How does it work?
The core.js file contains useful utilities such as:
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.
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 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.
June 20, 2006
Revised: August 3, 2006