html5 – the power of
DESCRIPTION
HTML5 – The Power of . Thomas Lewis HTML5 Principal Technical Evangelist Microsoft Corporation @ tommylee | asimplepixel.tumblr.com. Demos. Apple’s Dashboard Widget Platform Supported in all modern browsers Shimmed for browsers that do not support Canvas (caveats apply) - PowerPoint PPT PresentationTRANSCRIPT
HTML5 – The Power of <canvas>
Thomas LewisHTML5 Principal Technical Evangelist
Microsoft Corporation@tommylee | asimplepixel.tumblr.com
Demos
• 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
• 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
Fundamentals
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
Hello World of Canvas
Primitives…yeah, but how do I build something like a game?
Would you like to play a game?
Sample Walkthrough(Sparklines)
What about SVG?
SVG• SVG describes “Scalable Vector Graphics”.• Retained mode rendering.• Like HTML, SVG is built into the document
using elements, attributes and styles.
Tools
Tips and Misc.
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.
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.
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);
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);
• 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
DO: Canvas feature detection code DON’T: Browser detection using User Agent string DON’T: Conditional comments
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">
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;…
Monitors typically display at 60Hz or 16.7ms periods.For graphics timers, no point in using a higher resolution
Display – 16.7ms
Timer – 10ms
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
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
Resources
Thank You!
@tommyleeasimplepixel.tumblr.com