The document discusses the HTML 5 canvas element and its capabilities for 2D drawing directly onto the page. It provides an overview of canvas support across browsers, demonstrates basic drawing methods for shapes, images and text, and discusses alternatives like SVG. It also recommends several expert examples and resources for learning more about HTML 5 canvas.

2. HTML 5 Summit:
The Power of
Canvas
2

3. Chris
Mar)nez
• Web
Developer
with
St.
Edward’s
University
• Co-­‐Manager
of
the
Aus)n
Flash
PlaCorm
Adobe
Usergroup
• Instructor
in
Communica)on
3

4. Canvas
Overview
• 2D
drawing
area
• Plugin
free
-­‐
only
HTML,
JavaScript,
and
CSS
• First
introduced
by
Apple
in
OSX
for
Dashboard
• Every
canvas
has
a
drawing
context
4

5. Basic
Canvas
Support
Supported
Chrome
3.0+
Safari
3.0+
Firefox
3.0+
Opera
10.0+
IE*
9+
iOS
1.0+
Android
1.0
5

6. GeXng
Started
canvas id=”myCanvas” width=”640” height=”352”/canvas
6

7. GeXng
Started
canvas id=”myCanvas” width=”640” height=”352”/canvas
7

8. Fall
Back
canvas id=”myCanvas” width=”640” height=”352”
img src=”fall_back.jpg” width=”640” height=”352”
/canvas
8

9. Drawing
Shapes
Methods
Rectangles
fillRect(),
strokeRect(),
clearRect()
beginPath(),
strokePath(),
stroke(),
fill(),
Paths
moveTo()*
Lines
lineTo()
Arcs
arc()
Bezier
Quadra)c
Curves
quadra)cCurve(),
bezierCurve()
9

10. Drawing
Images
Basic
drawImage(image,
x,
y)
Scaling
drawImage(image,
x,
y,
width,
height)
drawImage(image,
sx,
sy,
sWidth,
Slicing
sHeight,
dx,
dy,
dWidth,
dHeight)
10

11. Drawing
Text
• fillText()
• measureText()
• strokeText()
11

12. Examples
12

13. Canvas
Alterna)ve
-­‐
SVG
Reasons to Use Canvas
Reasons to Use SVG
• Canvas
is
faster
at
drawing
• Resolu)on
independent
so
graphics
it
scales
• Save
images
generated
by
• it’s
easier
to
target
other
canvas
elements
• Everything
in
canvas
is
a
• It’s
good
at
anima)ons
pixel
13

14. Expert
Examples
• Canvas
Pad
• xRez
Studio
– GigaPixel
– Canvas
Zoom
• 360
Player
• Chrome
Experiments
–
The
Wilderness
Downtown
14

15. Examples
15

16. Createjs
• Suite
of
tools
– Easeljs
– Tweenjs
– Soundjs
– Preloadjs
16

17. Examples
17

18. Resources
• A Developers Guide to Canvas -
http://www.sitepoint.com/a-developer’s-guide-to-html5-canvas/
• Canvas Tutorial - https://developer.mozilla.org/en/Canvas_tutorial
• Dive Into HTML5 - http://diveintohtml5.org/canvas.html
• Modernizr - http://www.modernizr.com/
• HTML5 Canvas by Steve and Jeff Fulton on O’Reilly Press available on Amazon
• Sound Manager - http://www.schillmania.com/projects/soundmanager2/
• Createjs - http://www.createjs.com
18