1. HTML5 Canvas

2. What is it? “Canvas” is a new element in the HTML5 standard. It allows for scripts to access a bitmap rendered surface for drawing to the browser Similar to Adobe Flash, in that it’s a scriptable drawing surface

3. How is it used? Simple syntax:<canvas></canvas> Only two attributes: Width Height JavaScript/ECMAScript can access the canvas via the DOM and calls to built-in functions

4. Advantages Native to the browser Not third party No plug-ins required Can be improved via browser updates Simple syntax W3C standard Draws as a bitmap, can be cached

5. Disadvantages Purely scripted No WYSIWYG or IDE, officially Resource dependent Draws as a bitmap Zooming in on the canvas shows pixelation

6. Canvas and SVG Canvas is a 2D drawing surface rendered as a bitmap SVG is a vector graphic standard that allows for drawing shapes on the screen SVG can be accessed via the DOM SVG’s can be animated Vector graphics VS Bitmap images

7. Compatibility and Usability ExplorerCanvas Allows older versions of Internet Explorer to use the new CANVAS element LibCanvas Canvas javascript library/framework that simplifies canvas animation calls Needs a lot of maturing

8. Examples http://www.blennd.com/ http://www.google.com/chromeos/features.html http://canvasrider.com/tracks/260223 http://code.almeros.com/code-examples/water-effect-canvas/

9. Questions? Please feel free to ask any questions

10. Resources http://www.w3.org/TR/html5/the-canvas-element.html http://www.html5laboratory.com/ http://html5demos.com/ http://code.google.com/p/explorercanvas/ http://libcanvas.com/