Embed Size (px)
DESCRIPTION
Overview of HTML5 Graphics with Canvas and SVG.Source code can be found on Github here: http://github.com/disbitski
Citation preview
HTML5 GraphicsDave IsbitskiSr. Developer [email protected]/davedev@TheDaveDev
W3C
HTML
HTM
L5Canvas 2D
ContextM
icrodataH
TML+RD
FaH
TML5 M
arkupH
TML5 D
iff from H
TML4
Polyglot Markup
Text alternatives
CSS
CSS Snapshot 2007CSS N
amespaces
CSS Paged Media
CSS Print ProfileCSS Values and U
nitsCSS Cascading and Inheritance
CSS TextCSS W
riting Modes
CSS Line Grid
CSS RubyCSS G
enerated Content for Paged Media
CSS Backgrounds and BordersCSS Fonts
CSS Basic Box Model
CSS Multi-colum
n LayoutCSS Tem
plate LayoutCSS M
edia Queries
CSS SpeechCSS Color
CSS Basic User Interface
CSS ScopingCSS G
rid PositioningCSS Flexible Box Layout
CSS Image Values
CSS 2D Transform
ationsCSS 3D
Transformations
CSS TransitionsCSS Anim
ations
Web Apps
CORS
Element TraversalFile API
Index DB
Programm
able HTTP Caching and Serving
Progress EventsSelectors API
Selectors API L2Server-Sent Events
Uniform
Messaging Policy
Web D
OM
CoreW
eb SQL D
atabaseW
eb IDL
Web Sockets APIW
eb StorageW
eb Workers
XmlH
ttpRequest
XmlH
ttpRequest L2
DO
M L1
DO
M L2 Core
DO
M L2 View
sD
OM
L2 EventsD
OM
L2 StyleD
OM
L2 Traversal and RangeD
OM
L2 HTM
LD
OM
L3 CoreD
OM
L3 EventsD
OM
L3 Load and SaveD
OM
L3 ValidationD
OM
L3 XPathD
OM
L3 Views and Form
atting
DO
M L3 Abstract Schem
as
SVG
Docum
ent StructureBasic Shapes
PathsText
Transforms
Painting, Filling, ColorScriptingStyling
Gradients and Patt
ernsSM
ILFontsFilters
Geolocation
Geolocation API
ECMA
ECMA Script
262
ECMAScript 262
HTML5 and Friends
via Giorgio Sardo:blogs.msdn.com/b/giorgio
/archive/2010/10/28/what-is-html5.aspx
HTML
JavaScriptCSS
Cascading Style Sheets (CSS)
CSS 2.1 Support Widespread
Many New CSS3 ModulesBackgrounds & BordersColorFonts (including WOFF)Media Queries NamespacesSelectorsValues & Units Box Shadow2D & 3D Transforms, Transitions
The Power of the Whole PC
GREETINGS PROFESSOR FALKEN.
WOULD YOU LIKE TO PLAY AGAME OF CHESS?
█
IE9 Hardware AccelerationA Tale of GPUs and CPUs
GPUs CommonplaceText, Video, and Graphics
Multiple Processor Cores (WEI Mar 2011 = 2.42)
Support for both inInternet Explorer 9 (and beyond)
Scalable Vector Graphics (SVG)
SVG 1.1Vector Based
Use Geometry
XML formatFamiliarityReadabilityAccessibility
SVG Graphics
Declarative, XML based, royalty-free format for describing 2D Vector graphicsBroad Adoption and Tools – released September 4, 2001Shapes:
‘path’, ‘rect’, ‘circle’, ‘ellipse’, ‘line’, ‘polyline’ and ‘polygon’
TextSolid Colors, Linear and Radial Gradients, PatternsStyling (inline & CSS)
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
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>
Advantages of SVG
Static or DynamicPreserves Fidelity
Vectors, High-DPI, Printing, etc.
Declarative syntax (i.e. tooling)Improved accessibility
Part of the DOM, Screen Readers
Interactivity through eventsSupports embedded content (ie. XML fragments)
SVG
Demos
Some SVG Generation Tools
Inkscapehttp://inkscape.org
Adobe IllustratorExport to SVGBTW: AI -> Canvas
http://visitmix.com/labs/ai2canvas
Microsoft VisioSave as SVGhttp://office.microsoft.com/visio
Some SVG LibrariesRaphaelJS
http://raphaeljs.com
Dojo Toolkithttp://dojotoolkit.org
Protovis Graphing libraryhttp://vis.stanford.edu/protovis
HTML5 CanvasDynamic, scriptable rendering of 2D shapes and bitmapsSimple API; 45 methods and 21 attributesTypically hardware-accelerated
HTML5 Canvas
HTML5 ElementBitmap BasedJavaScript Driven
2D APIRectangles, Paths, Lines, Fills, Arcs, Curves, etc.
“Immediate Mode”
<canvas>U haz an
old browser</canvas>
control
fallback
State Compositing
Colours and Styles
Line Styles Shadows Simple Shapes
Complex Shapes
Focus Manageme
ntText
ImagesPixel
Manipulation
state void save(); void restore();
transformations void scale(…); void rotate(…); void translate(…); void transform(…); void setTransform(…);
compositing globalAlpha; globalCompositeOperation;
colors and styles strokeStyle; fillStyle; CanvasGradient createLinearGradient(…); CanvasGradient createRadialGradient(…); CanvasPattern createPattern(…);
Line caps/joinsattribute double lineWidth; attribute DOMString lineCap; attribute DOMString lineJoin; attribute double miterLimit;
Shadowsattribute double shadowOffsetX; attribute double shadowOffsetY; attribute double shadowBlur; attribute DOMString shadowColor;
Rectsvoid clearRect(…); void fillRect(…); void strokeRect(…);
path API void beginPath(); void closePath(); void moveTo(…); void lineTo(…); void quadraticCurveTo(…); void bezierCurveTo(…); void arcTo(…); void rect(…); void arc(…); void fill(); void stroke(); void clip(); boolean isPointInPath(…);
focus management boolean drawFocusRing(…);
drawing imagesvoid drawImage(…);
text attribute DOMString font; attribute DOMString textAlign; attribute DOMString textBaseline; void fillText(…); void strokeText(…); TextMetrics measureText(…);
pixel manipulation ImageData createImageData(…); ImageData createImageData(…); ImageData getImageData(…); void putImageData(…);
interface CanvasGradient {void addColorStop(…); };
interface CanvasPattern {}; interface TextMetrics {
readonly attribute double width; };
interface ImageData { readonly attribute unsigned long width; readonly attribute unsigned long height; readonly attribute CanvasPixelArray data; };
interface CanvasPixelArray { readonly attribute unsigned long length; getter octet (…); setter void (…); };
Canvas on One Canvas!
Via Jatinder Mann – MIX11
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>
Some Advantages of HTML5 Canvas
Script-based scene graphProgrammatic generation of imagesDrawing pixelsConstant performance
HTML5 Canvas
Demos
Best Practice: Feature Detectionvar 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
}
svg versus canvas
SVG and CanvasDifferences
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 (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.
Via Jatinder Mann - MIX
Scenarios: Canvas and SVG
<canvas> <svg>
Screen Capture
Complex scenes, lots of
objects
Video Manipulation
Web Advertising
Interactive Charts, Graphs
Static Images (logos, diagrams,
etc.)
High Fidelity Documents for
Viewing, Printing
2D Gaming
Or… consider both!
Resources
Demos and MoreBeautyOfTheWeb.comIETestDrive.commsdn.com/ie
SVG & Canvashttp://msdn.com/gg193983.aspx
Sessionslive.visitmix.com, buildwindows.com
HTML5 GraphicsDave IsbitskiSr. Developer [email protected]/davedev@TheDaveDev
