Canvas Deep Dive     Dave Balmer      @Balmer
Canvas is one of theshiny new toys in HTML5.
Actually, the canvas tag is almost seven years old.
2004
2004 “Canvas? It’s somedrawing thing, right?”
Yes, it’s a drawing thing, but a really good one.
•Draw complex shapes• Stroke and fill with colors, gradients and images•Path-based masking• Layering
•Text along a path• Image filters• Full frame animation• Rotate, scale and skew anything
2011
2011 “Canvas? It’s somedrawing thing, right?”
What’s the holdup?
Well, it did start as a Safari-only party.
And programmers get it, but don’t have many   clever uses for it.
It’s not designer-friendly.
Let’s change that.
Bridge the geek-gap.Explain what it does in       English.
It’s like bits of“Illustrator” & “PhotoShop”   built into your browser.
Canvas can solve problems  that no other tag can.
Graph data on the fly.       (Live Demo)
Generate images to save    download time.        (Live Demo)
Make user experiencesthat break outside the box.          (Live Demo)
A few important things    to remember.
Canvas lives in the DOMbut it doesn’t have a DOM.
It’s a draw it and forget it          model.
You can do imageprocessing, but it’s slow.
Canvas is like an image tag.  You can layer them and     apply slick CSS.
Drawing is all path based,which seems odd at first.
It’s easy to transform  images and paths.
Canvas has its limitations.
Canvas is availabletoday, and on any modern browser.
Desktop Chrome, Safari, FireFox,      Opera, IE**IE9 has support, earlier versions need some help            from moderniz...
Mobile iOS, Android, webOS,BlackBerry, Opera, Bada
Canvas is thebest supported HTML5  feature out there.*
Q&A@Balmer
Upcoming SlideShare
Loading in …5
×

Canvas Deep Dive

4,336 views

Published on

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.

  • Be the first to comment

Canvas Deep Dive

  1. 1. Canvas Deep Dive Dave Balmer @Balmer
  2. 2. Canvas is one of theshiny new toys in HTML5.
  3. 3. Actually, the canvas tag is almost seven years old.
  4. 4. 2004
  5. 5. 2004 “Canvas? It’s somedrawing thing, right?”
  6. 6. Yes, it’s a drawing thing, but a really good one.
  7. 7. •Draw complex shapes• Stroke and fill with colors, gradients and images•Path-based masking• Layering
  8. 8. •Text along a path• Image filters• Full frame animation• Rotate, scale and skew anything
  9. 9. 2011
  10. 10. 2011 “Canvas? It’s somedrawing thing, right?”
  11. 11. What’s the holdup?
  12. 12. Well, it did start as a Safari-only party.
  13. 13. And programmers get it, but don’t have many clever uses for it.
  14. 14. It’s not designer-friendly.
  15. 15. Let’s change that.
  16. 16. Bridge the geek-gap.Explain what it does in English.
  17. 17. It’s like bits of“Illustrator” & “PhotoShop” built into your browser.
  18. 18. Canvas can solve problems that no other tag can.
  19. 19. Graph data on the fly. (Live Demo)
  20. 20. Generate images to save download time. (Live Demo)
  21. 21. Make user experiencesthat break outside the box. (Live Demo)
  22. 22. A few important things to remember.
  23. 23. Canvas lives in the DOMbut it doesn’t have a DOM.
  24. 24. It’s a draw it and forget it model.
  25. 25. You can do imageprocessing, but it’s slow.
  26. 26. Canvas is like an image tag. You can layer them and apply slick CSS.
  27. 27. Drawing is all path based,which seems odd at first.
  28. 28. It’s easy to transform images and paths.
  29. 29. Canvas has its limitations.
  30. 30. Canvas is availabletoday, and on any modern browser.
  31. 31. Desktop Chrome, Safari, FireFox, Opera, IE**IE9 has support, earlier versions need some help from modernizr.com
  32. 32. Mobile iOS, Android, webOS,BlackBerry, Opera, Bada
  33. 33. Canvas is thebest supported HTML5 feature out there.*
  34. 34. Q&A@Balmer

×