1. canvas and you
Y o u r f r i e n d i n t h e
m o d e r n b r o w s e r w o r l d

2. Shane Riley
• @shaneriley
• github.com/shaneriley
• blog.hashrocket.com

3. What’s this Canvas thing?

4. Where’s it Supported?

5. Where’s it Supported?
• IE9
• Firefox 2+
• Chrome 4+
• Safari 3.1+
• iOS 3.2+

6. Where’s it Supported?
• IE9
• Firefox 2+
• Chrome 4+
• Safari 3.1+
• iOS 3.2+
http://caniuse.com/#feat=canvas

7. What’s it Good For?

8. What’s it Good For?
• Manipulating images

9. What’s it Good For?
• Manipulating images
• Drawing surface (charts, complex shapes)

10. What’s it Good For?
• Manipulating images
• Drawing surface (charts, complex shapes)
• Games!

11. How do I get
started?
Canvas cheat sheet - http://bit.ly/kyw0oz

13. The Basics

14. The Basics
1. Get the canvas DOM element

15. The Basics
1. Get the canvas DOM element

16. The Basics
1. Get the canvas DOM element
2. Create a 2D rendering context

17. The Basics
1. Get the canvas DOM element
2. Create a 2D rendering context

18. The Basics
1. Get the canvas DOM element
2. Create a 2D rendering context
3. Start drawing!

19. The Basics
1. Get the canvas DOM element
2. Create a 2D rendering context
3. Start drawing!

20. Links
• Slides - http://vurl.me/USMZ
• Demos - http://vurl.me/USNB