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

2. I just learned how to use <canvas>

3. You can too!

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

5. <canvas> is a new tag

6. introduced by Apple
adopted by Firefox

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

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

9. don’t forget the closing tag

10. put “fallback” content in the middle

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

12. without further ado, a canvas:

13. amazing!

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

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

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

17. hey, there’s my canvas!

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

19. transformations
transforms
rotate the whole canvas
scale
compositing
clipping

20. save() and restore() state

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

22. skifree game using <canvas>

23. cufon renders using <canvas>

24. experimental 3d using <canvas>

25. questions?

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