Dive into HTML5: SVG and Canvas

Doris Chen Ph.D.

Developer Evangelist

Microsoft

http://blogs.msdn.com/dorischen/

@doristchen

Dive into HTML5:

SVG and Canvas

Who am I?

Developer Evangelist at Microsoft based in Silicon Valley, CA

Blog: http://blogs.msdn.com/b/dorischen/

Twitter @doristchen

Email: [email protected]

Has over 13 years of experience in the software industry focusing on web technologies

Spoke and published widely at JavaOne, O'Reilly, Silicon Valley Code Camp, SD West, SD Forum and worldwide User Groups meetings

Doris received her Ph.D. from the University of California at Los Angeles (UCLA)

http://blogs.msdn.com/b/dorischen/

Agenda

PAGE 3

What is HTML5

HTML5 Overview

HTML5 Tools

Summary and Resources

SVG and Canvas

HTML CSS Web Apps SVG

Geo

loca

tio

n

EC

MA

100+ Specifications

Microsoft Approach with HTML5

HTML5 in IE9

HTML5

• New Markup Elements

• Canvas

• Audio

• Video

• Local Storage

• Cross-Window Messaging

• Text Selection APIs

• Parsing SVG in HTML

CSS3

• 2D Transforms

• Border Radius

• Box-Shadow

• Fonts (WOFF)

• Media Queries

• Multiple Backgrounds

• Namespaces

• Opacity

• rgba(), hsl(), hsla()

• Selectors (IE8)

SVG

• Shapes

• Clipping, Masking, and Compositing

• Transforms

• Extensibility

• Gradients

• Interactivity

• Linking and Views

• Painting and Colors

• Paths

• Text

Others

• ECMA Script 5 (all but Strict Mode)

• Native JSON support (IE8)

• Performance API

• Geo-Location

• Data-uri (IE8)

• DOM L2, L3

• Selectors API L2

• AJAX Navigation (IE8)

• DOMParser and XMLSerializer

• ICC v2 and Color Profile

• ARIA

Hardware Acceleration

HTML5 in IE10 Platform Previews

HTML5

• Drag&Drop

• File API

• Forms Validation

• Sandbox

• Web Workers

• async

CSS3

• Grid

• Flexbox

• Gradient

• Multi-Column

• Floats

Others

• Web Performance APIs

• ECMA Script 5 Strict Mode

• Advanced Hit Testing APIs

• Media Queries Listeners

• Removal of Style Sheet Limits

HTML5 Semantics

HTML5 introduces a new semantic structure

Replacing the use of DIV, SPAN and other elements with class and ID attributes

New elements include header, nav, article, section, aside, and footer

Semantic Document Structure

HEADER

FOOTER

NAV

ARTICLE

ASIDE

HTML5 Semantic Tags

<body> <header> <hgroup> <h1>Doris Chen Dancing</h1> <h2>Funky Town!</h2> </hgroup> </header> <nav> <ul>Navigation links</ul> </nav>

<section> <article> <header> <h1>Can you believe it?</h1> </header> <section>

<mark>Doris dancing!</mark>

</section> </article>

... </section> <aside>Aside items (i.e. links)</aside> <figure> <img src="..." /> <figcaption>Doris dancing</figcaption> </figure> <footer>Copyright © 2011</footer>

</body>

Supported in Internet Explorer 9

CSS3 IE9

2D Transforms Border Radius Box-Shadow Fonts (WOFF) Media Queries Multiple Backgrounds Namespaces Opacity rgba(), hsl(), hsla() Selectors (IE8)

IE10 Platform Preview Grid Flexbox Gradient Multi-Column Floats

CSS3

Demo

Looking forward

HTML5 Cross Platforms: Best Practices and Tips Focus on creating semantic markup

use CSS and JavaScript for appearance and behavior

Avoid embedding inline and JavaScript in same page use external styles and scripts

Create media queries to apply styles on the device display <style type="text/css" media="screen and (min-width:

481px)"> // Style definitions here for large screens </style> <style type="text/css" media="screen and (max-width: 480px)"> // Style definitions here for smaller screens </style>

Use CSS properties such as “display” to create layouts

Avoid embedding images directly in the page use CSS to specify background images

HTML5 App running on IE9 Windows Phone 7 Mango

Demo

HTML5 Video & Audio <audio <video

src= src= The url to the audio or video

