Power of canvas

Power of 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   canvasid=”myCanvas” width=”640” height=”352”/canvas 6
• 7.
  GeXng  Started   canvasid=”myCanvas” width=”640” height=”352”/canvas 7
• 8.
  Fall  Back   canvasid=”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