HTML5 Canvas<br />
What is it?<br />“Canvas” is a new element in the HTML5 standard.<br />It allows for scripts to access a bitmap rendered s...
How is it used?<br />Simple syntax:<canvas></canvas><br />Only two attributes:<br />Width<br />Height<br />JavaScript/ECMA...
Advantages<br />Native to the browser<br />Not third party<br />No plug-ins required<br />Can be improved via browser upda...
Disadvantages<br />Purely scripted<br />No WYSIWYG or IDE, officially<br />Resource dependent<br />Draws as a bitmap<br />...
Canvas and SVG<br />Canvas is a 2D drawing surface rendered as a bitmap<br />SVG is a vector graphic standard that allows ...
Compatibility and Usability<br />ExplorerCanvas<br />Allows older versions of Internet Explorer to use the new CANVAS elem...
Examples<br />http://www.blennd.com/<br />http://www.google.com/chromeos/features.html<br />http://canvasrider.com/tracks/...
Questions?<br />Please feel free to ask any questions<br />
Resources<br />http://www.w3.org/TR/html5/the-canvas-element.html<br />http://www.html5laboratory.com/<br />http://html5de...
Upcoming SlideShare
Loading in...5
×

Html5 canvas

990

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
990
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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 />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×