canvas deep dive

Canvas Deep DiveDave Balmer

@Balmer

Canvas is one of theshiny new toys in HTML5.

Actually, the canvas tag isalmost seven years old.

2004

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

2004

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?”

2011

What’s the holdup?

Well, it did start as aSafari-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 thingsto remember.

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

It’s a draw it and forget itmodel.

You can do image processing, 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 anymodern browser.

DesktopChrome, Safari, FireFox,

Opera, IE**IE9 has support, earlier versions need some help

from modernizr.com

MobileiOS, Android, webOS,

BlackBerry, Opera, Bada

Canvas is thebest supported HTML5

feature out there.*

Q&A@Balmer