<canvas>
       Dave Ross
  Suburban Chicago PHP
& Web Development Meetup
    January 7, 2010
https://developer.mozilla.org/en/Canvas_tutorial
<canvas> is a new tag
introduced by Apple


adopted by Firefox
supported by others


(there’s Javascript for this guy)
<canvas id=”mycanvas”
width=”320” height=”200”>
        </canvas>
don’t forget the closing tag
put “fallback” content in the middle
<canvas>browser too old!</canvas>
without further ado, a canvas:
amazing!
<canvas> is a canvas you draw on
       using Javascript
var canvas = document.getElementById('mycanvas');
          var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgb(200,0,0)";
 ctx.fillRect (0, 0, 320, 200);
hey, there’s my canvas!
primatives
rectangles

paths

arcs

curves (bezier and quadratic)

images (from an <img> tag)

fills (solid, gradient, patt...
transformations

coordinate transformations

rotate the whole canvas

scale

composite

clipping path
save() and restore() state
animation

clear the canvas

save the canvas state

draw shapes

restore the canvas state

repeat
skifree game using <canvas>
cufon renders using <canvas>
implementation of Processing
graphics language using canvas
3d using <canvas>
 in development
questions?
dave ross

php developer

wordpress plugin
creator

meetup organizer

cat shelter volunteer

davidmichaelross.com
Upcoming SlideShare
Loading in …5
×

The Canvas Tag

3,732 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,732
On SlideShare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
37
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

    ×