Doodle, A Demo Drawing Program | 2

[previous]

HTML

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.

The argument to the Canvas constructor $('theCanvas') is just a reference to the canvas <div> element. the JavaScript file core.js defines a function named '$' that calls document.getElementById on its argument and returns the result. The $('id') form is much more compact.

Download The Code

Conclusion

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.

Component based software development is a powerful tool that's aided the development of desktop applications everywhere. While JavaScript development is still in its infancy, there's no reason why it can't benefit from these techniques. The Canvas class in this article is a case in point; by making use of the graphics component it required a minimal amount of code to fulfil its purpose.

Disclaimer

While I have endeavoured to make this code as browser compatible as possible, I have only tested it with Internet Explorer (6.0), Firefox (1.5.0.4) 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 https://www.silver-daggers.co.uk for more details. He can be reached via e-mail at [email protected].

[previous]

Created: March 27, 2003
Revised: August 3, 2006

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