Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Html5 canvas

1,173 views

Published on

  • Be the first to comment

  • Be the first to like this

Html5 canvas

  1. 1. HTML5 Canvas<br />
  2. 2. What is it?<br />“Canvas” is a new element in the HTML5 standard.<br />It allows for scripts to access a bitmap rendered surface for drawing to the browser<br />Similar to Adobe Flash, in that it’s a scriptable drawing surface<br />
  3. 3. How is it used?<br />Simple syntax:<canvas></canvas><br />Only two attributes:<br />Width<br />Height<br />JavaScript/ECMAScript can access the canvas via the DOM and calls to built-in functions<br />
  4. 4. Advantages<br />Native to the browser<br />Not third party<br />No plug-ins required<br />Can be improved via browser updates<br />Simple syntax<br />W3C standard<br />Draws as a bitmap, can be cached<br />
  5. 5. Disadvantages<br />Purely scripted<br />No WYSIWYG or IDE, officially<br />Resource dependent<br />Draws as a bitmap<br />Zooming in on the canvas shows pixelation<br />
  6. 6. Canvas and SVG<br />Canvas is a 2D drawing surface rendered as a bitmap<br />SVG is a vector graphic standard that allows for drawing shapes on the screen<br />SVG can be accessed via the DOM<br />SVG’s can be animated<br />Vector graphics VS Bitmap images<br />
  7. 7. Compatibility and Usability<br />ExplorerCanvas<br />Allows older versions of Internet Explorer to use the new CANVAS element<br />LibCanvas<br />Canvas javascript library/framework that simplifies canvas animation calls<br />Needs a lot of maturing<br />
  8. 8. Examples<br />http://www.blennd.com/<br />http://www.google.com/chromeos/features.html<br />http://canvasrider.com/tracks/260223<br />http://code.almeros.com/code-examples/water-effect-canvas/<br />
  9. 9. Questions?<br />Please feel free to ask any questions<br />
  10. 10. Resources<br />http://www.w3.org/TR/html5/the-canvas-element.html<br />http://www.html5laboratory.com/<br />http://html5demos.com/<br />http://code.google.com/p/explorercanvas/<br />http://libcanvas.com/<br />

×