Canvas Deep Dive
•Download as KEY, PDF•
1 like•931 views
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.
Recommended
Recommended
More Related Content
Similar to Canvas Deep Dive
Similar to Canvas Deep Dive (20)
Recently uploaded
Recently uploaded (20)
Canvas Deep Dive
- 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?”
- 12. Well, it did start as a Safari-only party.
- 13. And programmers get it, but don’t have many clever uses for it.
- 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
Editor's Notes
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n