HTML5 Graphics - Canvas and SVG
Download as PPTX, PDF3 likes1,753 views
The document discusses HTML5 graphics, focusing on key technologies like SVG (Scalable Vector Graphics) and HTML5 Canvas for rendering 2D graphics. It outlines the advantages of each, including SVG's declarative syntax and accessibility features, along with HTML5 Canvas's script-based, performance-oriented approach. The text also includes practical examples, demos, and scenarios for using SVG and Canvas in web applications.
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 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
- 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
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 = 'red'; other timer gradual fades what was visible into background via 0.1.