KEMBAR78
HTML5 Graphics - Canvas and SVG | PPTX
HTML5 Graphics
Dave Isbitski
Sr. Developer Evangelist
David.Isbitski@microsoft.com
blogs.msdn.com/davedev
@TheDaveDev
HTML5 and Friends




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



CSS     JavaScript
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
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 CPUs

GPUs Commonplace
  Text, Video, and Graphics


Multiple Processor Cores
(WEI Mar 2011 = 2.42)

Support for both in
Internet Explorer 9 (and beyond)
Scalable Vector Graphics (SVG)

SVG 1.1
Vector Based
  Use Geometry
XML format
  Familiarity
  Readability
  Accessibility
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)
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 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)
SVG

 Demos
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
Some SVG Libraries
 RaphaelJS
   http://raphaeljs.com


 Dojo Toolkit
   http://dojotoolkit.org


 Protovis
   Graphing library
   http://vis.stanford.edu/protovis
HTML5 Canvas
Dynamic, scriptable
rendering of 2D
shapes and bitmaps
Simple API; 45
methods and 21
attributes
Typically hardware-
accelerated
HTML5 Canvas
HTML5 Element
                              U haz an old
  Bitmap Based                  browser
  JavaScript Driven

2D API
  Rectangles, Paths, Lines,
  Fills, Arcs, Curves, etc.

“Immediate Mode”
Colours and
  State       Compositing
                              Styles


                              Simple
Line Styles    Shadows
                              Shapes


 Complex        Focus
                               Text
 Shapes       Management


                       Pixel
          Images
                    Manipulation
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
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 graph
 Programmatic generation of
 images
 Drawing pixels
 Constant performance
HTML5 Canvas

  Demos
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
   }
A Canvas Library Example

  EaselJS
    http://easeljs.com
svg versus canvas
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
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!
Resources
Demos and More
  BeautyOfTheWeb.com
  IETestDrive.com
  msdn.com/ie

SVG & Canvas
  http://msdn.com/gg193983.aspx

Sessions
  live.visitmix.com, buildwindows.com
HTML5 Graphics
Dave Isbitski
Sr. Developer Evangelist
David.Isbitski@microsoft.com
blogs.msdn.com/davedev
@TheDaveDev

HTML5 Graphics - Canvas and SVG

  • 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 ofthe 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, XMLbased, 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 Retainedmode 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 Staticor 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.
  • 13.
    Some SVG GenerationTools 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 renderingof 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 OneCanvas! 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 ofHTML5 Canvas Script-based scene graph Programmatic generation of images Drawing pixels Constant performance
  • 21.
  • 22.
    Best Practice: FeatureDetection 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 LibraryExample EaselJS http://easeljs.com
  • 24.
  • 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 andSVG 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

Editor's Notes

  • #11 Z order is whichever is first so red rect is before blue-rect can be inline in html or external resources.
  • #13 Election Results – High Fidelity: http://ie.microsoft.com/testdrive/Graphics/AtlaszurEuropawahl/Default.xhtml – Zoom in and out. LOB applications, and dynamic.
  • #16 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.
  • #18 Can incorporate video and even get rgb value of a pixel.
  • #22 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.