Advanced Web Graphics

with canvas

jason harwig

I hate images...

"In general, if I can replace an

image with code, I do so."

- Wil Shipley

The Triangle Story

Uselesspickles.com

A better way (without images)

Images Canvas

diff / merge

changeability

client download

client render speed

not possible possible

hard easy

large small

fast slow

What is Canvas?

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

</canvas>

ctx = canvasElement.getContext('2d')

// ctx is CanvasRenderingContext2D

included in HTML 5

browser support

Safari 2.0+

Firefox 1.5+

Opera 9.0+

IE N/A

show me something cool

Polar clock

mario

mario kart

algorithm ink

processing.js

Mocha UI Demo

CVI - Christian Effenberger

Color picker

what should we make?

User Interface Graphics

• Nice looking UI controls

design for programmers

Shadows and Highlights

Safari

Firefox

220, 220, 220197, 197, 197

150, 150, 150

222, 222, 222201, 201, 201

158, 158, 158

Specular & diffuse lighting

Border shadows

2 pixel divide

most basic shadow / highlight

specular highlights

please bare with me

watch your light source

Multiple light sources

Reflection

Visual complexity

be consistent

be subtle

canvas api

save

restore

scale

rotate

translate

transformsetTransform

clearRect

fillRect

strokeRect

beginPath

closePath

moveTo

lineTo

quadratic

CurveTo

bezierCurveTo

arcTo

rect

arc

fill

stroke

clip

drawImagecreateLinearGradient

createRadialGradient

Custom UI

Rich controls

• Graphing

• Star Rating control

• Loading Spinner

• Slider

• Button on Fire

Other Ideas?

• Icons

• Password Strength Meter

• Navigation Menu / Tabs

Drawing Text

• Support in Firefox 3

For Everything else:

• Draw Text with DOM absolutely position

• Draw text with lines manually

strokeText.js (CVI)

lets talk about Internet

Explorer...

• no native support today

• no word from Microsoft on this changing

Explorer Canvas

• Adapter API, canvas to VML

• No support for:

• globalComposition

• radialGradients

• drawImage with canvas

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

Browser Plugin developed by...

Mozilla??

• Leave No Browser Behind

• ActiveX plugin that implements 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.

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/

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

twitter: jharwig

jason.harwig@nearinfinity.com

nearinfinity.com/blogs

careers@nearinfinity.com

63