HTM03
Let’s Get Started
Everything is drawn onto the 2D rendering context
What is drawn on canvas
BrowserPass rate Internet Explorer 994.0% Chrome % Opera % Safari 582.4% Firefox 478.4%
DON’T
DO
DON’T
DO
CanvasSVG AbstractionPixel based (dynamic bitmap)Shape based ElementsSingle HTML element Multiple graphical elements which become part of the Document Object Model (DOM) DriverModified through Script onlyModified through Script and CSS Event ModelUser Interaction is granular (x,y) User Interaction is abstracted (rect, path) PerformancePerformance is better with smaller surface and/or larger number of objects Performance is better with smaller number of objects and/or larger surface.
Screen Capture Complex scenes, lots of objects Video Manipulation Web Advertising Interactive Charts, Graphs Static Images High Fidelity Documents for Viewing, Printing 2D Gaming