Canvas Deep Dive
Download as KEY, PDF
1 like931 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.
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? Its some drawing thing, right?
- 6. Yes, its 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? Its some drawing thing, right?
- 12. Well, it did start as a Safari-only party.
- 13. And programmers get it, but dont have many clever uses for it.
- 16. Bridge the geek-gap. Explain what it does in English.
- 17. Its 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 doesnt have a DOM.
- 24. Its a draw it and forget it model.
- 25. You can do image processing, but its 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. Its 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