width= The width of the video element

height= The height of the video element

poster= The url to the thumbnail of the video

preload= preload= (none, metadata, auto) Start downloading

autoplay autoplay Audio or video should play immediately

loop loop Audio or video should return to start and play

controls controls Will show controls (play, pause, scrub bar)

> >

… …

</audio> </video>

Compatibility Table HTML5 Audio

vCurrent 9 6 5.0.4 10.0.648.20

4 11.01

MP3 audio

support Yes No Yes Yes No (*)

WAV PCM

audio

support

No Yes Yes Yes Yes

AAC audio

format Yes No Yes Yes No (*)

Compatibility Table HTML5 <video>

vCurrent 9 6 5.0.4 10.0.648.20

4 11.01

VP8

(WebM)

video

support

Yes

Yes No (*) Yes Yes

H.264 video

format No (*) Yes Yes (*) No (*)

• Video, Fallback, Styled Video, Canvas, Animation

Demo

SVG and Canvas

PAGE 21

Introduction to SVG

Introduction to Canvas

When to use What?


Tooling

Let’s Build a simple Game

Introduction to SVG

SVG basics Scalable Vector Graphics

Scalable Vector Graphic

To draw 2D vector graphics using XML

“retained mode” : the objects tree is kept in memory

Full DOM support

Access to the SVG elements through the DOM

SVG elements can be styled with CSS & can be

decorated with ARIA

Included in HTML5 spec

Native support in IE9 and other modern browsers

Can be used from an external .svg file or in-line in

the document

HTML5 <svg>

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">

<rect fill="red" x="20" y="20" width="100" height="75" />

<rect fill="blue" x="50" y="50" width="100" height="75" />

</svg>

Let’s see a very simple example

SVG basics SVG 1.1 2nd Edition

in IE9

SVG Feature IE9

Document Structure

Basic Shapes

Paths

Text

Transforms

Painting, Filling, Color

Scripting

Styling

Gradients and Patterns

Clipping and Masking

Markers and Symbols

Filter Effects

Declarative Animation

SVG Fonts

SVG 1.1 2nd Edition

in IE9

Here is the relevant API

Elements path animate filter linearGradient radialGradient view a marker clipPath mask pattern circle ellipse line polygon polyline rect g image use style text textPath

Properties clip clip-path clip-rule color fill fill-opacity filter font font-family marker mask opacity stop-color stop-opacity stroke stroke-opacity stroke-width visibility writing-mode

Attributes clip clip-path clip-rule color cx cy d display dx dx dy dy fill fill-opacity fill-rule filter

Attributes offset opacity operator order origin overflow path pathLength points r radius result rotate rx ry scale stop-color stop-opacity stroke stroke-dasharray stroke-dashoffset stroke-opacity

Events onabort onactivate onbegin onclick onend onerror onfocusin onfocusout onload onmousedown onmousemove onmouseout onmouseover onmouseup onrepeat onresize onscroll onunload onzoom

Attributes font-family font-size font-stretch font-style font-variant font-weight height id local marker-end marker-mid marker-start mask name

Attributes stroke-width style targetX targetY text-anchor text-decoration text-rendering textLength transform type viewBox visibility width x x1 x2 y y1 y2

Including SVG on your webpage

Standalone <object data="logo.svg" type="image/svg+xml" width="100" height="100"></object> <img src="logo.svg" width="100" height="100"/>

No scripting { background-image: url('background.svg'); } <iframe src="logo.svg" width="100" height="100"/> <embed src="logo.svg" width="100" height="100"/>

Inline HTML5 XHTML

SVG Basics

Demo

The element, some styling & interactivity

Introduction to Canvas

Canvas basics Dynamic bitmap with JS

Allow drawing into a bitmap area

See it as a dynamic PNG ;-)

JavaScript APIs & drawing primitives

Rectangles, lines, fills, arcs, Bezier curves, etc.

Immediate mode : « Fire and Forget »

It does not remember what you drew last.

It’s up to you to maintain your objects tree

This is a black box : content not visible into the DOM

Beware of accessibility issues

Simple API: 45 methods, 21 attributes

Canvas Entire API

HTML5 <canvas>

<canvas id="myCanvas" width="200" height="200">

Your browser doesn’t support Canvas, sorry.

</canvas>

<script type="text/javascript">

var example = document.getElementById("myCanvas");

