Loading...

HTML Canvas
JavaScript FileReader


http://briangrinstead.com/canvasslides

Press →

Canvas

  • An HTML element for displaying bitmapped graphics
  • Originally created by Apple for their dashboard widgets
  • Proposed WHAT Working Group in "Web Applications 1.0" which turned into the W3C HTML 5 Standard (http://diveintohtml5.org/past.html)
  • JavaScript access and API
<canvas width='300' height='300'></canvas>

Canvas - Compatibility

HTML canvas compatibility
http://caniuse.com/#feat=canvas as of 12/15/2010

Canvas - Lines, Shapes, and Text

http://www.html5canvastutorials.com/ has some good basic tutorials.

Canvas - Images

You can load and manipulate images inside a canvas

Yes, we let him go free by a creek (far away from the house)

Canvas - Games

Ability to interact directly with 2D bitmap context opens up the ability to make games in Canvas/JS instead of Flash or Java

Canvas vs SVG

SVG (Vector)

Canvas (Raster)

  • Scalable or interactive
  • Mouse events
  • SVG Edit
  • Pixel based drawing
  • Color picker
  • Performance
A fully featured drawing application might need to make use of both: SVG To Canvas and Back

Canvas - Video

Canvas - Resources

Canvas - More Demos

FileReader

Provides methods to read files into memory, and access the data using progress events.

http://www.w3.org/TR/FileAPI/#FileReader-interface

void abort();
void readAsArrayBuffer(in Blob blob); Unimplemented
void readAsBinaryString(in Blob blob);
void readAsDataURL(in Blob blob);
void readAsText(in Blob blob, [optional] in DOMString encoding);

FileReader - Compatibility

http://caniuse.com/#feat=fileapi as of 12/15/2010

FileReader - Usage

FileReader - Resources

FileReader + Canvas

Combine both technologies to allow direct image access + manipulation

Instant Sprite

CSS Sprite Generator using Canvas/FileReader (entirely in browser)