Advanced Web Graphics with Canvas

3,959 views
3,843 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
3,959
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
49
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

×