Canvas Deep Dive
Download as KEY, PDF1 like931 views
The document discusses the HTML5 canvas element, emphasizing its capabilities for drawing complex shapes, image processing, and full-frame animation in web browsers. It highlights the need for better understanding and application among designers and programmers, addressing the element's limitations and compatibility across various modern browsers. The document encourages innovative uses of canvas for enhancing user experiences and bridging the gap between technical and design perspectives.
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