HTML 5 Canvas Deep Dive

Javascript & HTML5
Location: Portland 251
Average rating: ****.
(4.00, 10 ratings)

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.


  • 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


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.

Photo of Joshua Marinacci

Joshua Marinacci


Josh Marinacci is a blogger and co-author of Swing Hacks and Building Mobile Apps with Java for O’Reilly Media. He is currently the technical marketing manager for PubNub. He previously was a researcher for Nokia, worked on WebOS at Palm, and JavaFX, Swing, NetBeans, and the Java Store at Sun Microsystems. Josh lives in Eugene, Oregon and is passionate about open source technology and great user experiences. Ask Josh about HTML Canvas, mobile apps, and visual design. Or 3D printing and wearable computing. Or just ask him to rant about Java.

Robert Burdick


Comments on this page are now closed.


Picture of Joshua Marinacci
Joshua Marinacci
08/16/2011 4:09am PDT

Sure: the full presentation is on my blog here:

Picture of Gauthier de Valensart
Gauthier de Valensart
08/15/2011 9:47pm PDT

Is there any way to get your Oscon 2011 presentation slides?

Thank you