The Canvas Tag

3,491 views
3,360 views

Published on

Presentation on the canvas tag for the January, 2010 meeting of the Suburban Chicago PHP & Web Development Meetup (suburbanchicagophp.org)

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

No Downloads
Views
Total views
3,491
On SlideShare
0
From Embeds
0
Number of Embeds
30
Actions
Shares
0
Downloads
36
Comments
0
Likes
4
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. https://developer.mozilla.org/en/Canvas_tutorial
    3. 3. <canvas> is a new tag
    4. 4. introduced by Apple adopted by Firefox
    5. 5. supported by others (there’s Javascript for this guy)
    6. 6. <canvas id=”mycanvas” width=”320” height=”200”> </canvas>
    7. 7. don’t forget the closing tag
    8. 8. put “fallback” content in the middle
    9. 9. <canvas>browser too old!</canvas>
    10. 10. without further ado, a canvas:
    11. 11. amazing!
    12. 12. <canvas> is a canvas you draw on using Javascript
    13. 13. var canvas = document.getElementById('mycanvas'); var ctx = canvas.getContext('2d');
    14. 14. ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (0, 0, 320, 200);
    15. 15. hey, there’s my canvas!
    16. 16. primatives rectangles paths arcs curves (bezier and quadratic) images (from an <img> tag) fills (solid, gradient, patterns of images) shadows
    17. 17. transformations coordinate transformations rotate the whole canvas scale composite clipping path
    18. 18. save() and restore() state
    19. 19. animation clear the canvas save the canvas state draw shapes restore the canvas state repeat
    20. 20. skifree game using <canvas>
    21. 21. cufon renders using <canvas>
    22. 22. implementation of Processing graphics language using canvas
    23. 23. 3d using <canvas> in development
    24. 24. questions?
    25. 25. dave ross php developer wordpress plugin creator meetup organizer cat shelter volunteer davidmichaelross.com

    ×