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

1. <canvas>
Dave Ross
Suburban Chicago PHP
& Web Development Meetup
January 7, 2010

2. https://developer.mozilla.org/en/Canvas_tutorial

3. <canvas> is a new tag

4. introduced by Apple
adopted by Firefox

5. supported by others
(there’s Javascript for this guy)

6. <canvas id=”mycanvas”
width=”320” height=”200”>
</canvas>

7. don’t forget the closing tag

8. put “fallback” content in the middle

9. <canvas>browser too old!</canvas>

10. without further ado, a canvas:

11. amazing!

12. <canvas> is a canvas you draw on
using Javascript

13. var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');

14. ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (0, 0, 320, 200);

15. hey, there’s my canvas!

16. primatives
rectangles
paths
arcs
curves (bezier and quadratic)
images (from an <img> tag)
fills (solid, gradient, patterns of images)
shadows

17. transformations
coordinate transformations
rotate the whole canvas
scale
composite
clipping path

18. save() and restore() state

19. animation
clear the canvas
save the canvas state
draw shapes
restore the canvas state
repeat

20. skifree game using <canvas>

21. cufon renders using <canvas>

22. implementation of Processing
graphics language using canvas

23. 3d using <canvas>
in development

24. questions?

25. dave ross
php developer
wordpress plugin
creator
meetup organizer
cat shelter volunteer
davidmichaelross.com