HTML 5 Canvas Deep Dive (SOLD OUT)

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

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

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

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

• generative textures
• photo adjustments * PNG encoding on the fly

• charts and graphs
• games
• custom fonts
• interactive books

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

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

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