The canvas tag

1,364 views
1,275 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,364
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • The canvas tag

    1. 1. <canvas> Dave Ross Suburban Chicago PHP & Web Development Meetup January 7, 2010
    2. 2. I just learned how to use <canvas>
    3. 3. You can too!
    4. 4. https://developer.mozilla.org/en/Canvas_tutorial
    5. 5. <canvas> is a new tag
    6. 6. introduced by Apple adopted by Firefox
    7. 7. supported by others (there’s Javascript for this guy)
    8. 8. <canvas id=”mycanvas” width=”320” height=”200”> </canvas>
    9. 9. don’t forget the closing tag
    10. 10. put “fallback” content in the middle
    11. 11. <canvas>browser too old!</canvas>
    12. 12. without further ado, a canvas:
    13. 13. amazing!
    14. 14. <canvas> is a canvas you draw on using Javascript
    15. 15. var canvas = document.getElementById('mycanvas'); var ctx = canvas.getContext('2d');
    16. 16. ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (0, 0, 320, 200);
    17. 17. hey, there’s my canvas!
    18. 18. primatives rectangles paths arcs curves (bezier and quadratic) images (from an <img> tag) fills (solid, gradient, patterns of images) shadows
    19. 19. transformations transforms rotate the whole canvas scale compositing clipping
    20. 20. save() and restore() state
    21. 21. animation clear the canvas save the canvas state draw shapes restore the canvas state repeat
    22. 22. skifree game using <canvas>
    23. 23. cufon renders using <canvas>
    24. 24. experimental 3d using <canvas>
    25. 25. questions?
    26. 26. dave ross php developer wordpress plugin creator meetup organizer cat shelter volunteer davidmichaelross.com

    ×