Download - Power of canvas
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