A brief history of the canvas element, its graphics capabilities, and a call to action to understand and solve real problems with this amazing built-in tool for desktop and mobile browser.

1. Canvas Deep Dive
Dave Balmer
@Balmer

2. Canvas is one of the
shiny new toys in HTML5.

3. Actually, the canvas tag is
almost seven years old.

4. 2004

5. 2004
“Canvas? It’s some
drawing thing, right?”

6. Yes, it’s a drawing thing,
but a really good one.

7. •Draw complex shapes
• Stroke and fill with colors,
gradients and images
•Path-based masking
• Layering

8. •Text along a path
• Image filters
• Full frame animation
• Rotate, scale and skew
anything

9. 2011

10. 2011
“Canvas? It’s some
drawing thing, right?”

11. What’s the holdup?

12. Well, it did start as a
Safari-only party.

13. And programmers get it,
but don’t have many
clever uses for it.

14. It’s not designer-friendly.

15. Let’s change that.

16. Bridge the geek-gap.
Explain what it does in
English.

17. It’s like bits of
“Illustrator” & “PhotoShop”
built into your browser.

18. Canvas can solve problems
that no other tag can.

19. Graph data on the fly.
(Live Demo)

20. Generate images to save
download time.
(Live Demo)

21. Make user experiences
that break outside the box.
(Live Demo)

22. A few important things
to remember.

23. Canvas lives in the DOM
but it doesn’t have a DOM.

24. It’s a draw it and forget it
model.

25. You can do image
processing, but it’s slow.

26. Canvas is like an image tag.
You can layer them and
apply slick CSS.

27. Drawing is all path based,
which seems odd at first.

28. It’s easy to transform
images and paths.

29. Canvas has its limitations.

30. Canvas is available
today, and on any
modern browser.

31. Desktop
Chrome, Safari, FireFox,
Opera, IE*
*IE9 has support, earlier versions need some help
from modernizr.com

32. Mobile
iOS, Android, webOS,
BlackBerry, Opera, Bada

33. Canvas is the
best supported HTML5
feature out there.*

34. Q&A
@Balmer