running words around
design education and visual communication
authored by chris m hughes

Sketchpad - HTML5 in Action

Monday, 15 February 2010

Web Designers, many of them aghast at the possible demise of Flash, are now buzzing at the appearance of 'Sketchpad' - a painting tool that provides smooth animated interaction yet doesn't require Flash, Shockwave, or any other plug-in, just a modern browser like Chrome, Mozilla or Safari.

Sketchpad screenshot

Sketchpad showcases the capabilities of modern JavaScript and HTML5. You can paint any colour in any shade and opacity, draw patterns, primitive shapes and spirographs, and add basic type.

Sketchpad also features a great menu system that offers a series of control palettes which you can move around and keep open. They feature slide adjusters and a variety of options to adjust speed, weight, stroke, resolution other parameters at will.

When you're done with your efforts, hit the save icon and your image pops up in a new tab, ready to be saved as a .png.

It's hardly going to compete with the established drawing tools, but Sketchpad is free to use, works on any browser that supports HTML5, and gives us a minor glimpse of where the web is heading - towards fully developed webApps that don't require a traditional install.

But how does it actually work? The secret lies in the new HTML5 tag called 'canvas'.

The canvas element consists of a drawable region defined in HTML code with height and width attributes. JavaScript's drawing functions then allow for dynamically generated graphics. Some of the anticipated uses of the canvas, including building graphs, animations, games, and image composition, can be seen in Sketchpad.

Its early days, but overall, this example is a real affirmation that HTML5 can deliver interactive content without any plugin requirements. It also strengthens Apple's case for omitting Flash from their new iPad. I wonder what Adobe make of it...