canvas deep dive

34
Canvas Deep Dive Dave Balmer @Balmer

Upload: dave-balmer

Post on 29-Jan-2018

4.378 views

Category:

Technology


1 download

TRANSCRIPT

Page 1: Canvas Deep Dive

Canvas Deep DiveDave Balmer

@Balmer

Page 2: Canvas Deep Dive

Canvas is one of theshiny new toys in HTML5.

Page 3: Canvas Deep Dive

Actually, the canvas tag isalmost seven years old.

Page 4: Canvas Deep Dive

2004

Page 5: Canvas Deep Dive

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

2004

Page 6: Canvas Deep Dive

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

Page 7: Canvas Deep Dive

•Draw complex shapes

•Stroke and fill with colors, gradients and images

•Path-based masking

•Layering

Page 8: Canvas Deep Dive

•Text along a path

•Image filters

•Full frame animation

•Rotate, scale and skew anything

Page 9: Canvas Deep Dive

2011

Page 10: Canvas Deep Dive

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

2011

Page 11: Canvas Deep Dive

What’s the holdup?

Page 12: Canvas Deep Dive

Well, it did start as aSafari-only party.

Page 13: Canvas Deep Dive

And programmers get it,but don’t have many

clever uses for it.

Page 14: Canvas Deep Dive

It’s not designer-friendly.

Page 15: Canvas Deep Dive

Let’s change that.

Page 16: Canvas Deep Dive

Bridge the geek-gap.Explain what it does in

English.

Page 17: Canvas Deep Dive

It’s like bits of“Illustrator” & “PhotoShop”

built into your browser.

Page 18: Canvas Deep Dive

Canvas can solve problems that no other tag can.

Page 19: Canvas Deep Dive

Graph data on the fly.

(Live Demo)

Page 20: Canvas Deep Dive

Generate images to save download time.

(Live Demo)

Page 21: Canvas Deep Dive

Make user experiencesthat break outside the box.

(Live Demo)

Page 22: Canvas Deep Dive

A few important thingsto remember.

Page 23: Canvas Deep Dive

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

Page 24: Canvas Deep Dive

It’s a draw it and forget itmodel.

Page 25: Canvas Deep Dive

You can do image processing, but it’s slow.

Page 26: Canvas Deep Dive

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

apply slick CSS.

Page 27: Canvas Deep Dive

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

Page 28: Canvas Deep Dive

It’s easy to transform images and paths.

Page 29: Canvas Deep Dive

Canvas has its limitations.

Page 30: Canvas Deep Dive

Canvas is availabletoday, and on anymodern browser.

Page 31: Canvas Deep Dive

DesktopChrome, Safari, FireFox,

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

from modernizr.com

Page 32: Canvas Deep Dive

MobileiOS, Android, webOS,

BlackBerry, Opera, Bada

Page 33: Canvas Deep Dive

Canvas is thebest supported HTML5

feature out there.*

Page 34: Canvas Deep Dive

Q&A@Balmer