• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Html5 canvas
 

Html5 canvas

on

  • 1,199 views

 

Statistics

Views

Total Views
1,199
Views on SlideShare
1,199
Embed Views
0

Actions

Likes
0
Downloads
9
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Html5 canvas Html5 canvas Presentation Transcript

    • HTML5 Canvas
    • 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
    • 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
    • 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
    • Disadvantages
      Purely scripted
      No WYSIWYG or IDE, officially
      Resource dependent
      Draws as a bitmap
      Zooming in on the canvas shows pixelation
    • 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
    • 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
    • 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/
    • Questions?
      Please feel free to ask any questions
    • 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/