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 = 'red'; other timer gradual fades what was visible into background via 0.1.
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
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 Mar 2011 = 2.42)Support for both inInternet Explorer 9 (and beyond)
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 – released September4, 2001Shapes: ‘path’, ‘rect’, ‘circle’, ‘ellipse’, ‘line’, ‘polyline’ and ‘polygon’TextSolid Colors, Linear and Radial Gradients,PatternsStyling (inline & CSS)
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
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)
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
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
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!
ResourcesDemos and More BeautyOfTheWeb.com IETestDrive.com msdn.com/ieSVG & Canvas http://msdn.com/gg193983.aspxSessions live.visitmix.com, buildwindows.com