Canvas Deep Dive

Canvas Deep Dive Dave Balmer @Balmer

Canvas is one of theshiny new toys in HTML5.

Actually, the canvas tag is almost seven years old.

2004 “Canvas? It’s somedrawing thing, right?”

Yes, it’s a drawing thing, but a really good one.

•Draw complex shapes• Stroke and fill with colors, gradients and images•Path-based masking• Layering

•Text along a path• Image filters• Full frame animation• Rotate, scale and skew anything

2011 “Canvas? It’s somedrawing thing, right?”

What’s the holdup?

Well, it did start as a Safari-only party.

And programmers get it, but don’t have many clever uses for it.

It’s not designer-friendly.

Let’s change that.

Bridge the geek-gap.Explain what it does in English.

It’s like bits of“Illustrator” & “PhotoShop” built into your browser.

Canvas can solve problems that no other tag can.

Graph data on the fly. (Live Demo)

Generate images to save download time. (Live Demo)

Make user experiencesthat break outside the box. (Live Demo)

A few important things to remember.

Canvas lives in the DOMbut it doesn’t have a DOM.

It’s a draw it and forget it model.

You can do imageprocessing, but it’s slow.

Canvas is like an image tag. You can layer them and apply slick CSS.

Drawing is all path based,which seems odd at first.

It’s easy to transform images and paths.

Canvas has its limitations.

Canvas is availabletoday, and on any modern browser.

Desktop Chrome, Safari, FireFox, Opera, IE**IE9 has support, earlier versions need some help from modernizr.com

Mobile iOS, Android, webOS,BlackBerry, Opera, Bada

Canvas is thebest supported HTML5 feature out there.*

Q&A@Balmer

by Dave Balmer on May 14, 2011