Advanced Web Graphics with Canvas
2 likes1,511 views
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.
Advanced Web Graphics with Canvas
- 1. Advanced Web Graphics with canvas jason harwig
- 3. quot;In general, if I can replace an image with code, I do so.quot; - Wil Shipley
- 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
- 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
- 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
- 41. please bare with me
- 43. watch your light source
- 44. Multiple light sources Re鍖ection Visual complexity
- 45. be consistent
- 46. be subtle
- 49. canvas api
- 50. save strokeRect arcTo restore beginPath rect scale closePath arc rotate moveTo 鍖ll translate lineTo stroke transform quadratic clip setTransform CurveTo drawImage clearRect bezier createLinearGradient 鍖llRect CurveTo createRadialGradient
- 51. Custom UI
- 52. Rich controls Graphing Star Rating control Loading Spinner 際際滷r 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@nearin鍖nity.com nearin鍖nity.com/blogs careers@nearin鍖nity.com 63