HTML 5 Canvas Deep Dive (SOLD OUT)

Javascript & HTML5
Location: Portland 251
Average rating: ***..
(3.41, 22 ratings)

The Canvas element is one of the most exciting features added to HTML since the marquee tag. You can draw 2D graphics, implement special effects, edit photos at the pixel level, and bring rich animation to both desktop and mobile browsers alike; no plugins required.

In this 3 hour hands on workshop we will deep dive into Canvas, from basic shape drawing to advanced pixel buffer effects. We will cover real world usage, examine canvas support on mobile devices, and play with a few experimental effects. By the end of the session you will be ready to use Canvas in your own applications and websites and have built a functioning video game with graphics and effects.

This is a technical talk. Basic knowledge of JavaScript programming is required.

The Canvas element is one of the most exciting features added to HTML since the marquee tag. You can draw 2D graphics, implement special effects, edit photos at the pixel level, and bring rich animation to both desktop and mobile browsers alike; no plugins required! This workshop will cover Canvas in depth, from basic shapes to advanced pixel buffer effects, and even a few experimental APIs.

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?
  • WebGL
  • 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
  • WebGL
  • WebCam effects
Photo of Joshua Marinacci

Joshua Marinacci

Nokia

Ask me about HTML Canvas, GUI toolkits, and visual design. Or ask me to rant about Java stuff.

Josh Marinacci is a blogger and co-author of Swing Hacks for O’Reilly. He is currently a Developer Advocate for the webOS at HP.
He previously worked on JavaFX, Swing, NetBeans, and client lead for the Java Store at Sun Microsystems.

Josh lives in Eugene, Oregon and is passionate about open source technology & great user interfaces. He uses a Palm Pre 3, HP TouchPad, and Nikon D50 SLR to spread understanding of great design in software.

Comments on this page are now closed.

Comments

Picture of Joshua Marinacci
Joshua Marinacci
07/28/2012 4:45pm PDT

And here is the permanent link to read the book.

joshondesign.com/p/books/ca...

Picture of Joshua Marinacci
Joshua Marinacci
07/28/2012 4:44pm PDT

Here is the permanent link to the ebook. It will be updated in place with bug fixes and new content from the Github project.

github.com/joshmarinacci/ca...

Picture of Joshua Marinacci
Joshua Marinacci
07/24/2012 10:30am PDT

The contents of this tutorial are available here.

hudson.joshy.org:9001/job/c...

I have also open sourced the entire ebook, available here:

joshondesign.com/2012/07/24...

Sponsors

For information on exhibition and sponsorship opportunities at the conference, contact Sharon Cordesse at (707) 827-7065 or scordesse@oreilly.com.

View a complete list of OSCON contacts