Circles and squares on <canvas>
nemoorange.com is no longer active. Dave's new stuff can be found at desandro.com.
He also maintains dropshado.ws, a blog for
newbie graphic designers.
This adventure picks up where the last jQuery pattern experiment ends. I saw a pattern in my head and began to produce it for the screen with jQuery. Once that vision was realized (demo here), I began questioning my methodology. While I was able to achieve the design I intended using a mix of jQuery, CSS3 rounded corners, and lots of div's, the result was just one big hack—basically a square peg for a round hole (pun shamefully intended).
At this point, I started investigating the <canvas> tag. Steven Wittens has been using and writing about the canvas tag for years. Dumby me, I glazed over his discussions and registered <canvas> as neat, but not for practical use.
In short, <canvas> is a HTML 5 tag designed for rendering content via scripting. I basically think of it as Processing for the web, whereas Processing can be used on the web, it was not specifically developed for the medium.
So as it turns out, the canvas tag is right up my alley. A valid method for dynamically creating images on the web. What's more, it outputs data URI so you can “encode” an entire image within a URI, without linking to an actual image sitting on a server. Check it out.
Of course, any discussion of a neat web feature must come with the reluctant acknowledgement that said feature is not supported by Internet Explorer. Sadly, the condition is the same for <canvas>.
I hope that 2009 will see the canvas tag proliferate. I'm excited what this means to web designers, as another tool in our arsenal to make stuff look pretty.
The Mozilla Developer Center has a great tutorial for the canvas tag.
bony crony by milouveronica
Electric Cricket by manekineko
run from me, baby by lightningmccarl
Team Spirit by joyseline