Reminiscing.
This is a post about the new HTML5 canvas element. If you could indulge me while I reminisce when I was a student completing a Diploma in Digital Media for a moment. Our first ever Actionscript based project was to create an interactive application that an artist of the past, who did not live in the digital age, would have made if they did live in these times and had Flash as a tool. I choose Len Lye, an experimental New Zealand artist that is famous for his kinetic sculptures and experimental film techniques.
I remember the joy, writing AS2 using Flash 7, of being able to freely create and experiment with code and interaction without any concern for technical detail or expectation other than it worked, ran at an OK frame rate and looked cool.
Those carefree days quickly disappeared as I left the comfort of my Diploma and entered the real world. Since then it’s been a non-stop learning curve keeping up with technology, expectations and tight deadlines.
If you would like to cut to the chase and have a play with my canvas experement click on the image below, or click on the keep reading link.
Recently
Which brings us to today, when one of the most exciting developments on the web of late in my opinion, has been the evolution of JavaScript from a tool for form validation to a fully blown interactive scripting language for the web. This is helped in no small part by the continuing evolution of great JavaScript libraries like jQuery, MooTools, Prototype and many more and the amazing speed at which modern browsers execute JavaScript enabling fully blown interactive web apps built with not a line of Actionscript in sight.
Even more exciting is the speed at which modern browsers open source browsers are integrating HTML5 specifications bringing us many exciting tools. Like application cache that give the ability to run web apps when not connected to the web. Web workers that enable coders to separate out heavy lifting code to a separate thread on the user’s computer so as not to interfere with the user experience. Geolocation that, with the users permission, use a devices GPS to let the web app know where a user is and many more exciting propositions.
Satisfaction
However the new HTML5 feature that I’ve been paying with most is the new canvas element that enables you to draw in the browser with code, literally like a canvas. Much like Actionscript’s drawing API lets you draw to the stage.
Why I love this feature and playing with its possibilities so much is that it reminds me of those days I described above when I first discovered the creative potential of Actionscript and Flash. Obviously canvas doesn’t have anywhere near the feature set that AS3 does today, but this in itself is the attraction to me. Limited but useful features breeds creativity as developers push what’s possible to produce some pretty neat eye candy. It’s that feeling of playing with something new, where there are no conventions, expectations or standards just yet. Take a look at chromeexperements to see some great examples of what people have come up with using canvas & svg.
Obviously the canvas elements role on the web will evolve from something new to play with to something very useful. For example, nice font replacement with tools such as cufon. However its widespread adoption may be held up by Microsoft’s reluctance to implement in Internet Explorer, no doubt to protect the future of their multimedia plugin Silverlight. Microsoft’s VML in IE browsers can be hacked to offer similar features to canvas and projects like explorercanvas http://code.google.com/p/explorercanvas/ should help to exploit this.
My Experiment.
Anyhow, my experiment with canvas didn’t start out as an idea or concept, rather it evolved from playing around and seeing where it ended up. It’s nothing revolutionary or amazing, but was fun to build and play with and demonstrates just some of the potential of the canvas element.
You can upload an image, or choose an existing one. This source image is used to determine the colours that are painted on the canvas element as you draw. Or you can let the application paint for you by pushing the start button. Have a play with the parameters and then you can save the canvas you’ve created to your computer using the toDataURL method. Click here to launch the application. View source if you want to check out what’s going on.
Beautiful!