HTML 5 Summit:   The Power of        Canvas	                     2
Chris	  Mar)nez	  •  Web	  Developer	  with	  St.	  Edward’s	  University	  •  Co-­‐Manager	  of	  the	  Aus)n	  Flash	  P...
Canvas	  Overview	  •    2D	  drawing	  area	  •    Plugin	  free	  -­‐	  only	  HTML,	  JavaScript,	  and	  CSS	  •    Fi...
Basic	  Canvas	  Support	                           Supported	Chrome	                   3.0+	 Safari	                  3.0...
GeXng	  Started	  canvas id=”myCanvas” width=”640” height=”352”/canvas	                                                   ...
GeXng	  Started	  canvas id=”myCanvas” width=”640” height=”352”/canvas	                                                   ...
Fall	  Back	  canvas id=”myCanvas” width=”640” height=”352”	                          	img src=”fall_back.jpg” width=”640”...
Drawing	  Shapes	  Methods	            Rectangles	                fillRect(),	  strokeRect(),	  clearRect()	               ...
Drawing	  Images	   Basic	           drawImage(image,	  x,	  y)	Scaling	          drawImage(image,	  x,	  y,	  width,	  he...
Drawing	  Text	  •  fillText()	  •  measureText()	  •  strokeText()	                                               11
Examples	                 12
Canvas	  Alterna)ve	  -­‐	  SVG	  Reasons to Use Canvas	                         Reasons to Use SVG	•  Canvas	  is	  faste...
Expert	  Examples	  •  Canvas	  Pad	  •  xRez	  Studio	        –  GigaPixel	        –  Canvas	  Zoom	  •  360	  Player	  •...
Examples	                 15
Createjs	  •  Suite	  of	  tools	      –  Easeljs	      –  Tweenjs	      –  Soundjs	      –  Preloadjs	                   ...
Examples	                 17
Resources	  •    A Developers Guide to Canvas -     http://www.sitepoint.com/a-developer’s-guide-to-html5-canvas/	•    Can...
Power of canvas
Upcoming SlideShare
Loading in …5
×

Power of canvas

386 views

Published on

Presentation delivered at HTML5 Summit in Oct. 2012 in Austin, TX.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
386
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
26
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Power of canvas

  1. 1. HTML 5 Summit: The Power of Canvas 2
  2. 2. 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
  3. 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
  4. 4. 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
  5. 5. GeXng  Started  canvas id=”myCanvas” width=”640” height=”352”/canvas 6
  6. 6. GeXng  Started  canvas id=”myCanvas” width=”640” height=”352”/canvas 7
  7. 7. Fall  Back  canvas id=”myCanvas” width=”640” height=”352” img src=”fall_back.jpg” width=”640” height=”352” /canvas 8
  8. 8. 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
  9. 9. 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
  10. 10. Drawing  Text  •  fillText()  •  measureText()  •  strokeText()   11
  11. 11. Examples   12
  12. 12. 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
  13. 13. Expert  Examples  •  Canvas  Pad  •  xRez  Studio   –  GigaPixel   –  Canvas  Zoom  •  360  Player  •  Chrome  Experiments  –  The  Wilderness  Downtown   14
  14. 14. Examples   15
  15. 15. Createjs  •  Suite  of  tools   –  Easeljs   –  Tweenjs   –  Soundjs   –  Preloadjs   16
  16. 16. Examples   17
  17. 17. 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

×