Doodle, A Demo Drawing Program | 2
The above HTML code is all that's necessary to create the drawing canvas
Note: the initCanvas() function would normally be called from in the body.onload instead of as a callback to setTimeout but it amounts to the same thing.
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.|
|doodle.html||Simple demonstration HTML page|
In this article I introduced an drawing input component capeable of recording users mouse clicks and movements. While there is still much to do to to before we can call it a drawing package, this Canvas class will form the central visual element.
While I have endeavoured to make this code as browser compatible as possible, I have only tested it with Internet Explorer (6.0), Firefox (22.214.171.124) 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 http://www.silver-daggers.co.uk for more details. He can be reached via e-mail at firstname.lastname@example.org.
March 27, 2003
Revised: August 3, 2006