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.

1. Advanced Web Graphics
with canvas
jason harwig

2. I hate images..

3. quot;In general, if I can replace an
image with code, I do so.quot;
- Wil Shipley

4. The Triangle Story

6. Uselesspickles.com

8. A better way (without images)
Images Canvas
diff / merge not possible possible
changeability hard easy
client download large small
client render speed fast slow

9. What is Canvas?

10. <canvas width=quot;100quot; height=quot;100quot;>
</canvas>

11. ctx = canvasElement.getContext('2d')
// ctx is CanvasRenderingContext2D

15. included in HTML 5

16. browser support
Safari 2.0+
Firefox 1.5+
Opera 9.0+
IE N/A

17. show me something cool

18. Polar clock

19. mario

20. mario kart

21. algorithm ink

22. processing.js

23. Mocha UI Demo

25. CVI - Christian Effenberger

26. Color picker

27. what should we make?

28. User Interface Graphics
• Nice looking UI controls

29. design for programmers

30. Shadows and Highlights

31. Safari

32. Firefox

33. 220, 220, 220
197, 197, 197
150, 150, 150
222, 222, 222
201, 201, 201
158, 158, 158

34. Specular & diffuse lighting
Border shadows

35. 2 pixel divide
most basic shadow / highlight

37. specular highlights

41. please bare with me

43. watch your light source

44. Multiple light sources
Reflection
Visual complexity

45. be consistent

46. be subtle

49. canvas api

50. 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

51. Custom UI

52. Rich controls
• Graphing
• Star Rating control
• Loading Spinner
• Slider
• Button on Fire

53. Other Ideas?
• Icons
• Password Strength Meter
• Navigation Menu / Tabs

54. Drawing Text

55. • Support in Firefox 3
For Everything else:
• Draw Text with DOM absolutely position
• Draw text with lines manually
strokeText.js (CVI)

56. lets talk about Internet
Explorer..

57. • no native support today
• no word from Microsoft on this changing

58. Explorer Canvas
• Adapter API, canvas to VML
• No support for:
• globalComposition
• radialGradients
• drawImage with canvas
• Inserting canvas element via innerHTML
requires document.createElement('canvas')

59. Browser Plugin developed by..
Mozilla??
• Leave No Browser Behind
• ActiveX plugin that implements canvas

60. quot;I don't think iPhone brings anything new to
the table.
It has a great user experience, but that's all.quot;
Manjit Singh, CIO at Chiquita Brands International Inc.

61. Resources
quot;Triangles in CSSquot; quot;Processsing.jsquot;
uselesspickles.com ejohn.org/blog/processingjs/
quot;Polar Clockquot; quot;Mocha UIquot;
snipersystems.co.nz/community/ mochaui.com/demo/
polarclock/tutorial.html
quot;CVIquot;
quot;JavaScript Gamesquot; netzgesta.de/cvi/
nihilogic.dk/labs/javascript-games/
quot;Color Pickerquot;
quot;Algorithm Inkquot; sweetvision.com/2007/03/25/
azarask.in/projects/algorithm-ink/ enhanceing-the-javascript-color-
picker-with-the-canvas-element/

62. More Resources
quot;Mac OS X Leopard Dockquot; quot;No Browser Left Behindquot;
furbo.org/2007/07/03/the-hig- blog.vlad1.com/2008/07/30/no-
still-matters-even-with-special- browser-left-behind
effects/
quot;Mozilla Canvas Tutorialquot;
quot;Navigation Menu Examplequot; developer.mozilla.org/En/
zdotb.com Canvas_tutorial
quot;strokeText.jsquot;
netzgesta.de/dev/text
quot;Explorer Canvasquot;
excanvas.sourceforge.net

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