Overview of HTML5 Graphics with Canvas and SVG. Source code can be found on Github here: http://github.com/disbitski

1. HTML5 Graphics
Dave Isbitski
Sr. Developer Evangelist
David.Isbitski@microsoft.com
blogs.msdn.com/davedev
@TheDaveDev

2. HTML5 and Friends
via Giorgio Sardo:
blogs.msdn.com/b/giorgio/archive/2010/10/28/what-is-html5.aspx

3. HTML
CSS JavaScript

4. Cascading Style Sheets (CSS)
CSS 2.1
Support Widespread
Many New CSS3 Modules
Backgrounds & Borders
Color
Fonts (including WOFF)
Media Queries
Namespaces
Selectors
Values & Units
Box Shadow
2D & 3D Transforms, Transitions

5. The Power of the Whole PC
GREETINGS PROFESSOR FALKEN.
WOULD YOU LIKE TO PLAY A
GAME OF CHESS?
█

6. IE9 Hardware Acceleration
A Tale of GPUs and CPUs
GPUs Commonplace
Text, Video, and Graphics
Multiple Processor Cores
(WEI Mar 2011 = 2.42)
Support for both in
Internet Explorer 9 (and beyond)

7. Scalable Vector Graphics (SVG)
SVG 1.1
Vector Based
Use Geometry
XML format
Familiarity
Readability
Accessibility

8. SVG Graphics
Declarative, XML based, royalty-free format for
describing 2D Vector graphics
Broad Adoption and Tools – released September
4, 2001
Shapes:
‘path’, ‘rect’, ‘circle’, ‘ellipse’,
‘line’, ‘polyline’ and ‘polygon’
Text
Solid Colors, Linear and Radial Gradients,
Patterns
Styling (inline & CSS)

9. Retained v. Immediate
Retained mode retains a complete model of
the objects to be rendered
Example: SVG
Immediate mode directly causes rendering of
graphics objects to the display
Example: HTML5 Canvas

10. SVG 101
<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>

11. Advantages of SVG
Static or Dynamic
Preserves Fidelity
Vectors, High-DPI, Printing, etc.
Declarative syntax (i.e. tooling)
Improved accessibility
Part of the DOM, Screen Readers
Interactivity through events
Supports embedded content (ie. XML
fragments)

12. SVG
Demos

13. Some SVG Generation Tools
Inkscape
http://inkscape.org
Adobe Illustrator
Export to SVG
BTW: AI -> Canvas
http://visitmix.com/labs/ai2canvas
Microsoft Visio
Save as SVG
http://office.microsoft.com/visio

14. Some SVG Libraries
RaphaelJS
http://raphaeljs.com
Dojo Toolkit
http://dojotoolkit.org
Protovis
Graphing library
http://vis.stanford.edu/protovis

15. HTML5 Canvas
Dynamic, scriptable
rendering of 2D
shapes and bitmaps
Simple API; 45
methods and 21
attributes
Typically hardware-
accelerated

16. HTML5 Canvas
HTML5 Element
U haz an old
Bitmap Based browser
JavaScript Driven
2D API
Rectangles, Paths, Lines,
Fills, Arcs, Curves, etc.
“Immediate Mode”

17. Colours and
State Compositing
Styles
Simple
Line Styles Shadows
Shapes
Complex Focus
Text
Shapes Management
Pixel
Images
Manipulation

18. Canvas on One Canvas!
state Shadows text
attribute double attribute DOMString font;
void save();
shadowOffsetX; attribute DOMString textAlign;
void restore();
attribute double attribute DOMString textBaseline;
transformations void fillText(…);
shadowOffsetY;
void scale(…); void strokeText(…);
void rotate(…);
attribute double
shadowBlur; TextMetrics measureText(…);
void translate(…); pixel manipulation
attribute DOMString
void transform(…); ImageData createImageData(…);
shadowColor;
void setTransform(…); ImageData createImageData(…);
Rects
compositing ImageData getImageData(…);
void clearRect(…);
globalAlpha; void putImageData(…);
void fillRect(…);
globalCompositeOperation;
void strokeRect(…); interface CanvasGradient {
colors and styles
path API void addColorStop(…); };
strokeStyle;
void beginPath(); interface CanvasPattern {};
fillStyle;
CanvasGradient void closePath(); interface TextMetrics {
createLinearGradient(…); void moveTo(…); readonly attribute double width;
CanvasGradient void lineTo(…); };
createRadialGradient(…); void quadraticCurveTo(…); interface ImageData {
CanvasPattern readonly attribute unsigned long
void bezierCurveTo(…); width;
createPattern(…);
void arcTo(…); readonly attribute unsigned long
Line caps/joins void rect(…); height;
attribute double lineWidth; readonly attribute
void arc(…);
attribute DOMString CanvasPixelArray data; };
lineCap; void fill();
interface CanvasPixelArray {
attribute DOMString void stroke();
readonly attribute unsigned long
lineJoin; void clip(); length;
attribute double boolean isPointInPath(…); getter octet (…);
miterLimit;
focus management setter void (…); };
boolean drawFocusRing(…);
drawing images
void drawImage(…);
Via Jatinder Mann – MIX11

19. Canvas 101
<canvas id="myCanvas" width="200" height="200">
No canvas support.
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(255,0,0)";
ctx.fillRect(30, 30, 50, 50);
</script>

20. Some Advantages of HTML5 Canvas
Script-based scene graph
Programmatic generation of
images
Drawing pixels
Constant performance

21. HTML5 Canvas
Demos

22. Best Practice: Feature Detection
var canvas =
document.createElement(“canvas”);
if (canvas && canvas.getContext &&
canvas.getContext(“2d”))
{
// Code requiring canvas support
} else {
// Canvas isn’t available.
// Put non-canvas fallback here
}

23. A Canvas Library Example
EaselJS
http://easeljs.com

24. svg versus canvas

25. SVG and Canvas
Canvas SVG
Abstraction Pixel based Shape based
Elements Single HTML element Multiple graphical elements
which become part of the DOM
Driver Script only Script and CSS
Event Model User Interaction is granular User Interaction is abstracted
(x,y) (rect, path)
Performance Performance is better with Performance is better with
smaller surface and/or larger smaller number of objects
number of objects and/or larger surface.
Via Jatinder Mann - MIX

26. Scenarios: Canvas and SVG
Complex
scenes, lots of
Screen Capture objects
Static Images
Interactive (logos, diagrams,
Charts, Graphs etc.)
High Fidelity
2D Gaming Documents for
Viewing,
Printing
Video Web
Manipulation Advertising
Or… consider both!

27. Resources
Demos and More
BeautyOfTheWeb.com
IETestDrive.com
msdn.com/ie
SVG & Canvas
http://msdn.com/gg193983.aspx
Sessions
live.visitmix.com, buildwindows.com

28. HTML5 Graphics
Dave Isbitski
Sr. Developer Evangelist
David.Isbitski@microsoft.com
blogs.msdn.com/davedev
@TheDaveDev