Sponsors

  • Microsoft
  • Nebula
  • Google
  • SugarCRM
  • Facebook
  • HP
  • Intel
  • Rackspace Hosting
  • WSO2
  • Alfresco
  • BlackBerry
  • CUBRID
  • Dell
  • eBay
  • Heroku
  • InfiniteGraph
  • JBoss
  • LeaseWeb
  • Liferay
  • Media Temple, Inc.
  • OpenShift
  • Oracle
  • Percona
  • Puppet Labs
  • Qualcomm Innovation Center, Inc.
  • Rentrak
  • Silicon Mechanics
  • SoftLayer Technologies, Inc.
  • SourceGear
  • Urban Airship
  • Vertica
  • VMware
  • (mt) Media Temple, Inc.

Sponsorship Opportunities

For information on exhibition and sponsorship opportunities at the convention, contact Sharon Cordesse at scordesse@oreilly.com

Download the OSCON Sponsor/Exhibitor Prospectus

Contact Us

View a complete list of OSCON contacts

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.

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.

Photo of Joshua Marinacci

Joshua Marinacci

Nokia

Ask me about HTML Canvas, mobile apps, and visual design. Or 3D printing and wearable computing. Or just ask me to rant about Java.

Josh Marinacci is a blogger and co-author of “Swing Hacks” and “Building Mobile Apps with Java” for O’Reilly. He is currently a researcher for Nokia.

He previously 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 & great user experiences.

Robert Burdick

Palm

Comments on this page are now closed.

Comments

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

Sure: the full presentation is on my blog here: goo.gl/0GtPr

Picture of Gauthier de Valensart
Gauthier de Valensart
08/16/2011 4:47am PDT

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

Thank you