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 not possible possible
changeability hard easy
client download large small
client render speed 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, 220
197, 197, 197
150, 150, 150
222, 222, 222
201, 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 strokeRect arcTo
restore beginPath rect
scale closePath arc
rotate moveTo fill
translate lineTo stroke
transform quadratic clip
setTransform CurveTo drawImage
clearRect bezier createLinearGradient
fillRect CurveTo 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\" \"Processsing.js\"
uselesspickles.com ejohn.org/blog/processingjs/
\"Polar Clock\" \"Mocha UI\"
snipersystems.co.nz/community/ mochaui.com/demo/
polarclock/tutorial.html
\"CVI\"
\"JavaScript Games\" netzgesta.de/cvi/
nihilogic.dk/labs/javascript-games/
\"Color Picker\"
\"Algorithm Ink\" sweetvision.com/2007/03/25/
azarask.in/projects/algorithm-ink/ enhanceing-the-javascript-color-
picker-with-the-canvas-element/

More Resources
\"Mac OS X Leopard Dock\" \"No Browser Left Behind\"
furbo.org/2007/07/03/the-hig- blog.vlad1.com/2008/07/30/no-
still-matters-even-with-special- browser-left-behind
effects/
\"Mozilla Canvas Tutorial\"
\"Navigation Menu Example\" developer.mozilla.org/En/
zdotb.com Canvas_tutorial
\"strokeText.js\"
netzgesta.de/dev/text
\"Explorer Canvas\"
excanvas.sourceforge.net

twitter: jharwig
jason.harwig@nearinfinity.com
nearinfinity.com/blogs
careers@nearinfinity.com
63