HTML 5 Canvas Deep Dive

Attendee prerequisites for this tutorial are listed below.

Canvas is a 2D drawing API recently added to HTML and supported by most browser (even Internet Explorer 9 beta). Canvas allows you to draw anything you want directly in the webbrowser without the use of plugins like Flash or Java. With a deceptively simple API, Canvas has the ability to revolutionize how we build web applications for all devices, not just desktops. This session is a three hour workshop that will deep dive into Canvas, starting with the basics and progressing into real world applications. Finally we will take a look at some experimental edges of Canvas, such as webcam and audio visualization.

Outline

• What is Canvas?
  • History
  • How is it different than SVG, CSS, and DOM animation?
  • Browser support

• Drawing the basics:
  • rectangles and paths
  • filling vs stroking
  • images
  • complex fills (textures, gradients, etc.)

• Animation:
  • Animation is just drawing a whole lot
  • frame by frame animation
  • programmatic animation
  • particle simulators
  • performance and partial redraw

• Pixel Buffers
  • generative textures
  • photo adjustments
  • PNG encoding on the fly

• Real World Usage:
  • charts and graphs
  • games
  • custom fonts
  • interactive books

• Canvas on Mobile devices
  • mobile browser support and limitations
  • performance considerations
  • PolyFill: using Canvas to implement missing features

• Tools:
  • JavaScript helper APIs
  • SVG on Canvas
  • Drawing and animation visual tools

• Experimental:
  • Buffer to Buffer copying for extreme effects
  • Audio visualization with Mozilla
  • Pseudo 3D
  • WebCam effects

PREREQUISITES

Attendees should bring a laptop with a recent webkit browser installed (Chrome or Safari) and their favorite text editor. We will be directly editing HTML and testing it.

QUESTIONS for the speaker?: Use the “Leave a Comment or Question” section at the bottom to address them.