HTML5 – The Power of HTML5 – The Power of Thomas Lewis HTML5 Principal Technical Evangelist Microsoft | 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 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.

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);

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 tag Elements within the 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: Or add common strict DOCTYPE:

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 asimplepixel.tumblr.com