2

HTML 5 Summit: ���The Power of

Canvas

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

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

Basic  Canvas  Support  

5

Supported

Chrome 3.0+

Safari 3.0+

Firefox 3.0+

Opera 10.0+

IE* 9+

iOS 1.0+

Android 1.0

GeXng  Started  

6

<canvas id=”myCanvas” width=”640” height=”352”></canvas>

GeXng  Started  

7

<canvas id=”myCanvas” width=”640” height=”352”></canvas>

Fall  Back  

8

<canvas id=”myCanvas” width=”640” height=”352”>

<img src=”fall_back.jpg” width=”640” height=”352”>

</canvas>

Drawing  Shapes  Methods  

9

Rectangles fillRect(),  strokeRect(),  clearRect()

Paths beginPath(),  strokePath(),  stroke(),  fill(),  moveTo()*

Lines lineTo()

Arcs arc()

Bezier  &  Quadra)c  Curves quadra)cCurve(),  bezierCurve()

Drawing  Images  

10

Basic drawImage(image,  x,  y)

Scaling drawImage(image,  x,  y,  width,  height)

Slicing drawImage(image,  sx,  sy,  sWidth,  sHeight,  dx,  dy,  dWidth,  dHeight)

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

11

Examples  

12

Canvas  Alterna)ve  -­‐  SVG  

Reasons to Use Canvas

•  Canvas  is  faster  at  drawing  graphics  

•  Save  images  generated  by  canvas  

•  Everything  in  canvas  is  a  pixel  

Reasons to Use SVG

•  Resolu)on  independent  so  it  scales  

•  it’s  easier  to  target  other  elements  

•  It’s  good  at  anima)ons  

13

Expert  Examples  •  Canvas  Pad  •  xRez  Studio  

–  GigaPixel  –  Canvas  Zoom  

•  360  Player  •  Chrome  Experiments  –  The  Wilderness  Downtown  

14

Examples  

15

Createjs  

•  Suite  of  tools  – Easeljs  – Tweenjs  – Soundjs  – Preloadjs  

16

Examples  

17

Resources  

18

•  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