The HTML5 Canvas element allows scripts to access a bitmap rendered surface for drawing graphics via JavaScript. It provides a simple syntax using <canvas> tags with width and height attributes. Canvas drawing is rendered as a bitmap and is resource dependent, but offers advantages like being native to browsers without requiring plugins. While purely scripted, it is a W3C standard and examples demonstrate its capabilities for animations and interactive experiences.

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 browserSimilar to Adobe Flash, in that it’s a scriptable drawing surface

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

4. AdvantagesNative to the browserNot third partyNo plug-ins requiredCan be improved via browser updatesSimple syntaxW3C standardDraws as a bitmap, can be cached

5. DisadvantagesPurely scriptedNo WYSIWYG or IDE, officiallyResource dependentDraws as a bitmapZooming in on the canvas shows pixelation

6. Canvas and SVGCanvas is a 2D drawing surface rendered as a bitmapSVG is a vector graphic standard that allows for drawing shapes on the screenSVG can be accessed via the DOMSVG’s can be animatedVector graphics VS Bitmap images

7. Compatibility and UsabilityExplorerCanvasAllows older versions of Internet Explorer to use the new CANVAS elementLibCanvasCanvas javascript library/framework that simplifies canvas animation callsNeeds a lot of maturing

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

9. Questions?Please feel free to ask any questions

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