Canvas and You

485 views
433 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
485
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Canvas and You

    1. 1. canvas and you Y o u r f r i e n d i n t h em o d e r n b r o w s e r w o r l d
    2. 2. Shane Riley • @shaneriley • github.com/shaneriley • blog.hashrocket.com
    3. 3. What’s this Canvas thing?
    4. 4. Where’s it Supported?
    5. 5. Where’s it Supported?• IE9• Firefox 2+• Chrome 4+• Safari 3.1+• iOS 3.2+
    6. 6. Where’s it Supported?• IE9• Firefox 2+• Chrome 4+• Safari 3.1+• iOS 3.2+ http://caniuse.com/#feat=canvas
    7. 7. What’s it Good For?
    8. 8. What’s it Good For?• Manipulating images
    9. 9. What’s it Good For?• Manipulating images• Drawing surface (charts, complex shapes)
    10. 10. What’s it Good For?• Manipulating images• Drawing surface (charts, complex shapes)• Games!
    11. 11. How do I get started?Canvas cheat sheet - http://bit.ly/kyw0oz
    12. 12. The Basics
    13. 13. The Basics1. Get the canvas DOM element
    14. 14. The Basics1. Get the canvas DOM element
    15. 15. The Basics1. Get the canvas DOM element2. Create a 2D rendering context
    16. 16. The Basics1. Get the canvas DOM element2. Create a 2D rendering context
    17. 17. The Basics1. Get the canvas DOM element2. Create a 2D rendering context3. Start drawing!
    18. 18. The Basics1. Get the canvas DOM element2. Create a 2D rendering context3. Start drawing!
    19. 19. Links• Slides - http://vurl.me/USMZ• Demos - http://vurl.me/USNB

    ×