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:
Here are some examples of cool things you can do with Canvas:
- Bespin is entirely done in Canvas.
- I did these Pie Menu prototypes in Canvas.
- This tutorial shows you how to make a Breakout game in 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 video of me giving the presentation, on Vimeo. (Thanks, Pascal, for editing it.)
- A ZIP file containing the source files for the presentation.
- The text of the presentation, in web-page form.
- The Developer.mozilla.org Canvas tutorial, to which I owe pretty much all my own knowledge of the subject.