HTML5 – The Power of <canvas>

HTML5 – The Power of <canvas> 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) • 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 shadow • ctx.strokeRect(0, 0, 115, 40);

Use save() and restore() to scope the attribute • ctx.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 shadow • ctx.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">

DON’T: Clear Canvas by setting dimensions every frame. function drawLoop() { // Clearing Canvas canvas.width = width; … DO: Call clearRect() to clear the Canvas. function drawLoop() { { // Clearing Canvas ctx.clearRect(0,0,width,height); …

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

HTML5 – The Power of <canvas>