Advanced Web Graphics
          with canvas
               jason harwig
I hate images..
quot;In general, if I can replace an
      image with code, I do so.quot;
                         - Wil Shipley
The Triangle Story
Uselesspickles.com
A better way (without images)
                        Images       Canvas
       diff / merge   not possible   possible
  ...
What is Canvas?
<canvas width=quot;100quot; height=quot;100quot;>

</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      ...
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
...
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 ...
Browser Plugin developed by..
          Mozilla??

• Leave No Browser Behind
• ActiveX plugin that implements canvas
quot;I don't think iPhone brings anything new to
                                    the table.

It has a great user exper...
Resources
quot;Triangles in CSSquot;                    quot;Processsing.jsquot;
uselesspickles.com                    ejo...
More Resources
quot;Mac OS X Leopard Dockquot;            quot;No Browser Left Behindquot;
furbo.org/2007/07/03/the-hig-  ...
twitter: jharwig
jason.harwig@nearinfinity.com
    nearinfinity.com/blogs


  careers@nearinfinity.com


                    ...
Advanced Web Graphics with Canvas
Advanced Web Graphics with Canvas
Advanced Web Graphics with Canvas
Advanced Web Graphics with Canvas
Advanced Web Graphics with Canvas
Advanced Web Graphics with Canvas
Advanced Web Graphics with Canvas
Advanced Web Graphics with Canvas
Advanced Web Graphics with Canvas
Advanced Web Graphics with Canvas
Advanced Web Graphics with Canvas
Advanced Web Graphics with Canvas
Advanced Web Graphics with Canvas
Upcoming SlideShare
Loading in …5
×

Advanced Web Graphics with Canvas

4,145 views

Published on

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.

Published in: Technology, Business
1 Comment
2 Likes
Statistics
Notes
  • Nice slide, Jason. I'm going to browser the resource. Thanks!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
4,145
On SlideShare
0
From Embeds
0
Number of Embeds
21
Actions
Shares
0
Downloads
50
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Advanced Web Graphics with Canvas

  1. 1. Advanced Web Graphics with canvas jason harwig
  2. 2. I hate images..
  3. 3. quot;In general, if I can replace an image with code, I do so.quot; - Wil Shipley
  4. 4. The Triangle Story
  5. 5. Uselesspickles.com
  6. 6. A better way (without images) Images Canvas diff / merge not possible possible changeability hard easy client download large small client render speed fast slow
  7. 7. What is Canvas?
  8. 8. <canvas width=quot;100quot; height=quot;100quot;> </canvas>
  9. 9. ctx = canvasElement.getContext('2d') // ctx is CanvasRenderingContext2D
  10. 10. included in HTML 5
  11. 11. browser support Safari 2.0+ Firefox 1.5+ Opera 9.0+ IE N/A
  12. 12. show me something cool
  13. 13. Polar clock
  14. 14. mario
  15. 15. mario kart
  16. 16. algorithm ink
  17. 17. processing.js
  18. 18. Mocha UI Demo
  19. 19. CVI - Christian Effenberger
  20. 20. Color picker
  21. 21. what should we make?
  22. 22. User Interface Graphics • Nice looking UI controls
  23. 23. design for programmers
  24. 24. Shadows and Highlights
  25. 25. Safari
  26. 26. Firefox
  27. 27. 220, 220, 220 197, 197, 197 150, 150, 150 222, 222, 222 201, 201, 201 158, 158, 158
  28. 28. Specular & diffuse lighting Border shadows
  29. 29. 2 pixel divide most basic shadow / highlight
  30. 30. specular highlights
  31. 31. please bare with me
  32. 32. watch your light source
  33. 33. Multiple light sources Reflection Visual complexity
  34. 34. be consistent
  35. 35. be subtle
  36. 36. canvas api
  37. 37. 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
  38. 38. Custom UI
  39. 39. Rich controls • Graphing • Star Rating control • Loading Spinner • Slider • Button on Fire
  40. 40. Other Ideas? • Icons • Password Strength Meter • Navigation Menu / Tabs
  41. 41. Drawing Text
  42. 42. • Support in Firefox 3 For Everything else: • Draw Text with DOM absolutely position • Draw text with lines manually strokeText.js (CVI)
  43. 43. lets talk about Internet Explorer..
  44. 44. • no native support today • no word from Microsoft on this changing
  45. 45. Explorer Canvas • Adapter API, canvas to VML • No support for: • globalComposition • radialGradients • drawImage with canvas • Inserting canvas element via innerHTML requires document.createElement('canvas')
  46. 46. Browser Plugin developed by.. Mozilla?? • Leave No Browser Behind • ActiveX plugin that implements canvas
  47. 47. 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.
  48. 48. 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/
  49. 49. 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
  50. 50. twitter: jharwig jason.harwig@nearinfinity.com nearinfinity.com/blogs careers@nearinfinity.com 63

×