Painting Panel Example
using CSS, JavaScript and DOM

Sorry, this example requires a pointing device. It does not work correctly with touchscreens, or in browsers with no CSS support.

I used to say JavaScript isn’t powerful enough to write (for example) a drawing program. Things have changed.

This uses the DOM and JavaScript (now ECMAScript) to create and refer to HTML table cells, and CSS to set the size and color of the cells.

It works on browsers that are up-to-date with those technologies, but not on older browsers.

I have seen previous versions of this page working in Firefox and Netscape 6.1 on the Mac, Windows, and Linux, in Internet Explorer 6 and 7 on Windows, and in Internet Explorer 5 on the Mac. Also: Opera 9 on each OS, and Chrome and Konqueror on Linux.

What’s so cool about this? Well, it’s very lightweight: the whole thing is in the web page, weighing in at less than 10k. Of course, Java is a much more appropriate environment than JavaScript for an elaborate painting program.

The most serious limitation is that the time it takes to load is greatly influenced by the number of pixels in the canvas (which is a DOM table). A comfortably roomy canvas takes minutes to load on my computer. So the advantage of lightweightness is lost if the canvas is large. (Note: Firefox is the worst loser here. At size 100×100 it takes 4 seconds to load on my D420. Opera and Konqueror load it in less than half that time.)

Here is your color palette. Use it to mix red, green, and blue.
 


Here is your canvas. Pick your color, then paint with the mouse.