What's wrong with this sentence? shh, we're talking.


These are exciting days in the world of HTML. With HTML5, there are all sorts of new extensions to the language that will change the way web professionals can deliver information. I've played with HTML5, coded most of our recent projects with it (thanks modernizer!), but so far the transition has been pretty tentative; a few new tags, some extra background images and neater code. All great, but nothing that really gets to the warm, sticky, candy heart of HTML5.

It's my dog, I'll do it.

Flash. The tools are crummy. Want to animate? It's easy - just learn actionscript! Blah. It's not searchable. Or easily updatable. It's slow. Even Steve hates it.

For a long time it's primarily been a vehicle for audio and video delivery (by the way, thanks for overlaying those ads, they really augment the experience). HTML5's <audio> and <video> tags aim to change that. No more plugin. Easy enough (well, in theory anyway — let's pretend).

So what's that leave? Banner ads and ill-conceived intros to websites (in case you're interested, here's what not to do). HTML5 can hardly wait to make those too.

Enter <canvas>.

I know what you're thinking — "I need to learn how to do this RIGHT AWAY!" Yeah, me too. I could have just googled it or gone to one of the usual sites I haunt (smashingmagazine.com or css-tricks.com), but a few months ago I added a bookmark for html5rocks.com that looked to be just what I wanted. Some documentation and examples on the various new features. Cool. Let's go!

Rock me.

"<canvas> brings Javascript programmers full-control of the colors, vectors and pixels on their screens—the visual makeup of the monitor."

Holy carp, that sounds awesome! Fully-controlling colours (bow to the queen Google), vectors and pixels on the screen. Vectors are the holy grail of the internet; Flash tried but Adobe is finally ready to wipe its nose, pick up the shotgun and do what we all know is for the best. And now all you designers…

Er. What? Javascript programmers? Give Javascript programmers full control?

Oh. Well. That's good. We all know how desperately javascript programmers have been clamouring to be able to actually manipulate the user experience. It's not like they've had the tools to do that before. Let's remove the designer from the design equation and put it where it belongs — into the hands of the programmer. Now they can make more of those amazingly well thought-out user interfaces, like this:

Who needs to read all that? And I love what you've done with the anti-aliasing.

What we really need is a way to empower these underprivileged groups, finally give them a voice. Christ in a bucket.

I know there's no such thing as a pure web designer anymore. They need to code CSS, HTML and probably even PHP. Ok. They should know about jQuery and javascript and keep up with the latest in WordPress and Drupal or [insert favourite technology here]. Sure. But is that really the best use of their time? Shouldn't designers — even web designers — you know, mostly design? Are they going to make really good programmers? Of course not. No more than javascript programmers should be expected to make design decisions.

Take a deep breath.

Ok, let's regroup. Sure, I can work with javascript, but how is this even a remotely good approach? I remember doing this in Logo with a little turtle back in the early 80's. Thirty years later this is still the best we can do? There must be an application that can help me with this, right? Something like, I dunno, Flash?

Nope.

Adobe (surprise, surprise) has mentioned they will be creating authoring tools, but can they really be trusted not to make them into a Flash reboot? As of today, it's still a moot point. There are no authoring tools. They don't exist. There are javascript libraries that let you do some cool things, but, call me crazy, throwing javascript libraries at the javascript barrier doesn't seem like a particularly helpful approach.

So there's nothing.

Well, not quite. If you don't mind working in Illustrator, there's a nifty little plugin called ai2canvas. You add your elements to the page, and it will export the HTML and javascript for you. Of course, Illustrator can't animate things, so how does that work? Javascript. *sigh*

It's not as bad as it sounds, though. Your layers contain the element and the layer names contain the variables. The canvas is, well, your document canvas. And the nice thing is that any vector graphics you make get their paths worked out for you. A nice first step.

This won't hurt a bit.

Here you go, look upon my works ye mighty and despair!

A nice picture of some ducks and an elm tree.