Making Prototypes with Canvas (Mozilla Labs Design Challenge: Spring 09) on Vimeo

See all Show me

13. Weave iPhone Data Viewer

by Mozilla Labs

5 days ago

12. Mozilla l10n - Signoffs

by Mozilla Labs

7 days ago

11. Design Challenge Winter '09: The Home Tab

by Mozilla Labs

27 days ago

10. Prototyping with jQuery (Mozilla Labs Design Chall…

by Mozilla Labs

10 months ago

9. Ship It [or: Coffee is for Closers] (Mozilla Labs …

by Mozilla Labs

10 months ago

8. Design or Die - Innovation, UCD, Web and Life (Moz…

by Mozilla Labs

10 months ago

7. Interaction Seduction (Mozilla Labs Design Challen…

by Mozilla Labs

10 months ago

6. Engineering Prototypes (Mozilla Labs Design Challe…

by Mozilla Labs

10 months ago

5. Making Prototypes with Canvas (Mozilla Labs Design…

by Mozilla Labs

10 months ago

4. Designing for Mobile (Mozilla Labs Design Challeng…

by Mozilla Labs

11 months ago

3. Open Source Design, Mozilla and You (Mozilla Labs …

by Mozilla Labs

11 months ago

2. Stupid/Awesome Extension Development Hacks (Mozill…

by Mozilla Labs

11 months ago

1. Extension Bootcamp (Mozilla Labs Design Challenge:…

by Mozilla Labs

11 months ago

Extensions are not the only way to do prototypes. Some ideas are more easily implemented as web content. Canvas lets your javascript code treat part of the page like a blank piece of paper and scribble all over it with drawing primitives, doing things right in the web page that could previously only be done in plugins like Flash. Canvas can be a very quick way to prototype new and innovative user interfaces; this session will teach you how.

Tutorial Files:
design-challenge.mozilla.com/spring09/files/prototypes_with_canvas.zip

More videos from the Mozilla Labs Design Challenge - Spring 09:
vimeo.com/channels/designchallenge