advanced web graphics with canvas

63
Advanced Web Graphics with canvas jason harwig

Upload: jason-harwig

Post on 11-May-2015

3.640 views

Category:

Technology


5 download

DESCRIPTION

Talk given at The Rich Web Experience 2008. Check out blog for more demos, and sample code. I hate images. Not pictures or icons, mind you, but user interface graphics. I think that small gradient PNGs that web developers set to repeat are the spacer gifs of today. Images are hard to change, and slower to download.

TRANSCRIPT

Page 1: Advanced Web Graphics with Canvas

Advanced Web Graphics

with canvas

jason harwig

Page 2: Advanced Web Graphics with Canvas

I hate images...

Page 3: Advanced Web Graphics with Canvas

"In general, if I can replace an

image with code, I do so."

- Wil Shipley

Page 4: Advanced Web Graphics with Canvas

The Triangle Story

Page 5: Advanced Web Graphics with Canvas
Page 6: Advanced Web Graphics with Canvas

Uselesspickles.com

Page 7: Advanced Web Graphics with Canvas
Page 8: Advanced Web Graphics with Canvas

A better way (without images)

Images Canvas

diff / merge

changeability

client download

client render speed

not possible possible

hard easy

large small

fast slow

Page 9: Advanced Web Graphics with Canvas

What is Canvas?

Page 10: Advanced Web Graphics with Canvas

<canvas width="100" height="100">

</canvas>

Page 11: Advanced Web Graphics with Canvas

ctx = canvasElement.getContext('2d')

// ctx is CanvasRenderingContext2D

Page 12: Advanced Web Graphics with Canvas
Page 13: Advanced Web Graphics with Canvas
Page 14: Advanced Web Graphics with Canvas
Page 15: Advanced Web Graphics with Canvas

included in HTML 5

Page 16: Advanced Web Graphics with Canvas

browser support

Safari 2.0+

Firefox 1.5+

Opera 9.0+

IE N/A

Page 17: Advanced Web Graphics with Canvas

show me something cool

Page 18: Advanced Web Graphics with Canvas

Polar clock

Page 19: Advanced Web Graphics with Canvas

mario

Page 20: Advanced Web Graphics with Canvas

mario kart

Page 21: Advanced Web Graphics with Canvas

algorithm ink

Page 22: Advanced Web Graphics with Canvas

processing.js

Page 23: Advanced Web Graphics with Canvas

Mocha UI Demo

Page 24: Advanced Web Graphics with Canvas
Page 25: Advanced Web Graphics with Canvas

CVI - Christian Effenberger

Page 26: Advanced Web Graphics with Canvas

Color picker

Page 27: Advanced Web Graphics with Canvas

what should we make?

Page 28: Advanced Web Graphics with Canvas

User Interface Graphics

• Nice looking UI controls

Page 29: Advanced Web Graphics with Canvas

design for programmers

Page 30: Advanced Web Graphics with Canvas

Shadows and Highlights

Page 31: Advanced Web Graphics with Canvas

Safari

Page 32: Advanced Web Graphics with Canvas

Firefox

Page 33: Advanced Web Graphics with Canvas

220, 220, 220197, 197, 197

150, 150, 150

222, 222, 222201, 201, 201

158, 158, 158

Page 34: Advanced Web Graphics with Canvas

Specular & diffuse lighting

Border shadows

Page 35: Advanced Web Graphics with Canvas

2 pixel divide

most basic shadow / highlight

Page 36: Advanced Web Graphics with Canvas
Page 37: Advanced Web Graphics with Canvas

specular highlights

Page 38: Advanced Web Graphics with Canvas
Page 39: Advanced Web Graphics with Canvas
Page 40: Advanced Web Graphics with Canvas
Page 41: Advanced Web Graphics with Canvas

please bare with me

Page 42: Advanced Web Graphics with Canvas
Page 43: Advanced Web Graphics with Canvas

watch your light source

Page 44: Advanced Web Graphics with Canvas

Multiple light sources

Reflection

Visual complexity

Page 45: Advanced Web Graphics with Canvas

be consistent

Page 46: Advanced Web Graphics with Canvas

be subtle

Page 47: Advanced Web Graphics with Canvas
Page 48: Advanced Web Graphics with Canvas
Page 49: Advanced Web Graphics with Canvas

canvas api

Page 50: Advanced Web Graphics with Canvas

save

restore

scale

rotate

translate

transformsetTransform

clearRect

fillRect

strokeRect

beginPath

closePath

moveTo

lineTo

quadratic

CurveTo

bezierCurveTo

arcTo

rect

arc

fill

stroke

clip

drawImagecreateLinearGradient

createRadialGradient

Page 51: Advanced Web Graphics with Canvas

Custom UI

Page 52: Advanced Web Graphics with Canvas

Rich controls

• Graphing

• Star Rating control

• Loading Spinner

• Slider

• Button on Fire

Page 53: Advanced Web Graphics with Canvas

Other Ideas?

• Icons

• Password Strength Meter

• Navigation Menu / Tabs

Page 54: Advanced Web Graphics with Canvas

Drawing Text

Page 55: Advanced Web Graphics with Canvas

• Support in Firefox 3

For Everything else:

• Draw Text with DOM absolutely position

• Draw text with lines manually

strokeText.js (CVI)

Page 56: Advanced Web Graphics with Canvas

lets talk about Internet

Explorer...

Page 57: Advanced Web Graphics with Canvas

• no native support today

• no word from Microsoft on this changing

Page 58: Advanced Web Graphics with Canvas

Explorer Canvas

• Adapter API, canvas to VML

• No support for:

• globalComposition

• radialGradients

• drawImage with canvas

• Inserting canvas element via innerHTML requires document.createElement('canvas')

Page 59: Advanced Web Graphics with Canvas

Browser Plugin developed by...

Mozilla??

• Leave No Browser Behind

• ActiveX plugin that implements canvas

Page 60: Advanced Web Graphics with Canvas

"I don't think iPhone brings anything new to

the table.

It has a great user experience, but that's all."

Manjit Singh, CIO at Chiquita Brands International Inc.

Page 61: Advanced Web Graphics with Canvas

Resources

"Triangles in CSS"uselesspickles.com

"Polar Clock"snipersystems.co.nz/community/polarclock/tutorial.html

"JavaScript Games"nihilogic.dk/labs/javascript-games/

"Algorithm Ink"azarask.in/projects/algorithm-ink/

"Processsing.js"ejohn.org/blog/processingjs/

"Mocha UI"mochaui.com/demo/

"CVI"netzgesta.de/cvi/

"Color Picker"sweetvision.com/2007/03/25/enhanceing-the-javascript-color-picker-with-the-canvas-element/

Page 62: Advanced Web Graphics with Canvas

More Resources

"Mac OS X Leopard Dock"furbo.org/2007/07/03/the-hig-still-matters-even-with-special-effects/

"Navigation Menu Example"zdotb.com

"strokeText.js"netzgesta.de/dev/text

"Explorer Canvas"excanvas.sourceforge.net

"No Browser Left Behind"blog.vlad1.com/2008/07/30/no-browser-left-behind

"Mozilla Canvas Tutorial"developer.mozilla.org/En/Canvas_tutorial

Page 63: Advanced Web Graphics with Canvas

twitter: jharwig

[email protected]

nearinfinity.com/blogs

[email protected]

63