For my second Design Challenge tutorial session, I did a presentation on how to make interactive prototypes with Canvas. After all, not every prototype needs to be done as a Firefox extension. Canvas prototypes are far quicker and easier to make, and although more limited, are also more flexible in some ways.

What’s Canvas? Canvas is an HTML tag, part of the HTML 5 standard:

<canvas></canvas>

By itself, it does nothing. But Javascript running in the page can treat the Canvas element as a freeform drawing area, and dynamically fill it with whatever combination of graphics and text you want. Things that would previously require a plugin like Flash, such as freeform animation and interactivity (although not sound), can be done easily in Canvas.

The advantage is that you can draw to the Canvas using Javascript, a language you probably already know if you’re a web developer, instead of learning a new domain-specific plugin language. Users of your page can interact with it without needing to have any plugins installed, and since it’s all part of the page they can see the source code simply by choosing “View Source”. (Though the last can be either an advantage or a drawback, depending on whether you intend to be open-source or not…)

Here are some examples of cool things you can do with Canvas:

One major drawback is that although Canvas works in Firefox, Opera, Safari, and Chrome, it is not yet supported by Internet Explorer. However, there are workarounds for this, such as Explorer Canvas.

Here are the presentation links:

The presentation is aimed at total beginners, so you should be able to get something out of it even if you barely know any Javascript yet.