Your SlideShare is downloading. ×
0
HTML5 GraphicsDave IsbitskiSr. Developer EvangelistDavid.Isbitski@microsoft.comblogs.msdn.com/davedev@TheDaveDev
HTML5 and Friends                                                 via Giorgio Sardo:     blogs.msdn.com/b/giorgio/archive/...
HTMLCSS     JavaScript
Cascading Style Sheets (CSS)CSS 2.1   Support WidespreadMany New CSS3 Modules   Backgrounds & Borders   Color   Fonts (inc...
The Power of the Whole PC     GREETINGS PROFESSOR FALKEN.      WOULD YOU LIKE TO PLAY A           GAME OF CHESS?          ...
IE9 Hardware Acceleration  A Tale of GPUs and CPUsGPUs Commonplace  Text, Video, and GraphicsMultiple Processor Cores(WEI ...
Scalable Vector Graphics (SVG)SVG 1.1Vector Based  Use GeometryXML format  Familiarity  Readability  Accessibility
SVG GraphicsDeclarative, XML based, royalty-free format fordescribing 2D Vector graphicsBroad Adoption and Tools – release...
Retained v. ImmediateRetained mode retains a complete model ofthe objects to be rendered  Example: SVGImmediate mode direc...
SVG 101<svg width="400" height="200"xmlns="http://www.w3.org/2000/svg">    <rect fill="red" x="20" y="20" width="100" heig...
Advantages of SVGStatic or DynamicPreserves Fidelity  Vectors, High-DPI, Printing, etc.Declarative syntax (i.e. tooling)Im...
SVG Demos
Some SVG Generation ToolsInkscape  http://inkscape.orgAdobe Illustrator  Export to SVG  BTW: AI -> Canvas     http://visit...
Some SVG Libraries RaphaelJS   http://raphaeljs.com Dojo Toolkit   http://dojotoolkit.org Protovis   Graphing library   ht...
HTML5 CanvasDynamic, scriptablerendering of 2Dshapes and bitmapsSimple API; 45methods and 21attributesTypically hardware-a...
HTML5 CanvasHTML5 Element                              U haz an old  Bitmap Based                  browser  JavaScript Dri...
Colours and  State       Compositing                              Styles                              SimpleLine Styles   ...
Canvas on One Canvas!state                             Shadows                             text                           ...
Canvas 101<canvas id="myCanvas" width="200" height="200">  No canvas support.</canvas><script type="text/javascript">  var...
Some Advantages of HTML5 Canvas Script-based scene graph Programmatic generation of images Drawing pixels Constant perform...
HTML5 Canvas  Demos
Best Practice: Feature Detectionvar canvas =document.createElement(“canvas”);   if (canvas && canvas.getContext &&       c...
A Canvas Library Example  EaselJS    http://easeljs.com
svg versus canvas
SVG and Canvas              Canvas                         SVGAbstraction   Pixel based                    Shape basedElem...
Scenarios: Canvas and SVG                    Complex                 scenes, lots ofScreen Capture       objects          ...
ResourcesDemos and More  BeautyOfTheWeb.com  IETestDrive.com  msdn.com/ieSVG & Canvas  http://msdn.com/gg193983.aspxSessio...
HTML5 GraphicsDave IsbitskiSr. Developer EvangelistDavid.Isbitski@microsoft.comblogs.msdn.com/davedev@TheDaveDev
Upcoming SlideShare
Loading in...5
×

HTML5 Graphics - Canvas and SVG

1,463

Published on

Overview of HTML5 Graphics with Canvas and SVG.

Source code can be found on Github here: http://github.com/disbitski

Published in: Technology, Art & Photos
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,463
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
54
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • Z order is whichever is first so red rect is before blue-rect can be inline in html or external resources.
  • Election Results – High Fidelity: http://ie.microsoft.com/testdrive/Graphics/AtlaszurEuropawahl/Default.xhtml – Zoom in and out. LOB applications, and dynamic.
  • 2004 – Apple in Webkit. Used to power dashboard widgets and safari browser itself.2006 – general use by folks Now part of HTML5APIs is part of low level drawing API – Immediate mode is very fast performance.
  • Can incorporate video and even get rgb value of a pixel.
  • http://ie.microsoft.com/testdrive/Graphics/CanvasPad/Default.htmlRectangles, arcs and then quadratic. Show clipping and talk about interval timer. Then show gradient calls on kite and show shadows. Them image and video (could even do transforms on rgb values of video). Show transforms and animation. ctx.shadowColor = &apos;red&apos;; other timer gradual fades what was visible into background via 0.1.
  • Transcript of "HTML5 Graphics - Canvas and SVG"

    1. 1. HTML5 GraphicsDave IsbitskiSr. Developer EvangelistDavid.Isbitski@microsoft.comblogs.msdn.com/davedev@TheDaveDev
    2. 2. HTML5 and Friends via Giorgio Sardo: blogs.msdn.com/b/giorgio/archive/2010/10/28/what-is-html5.aspx
    3. 3. HTMLCSS JavaScript
    4. 4. Cascading Style Sheets (CSS)CSS 2.1 Support WidespreadMany New CSS3 Modules Backgrounds & Borders Color Fonts (including WOFF) Media Queries Namespaces Selectors Values & Units Box Shadow 2D & 3D Transforms, Transitions
    5. 5. The Power of the Whole PC GREETINGS PROFESSOR FALKEN. WOULD YOU LIKE TO PLAY A GAME OF CHESS? █
    6. 6. IE9 Hardware Acceleration A Tale of GPUs and CPUsGPUs Commonplace Text, Video, and GraphicsMultiple Processor Cores(WEI Mar 2011 = 2.42)Support for both inInternet Explorer 9 (and beyond)
    7. 7. Scalable Vector Graphics (SVG)SVG 1.1Vector Based Use GeometryXML format Familiarity Readability Accessibility
    8. 8. SVG GraphicsDeclarative, XML based, royalty-free format fordescribing 2D Vector graphicsBroad Adoption and Tools – released September4, 2001Shapes: ‘path’, ‘rect’, ‘circle’, ‘ellipse’, ‘line’, ‘polyline’ and ‘polygon’TextSolid Colors, Linear and Radial Gradients,PatternsStyling (inline & CSS)
    9. 9. Retained v. ImmediateRetained mode retains a complete model ofthe objects to be rendered Example: SVGImmediate mode directly causes rendering ofgraphics objects to the display Example: HTML5 Canvas
    10. 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. 11. Advantages of SVGStatic or DynamicPreserves Fidelity Vectors, High-DPI, Printing, etc.Declarative syntax (i.e. tooling)Improved accessibility Part of the DOM, Screen ReadersInteractivity through eventsSupports embedded content (ie. XMLfragments)
    12. 12. SVG Demos
    13. 13. Some SVG Generation ToolsInkscape http://inkscape.orgAdobe Illustrator Export to SVG BTW: AI -> Canvas http://visitmix.com/labs/ai2canvasMicrosoft Visio Save as SVG http://office.microsoft.com/visio
    14. 14. Some SVG Libraries RaphaelJS http://raphaeljs.com Dojo Toolkit http://dojotoolkit.org Protovis Graphing library http://vis.stanford.edu/protovis
    15. 15. HTML5 CanvasDynamic, scriptablerendering of 2Dshapes and bitmapsSimple API; 45methods and 21attributesTypically hardware-accelerated
    16. 16. HTML5 CanvasHTML5 Element U haz an old Bitmap Based browser JavaScript Driven2D API Rectangles, Paths, Lines, Fills, Arcs, Curves, etc.“Immediate Mode”
    17. 17. Colours and State Compositing Styles SimpleLine Styles Shadows Shapes Complex Focus Text Shapes Management Pixel Images Manipulation
    18. 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(…); Rectscompositing 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 longLine 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. 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. 20. Some Advantages of HTML5 Canvas Script-based scene graph Programmatic generation of images Drawing pixels Constant performance
    21. 21. HTML5 Canvas Demos
    22. 22. 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 }
    23. 23. A Canvas Library Example EaselJS http://easeljs.com
    24. 24. svg versus canvas
    25. 25. SVG and Canvas Canvas SVGAbstraction Pixel based Shape basedElements Single HTML element Multiple graphical elements which become part of the DOMDriver Script only Script and CSSEvent 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. 26. Scenarios: Canvas and SVG Complex scenes, lots ofScreen Capture objects Static Images Interactive (logos, diagrams, Charts, Graphs etc.) High Fidelity 2D Gaming Documents for Viewing, Printing Video WebManipulation Advertising Or… consider both!
    27. 27. ResourcesDemos and More BeautyOfTheWeb.com IETestDrive.com msdn.com/ieSVG & Canvas http://msdn.com/gg193983.aspxSessions live.visitmix.com, buildwindows.com
    28. 28. HTML5 GraphicsDave IsbitskiSr. Developer EvangelistDavid.Isbitski@microsoft.comblogs.msdn.com/davedev@TheDaveDev
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×