Download - HTML5 – The Power of
![Page 1: HTML5 – The Power of](https://reader036.vdocuments.mx/reader036/viewer/2022062604/568163b2550346895dd4c9ba/html5/thumbnails/1.jpg)
![Page 2: HTML5 – The Power of](https://reader036.vdocuments.mx/reader036/viewer/2022062604/568163b2550346895dd4c9ba/html5/thumbnails/2.jpg)
HTML5 – The Power of <canvas>
Thomas LewisHTML5 Principal Technical Evangelist
Microsoft Corporation@tommylee | asimplepixel.tumblr.com
![Page 3: HTML5 – The Power of](https://reader036.vdocuments.mx/reader036/viewer/2022062604/568163b2550346895dd4c9ba/html5/thumbnails/3.jpg)
![Page 4: HTML5 – The Power of](https://reader036.vdocuments.mx/reader036/viewer/2022062604/568163b2550346895dd4c9ba/html5/thumbnails/4.jpg)
Demos
![Page 5: HTML5 – The Power of](https://reader036.vdocuments.mx/reader036/viewer/2022062604/568163b2550346895dd4c9ba/html5/thumbnails/5.jpg)
• Apple’s Dashboard Widget Platform• Supported in all modern browsers• Shimmed for browsers that do not support
Canvas (caveats apply)• HTML5 element that allows for dynamic,
scriptable rendering of 2D shapes and bitmaps
![Page 6: HTML5 – The Power of](https://reader036.vdocuments.mx/reader036/viewer/2022062604/568163b2550346895dd4c9ba/html5/thumbnails/6.jpg)
• Immediate Mode– Faster– Less Memory Intensive– More Work for Developers
• Without JavaScript, you are toast• Good for casual games, charting, data
visualization, & consumer micro-sites
![Page 7: HTML5 – The Power of](https://reader036.vdocuments.mx/reader036/viewer/2022062604/568163b2550346895dd4c9ba/html5/thumbnails/7.jpg)
Fundamentals
![Page 8: HTML5 – The Power of](https://reader036.vdocuments.mx/reader036/viewer/2022062604/568163b2550346895dd4c9ba/html5/thumbnails/8.jpg)
The <canvas> API (~45 methods and 21 attributes)• State• Transformations• Compositing• Colors and styles• Line caps/joins• Shadows• Rects• Path API
• Focus management• Drawing images• Text• Pixel Manipulation• Interfaces
– CanvasGradient– TextMetrics– ImageData– CanvasPixelArray
![Page 9: HTML5 – The Power of](https://reader036.vdocuments.mx/reader036/viewer/2022062604/568163b2550346895dd4c9ba/html5/thumbnails/9.jpg)
Hello World of Canvas
![Page 11: HTML5 – The Power of](https://reader036.vdocuments.mx/reader036/viewer/2022062604/568163b2550346895dd4c9ba/html5/thumbnails/11.jpg)
Primitives…yeah, but how do I build something like a game?
![Page 12: HTML5 – The Power of](https://reader036.vdocuments.mx/reader036/viewer/2022062604/568163b2550346895dd4c9ba/html5/thumbnails/12.jpg)
Would you like to play a game?
![Page 13: HTML5 – The Power of](https://reader036.vdocuments.mx/reader036/viewer/2022062604/568163b2550346895dd4c9ba/html5/thumbnails/13.jpg)
![Page 14: HTML5 – The Power of](https://reader036.vdocuments.mx/reader036/viewer/2022062604/568163b2550346895dd4c9ba/html5/thumbnails/14.jpg)
Sample Walkthrough(Sparklines)
![Page 16: HTML5 – The Power of](https://reader036.vdocuments.mx/reader036/viewer/2022062604/568163b2550346895dd4c9ba/html5/thumbnails/16.jpg)
What about SVG?
![Page 17: HTML5 – The Power of](https://reader036.vdocuments.mx/reader036/viewer/2022062604/568163b2550346895dd4c9ba/html5/thumbnails/17.jpg)
SVG• SVG describes “Scalable Vector Graphics”.• Retained mode rendering.• Like HTML, SVG is built into the document
using elements, attributes and styles.
![Page 18: HTML5 – The Power of](https://reader036.vdocuments.mx/reader036/viewer/2022062604/568163b2550346895dd4c9ba/html5/thumbnails/18.jpg)
![Page 19: HTML5 – The Power of](https://reader036.vdocuments.mx/reader036/viewer/2022062604/568163b2550346895dd4c9ba/html5/thumbnails/19.jpg)
![Page 20: HTML5 – The Power of](https://reader036.vdocuments.mx/reader036/viewer/2022062604/568163b2550346895dd4c9ba/html5/thumbnails/20.jpg)
![Page 21: HTML5 – The Power of](https://reader036.vdocuments.mx/reader036/viewer/2022062604/568163b2550346895dd4c9ba/html5/thumbnails/21.jpg)
![Page 22: HTML5 – The Power of](https://reader036.vdocuments.mx/reader036/viewer/2022062604/568163b2550346895dd4c9ba/html5/thumbnails/22.jpg)
Tools
![Page 26: HTML5 – The Power of](https://reader036.vdocuments.mx/reader036/viewer/2022062604/568163b2550346895dd4c9ba/html5/thumbnails/26.jpg)
Tips and Misc.
![Page 27: HTML5 – The Power of](https://reader036.vdocuments.mx/reader036/viewer/2022062604/568163b2550346895dd4c9ba/html5/thumbnails/27.jpg)
LESSON LEARNED: Not all operations were created equal. Some are more expensive than others.
Shadows, clipping and composition operations are more expensive as they require an additional intermediate.
DON’T: Create thousands of small objects with clipping, shadows or compositions effects.
![Page 28: HTML5 – The Power of](https://reader036.vdocuments.mx/reader036/viewer/2022062604/568163b2550346895dd4c9ba/html5/thumbnails/28.jpg)
Firefox, Opera and Internet Explorer follow the drawing model as described in the spec.
Safari and Chrome have a slightly different drawing model behavior.
DO: Check if you’re composition is impacted by this interoperability issue.
![Page 29: HTML5 – The Power of](https://reader036.vdocuments.mx/reader036/viewer/2022062604/568163b2550346895dd4c9ba/html5/thumbnails/29.jpg)
![Page 30: HTML5 – The Power of](https://reader036.vdocuments.mx/reader036/viewer/2022062604/568163b2550346895dd4c9ba/html5/thumbnails/30.jpg)
All Canvas attributes are global – they effect all operations drawn next.
ctx.shadowOffsetX = 10;ctx.shadowOffsetY = 10;ctx.shadowBlur = 10;ctx.shadowColor = "rgba(0, 0, 0, 1)";ctx.fillText(“Winning!”, 10, 25);
// All future operations will also have a shadowctx.strokeRect(0, 0, 115, 40);
![Page 31: HTML5 – The Power of](https://reader036.vdocuments.mx/reader036/viewer/2022062604/568163b2550346895dd4c9ba/html5/thumbnails/31.jpg)
Use save() and restore() to scope the attributectx.save();ctx.shadowOffsetX = 10;ctx.shadowOffsetY = 10;ctx.shadowBlur = 10;ctx.shadowColor = "rgba(0, 0, 0, 1)";ctx.fillText(“Winning!”, 10, 25);ctx.restore();
// All future operations will NOT have a shadowctx.strokeRect(0, 0, 115, 40);
![Page 32: HTML5 – The Power of](https://reader036.vdocuments.mx/reader036/viewer/2022062604/568163b2550346895dd4c9ba/html5/thumbnails/32.jpg)
• Accessibility - Fallback Content Focus • Access to the DOM tree within <canvas> tag• Elements within the <canvas> tag are considered
Fallback content and are only displayed on screen when Canvas is not supported.
• This same Fallback area can be used for Accessibility description of what is on the Canvas
![Page 33: HTML5 – The Power of](https://reader036.vdocuments.mx/reader036/viewer/2022062604/568163b2550346895dd4c9ba/html5/thumbnails/33.jpg)
DO: Canvas feature detection code DON’T: Browser detection using User Agent string DON’T: Conditional comments
![Page 34: HTML5 – The Power of](https://reader036.vdocuments.mx/reader036/viewer/2022062604/568163b2550346895dd4c9ba/html5/thumbnails/34.jpg)
DO: Add a DOCTYPE
Add W3C HTML5 DOCTYPE:<!DOCTYPE HTML>
Or add common strict DOCTYPE:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
![Page 35: HTML5 – The Power of](https://reader036.vdocuments.mx/reader036/viewer/2022062604/568163b2550346895dd4c9ba/html5/thumbnails/35.jpg)
DO: Call clearRect() to clear the Canvas.function drawLoop() {{
// Clearing Canvasctx.clearRect(0,0,width,height);…
DON’T: Clear Canvas by setting dimensions every frame.function drawLoop() {
// Clearing Canvascanvas.width = width;…
![Page 36: HTML5 – The Power of](https://reader036.vdocuments.mx/reader036/viewer/2022062604/568163b2550346895dd4c9ba/html5/thumbnails/36.jpg)
Monitors typically display at 60Hz or 16.7ms periods.For graphics timers, no point in using a higher resolution
Display – 16.7ms
Timer – 10ms
![Page 37: HTML5 – The Power of](https://reader036.vdocuments.mx/reader036/viewer/2022062604/568163b2550346895dd4c9ba/html5/thumbnails/37.jpg)
DO: Use a 17ms interval for setTimeOut() and SetInterval(). They take integer values – round up 16.7ms.
DON’T: Use a 1ms interval for timers
Using a smaller interval than 17ms has no benefit: it results in choppy animation and reduced battery life
![Page 38: HTML5 – The Power of](https://reader036.vdocuments.mx/reader036/viewer/2022062604/568163b2550346895dd4c9ba/html5/thumbnails/38.jpg)
Disney:Tron Case Study• Built in one month (Vectorform)• Hardware acceleration• 5 days of image prep• Considered CSS, pure JavaScript, others• Struggled with video sync capabilities of
different browsers
![Page 39: HTML5 – The Power of](https://reader036.vdocuments.mx/reader036/viewer/2022062604/568163b2550346895dd4c9ba/html5/thumbnails/39.jpg)
Resources
![Page 40: HTML5 – The Power of](https://reader036.vdocuments.mx/reader036/viewer/2022062604/568163b2550346895dd4c9ba/html5/thumbnails/40.jpg)
![Page 41: HTML5 – The Power of](https://reader036.vdocuments.mx/reader036/viewer/2022062604/568163b2550346895dd4c9ba/html5/thumbnails/41.jpg)
![Page 44: HTML5 – The Power of](https://reader036.vdocuments.mx/reader036/viewer/2022062604/568163b2550346895dd4c9ba/html5/thumbnails/44.jpg)
Thank You!
@tommyleeasimplepixel.tumblr.com