var context = example.getContext("2d");

context.fillStyle = "rgb(255,0,0)";

context.fillRect(30, 30, 50, 50);

</script>

Let’s see a very simple sample code

Canvas Basics

Demo

The element, interactivity

Let’s Build a Simple Game

Building the same game

Demo

Compare SVG & Canvas

When to Use What?

High level differences: SVG and Canvas

Canvas SVG

Abstraction Pixel based (dynamic

bitmap)

Shape based

Elements Single HTML element Multiple graphical elements

which become part of the

Document Object Model

(DOM)

Driver Modified through Script

only

Modified through Script and

CSS

Event Model User Interaction is

granular (x,y)

User Interaction is

abstracted (rect, path)

Performance Performance is better

with smaller surface

and/or larger number of

objects

Performance is better with

smaller number of objects

and/or larger surface.

The last piece to help you choose

Scenarios: Canvas and SVG

Use Case: Visualizing Data

Charts

Display Data or Change the user driven views

Styling / Transitions

<path class="highcharts-series" d="M 6 57 L 7 58".. />

.highcharts-series {

-ms-transition-property: opacity;

-ms-transition-duration: 2s; }

.highcharts-series:hover { opacity:.5; }

<path id="mainPath" class="highcharts-series" d="M 6 57 L 7 58".. /> <rect id="mainGraph" x="0" y="0" width="400" height="200" /> document.getElementById("mainPath").addEventListener("mouseover", showData, false); document.getElementById("mainGraph").addEventListener("click", zoomData, false);


Graphs

Animated Queues for Visuals

Large Amounts of Data

<canvas style="position:absolute;top:50px;left:50px" onclick="scatter();" id="canvasGraph" height="400px"width="500px"/>


Maps

Interactive Data Presentation

High Speed Data

<style type="text/css"media="screen"> path:hover{fill:yellow;} </style>

<canvas style="position:absolute;top:50px;left:50px" onclick="addWeather();" id="canvasGraph"height="500px"width="800px"/> for (var i= 0; i < weatherPatterns.length;i++) { weatherPatterns[i].x += Math.floor(Math.random() * 3)-1; weatherPatterns[i].y += Math.floor(Math.random() * 3) -1; myContext.drawImage(weatherImage[weatherPatterns[i].ImageIndex], weatherPatterns[i].x, weatherPatterns[i].y); }

PAGE 43

Toolings

Tools to generate SVG You won’t be forced to type XML in notepad!

Microsoft Visio

Export as SVG

Adobe Illustrator

Save as SVG

Inkspace

Free Open source

software

Tools to generate Canvas You won’t be forced to type every JS primitives neither ;-)

AI2Canvas plug-in :

http://visitmix.com/labs/

ai2canvas/ export vector and bitmap

artwork directly to an

HTML5 canvas

provides drawing,

animation and coding

options such as events so

that you can build

interactive, well-designed

canvas-based web apps.

http://visitmix.com/labs/ai2canvas/



Level of support

<video>

Yes

No No

Yes

No

<canvas> Yes No Yes

<svg> No No No

HTML5 Tools

Tools

F12 Developer Tools

Browser Mode Changes the rendering

engine only

Great list of PolyFills Changes the rendering engine

and user agent string

F12 Developer Tools Testing from Internet Explorer 9 to 7

PAGE 51

Expression Web Super Preview

PAGE 52


Can I Use HTML5 Today?

PAGE 54

Resources • Started with HTML5

• http://bit.ly/hpbwhv

• Feature-specific demos

• http://ie.microsoft.com/testdrive/

• Real-world demos

• http://www.beautyoftheweb.com/

• Canvas demo by Community

• http://www.canvasdemos.com/

• Session Presentation and Demo

• http://blogs.msdn.com/dorischen/

PAGE 56

http://bit.ly/hpbwhv

http://bit.ly/hpbwhv

http://ie.microsoft.com/testdrive/

http://www.beautyoftheweb.com/

http://www.canvasdemos.com/





1 Days HTML5 Web Camp (Free)

Nov 12, 2011 (Sat.), Mountain View, CA

Half day lecture and half day hands on labs

More http://bit.ly/free_html5training

Upcoming HTML5 Web Camps

http://bit.ly/free_html5training

http://bit.ly/free_html5training

Technology

Dive into HTML5: SVG and Canvas