Working With Canvas

3,933 views

Published on

A brief explanation about canvas html5 element.

Some live examples, javascript api and processingjs explanation.

Presentation made @codebits 2009

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,933
On SlideShare
0
From Embeds
0
Number of Embeds
67
Actions
Shares
0
Downloads
98
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Working With Canvas

  1. 1. Working with Canvas
  2. 2. It's fun
  3. 4. <canvas> is an html tag
  4. 5. It is defined in HTML 5
  5. 6. and is already part of browsers
  6. 7. firefox
  7. 8. safari
  8. 9. chrome
  9. 10. opera
  10. 11. canvas is not in IE
  11. 12. but there are alternatives... canvas is not in IE
  12. 13. alternatives <ul><li>explorercanvas </li><ul><li>http://code.google.com/p/explorercanvas </li></ul></ul>
  13. 14. alternatives <ul><li>explorercanvas </li><ul><li>http://code.google.com/p/explorercanvas
  14. 15. simple to use: </li><ul><li>just need to include a script tag on header of your html header </li></ul></ul><li><!--[if IE]><script src=&quot;excanvas.js&quot;></script><![endif]--> </li></ul>
  15. 16. alternatives <ul><li>Chrome Frame </li><ul><li>http://code.google.com/chrome/chromeframe </li></ul></ul>
  16. 17. alternatives <ul><li>Chrome Frame </li><ul><li>http://code.google.com/chrome/chromeframe </li></ul><li>simple use: </li><ul><li>put meta tag in your html file </li></ul><li><meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;chrome=1&quot;> </li></ul>
  17. 18. alternatives <ul><li>Chrome Frame </li><ul><li>http://code.google.com/chrome/chromeframe </li></ul><li>simple use: </li><ul><li>put meta tag in your html file </li></ul><li><meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;chrome=1&quot;>
  18. 19. But... it's a plugin... </li></ul>
  19. 20. a little bit of history
  20. 21. <canvas></canvas> <ul><li>First introduced in browsers by Apple </li></ul>
  21. 22. <canvas></canvas> <ul><li>First introduced in browsers by Apple </li><ul><li>Powerup dashboard and Safari </li></ul></ul>
  22. 23. <canvas></canvas> <ul><li>First introduced in browsers by Apple </li><ul><li>Powerup dashboard and Safari </li></ul><li>Later on Gecko 1.8 based browsers </li></ul>
  23. 24. <canvas></canvas> <ul><li>First introduced in browsers by Apple </li><ul><li>Powerup dashboard and Safari </li></ul><li>Later on Gecko 1.8 based browsers </li><ul><li>Firefox 1.5 </li></ul></ul>
  24. 25. Canvas HTML Element <ul><li><canvas></canvas> </li><ul><li>width attribute
  25. 26. height attribute
  26. 27. all global attributes </li></ul><li>ex.:
  27. 28. <canvas id=”elm” width=”10” height=”10”></canvas> </li></ul>
  28. 29. Canvas HTMLElement Js <ul><li>interface HTMLCanvasElement : HTMLElement { </li><ul><li>attribute unsigned long width;
  29. 30. attribute unsigned long height; </li></ul><ul><li>DOMString toDataURL(in optional DOMString type, in any... args); </li></ul><ul><li>Object getContext(in DOMString contextId); </li></ul><li>}; </li></ul>
  30. 31. Canvas JavaScript API <ul><li>Starting with
  31. 32. <canvas id=”canvas” width=”200” height=”300”></canvas> </li></ul>
  32. 33. Canvas JavaScript API <ul><li>Getting the Context </li></ul>
  33. 34. Canvas JavaScript API <ul><li>Getting the Context
  34. 35. <script type=”text/javascript”> </li><ul><li>var elm = document.getElementById(“canvas”);
  35. 36. var context = elm.getContext(“2d”); </li></ul><li></script> </li></ul>
  36. 37. Canvas JavaScript API <ul><li>Simple example </li></ul>
  37. 38. Canvas JavaScript API <ul><li>Simple example </li><ul><li>Creating a gradient background </li></ul></ul>
  38. 39. Canvas JavaScript API <ul><li>Simple example </li><ul><li>Creating a gradient background
  39. 40. Draw a rectangle over it </li></ul></ul>
  40. 41. Canvas JavaScript API <ul><li>Simple example </li><ul><li>Creating a gradient background
  41. 42. Draw a rectangle over it
  42. 43. Apply stroke to rectangule </li></ul></ul>
  43. 44. Canvas JavaScript API <ul><li>Simple example </li><ul><li>Creating a gradient background
  44. 45. Draw a rectangule over it
  45. 46. Stroke the rectangule
  46. 47. Insert Text </li></ul></ul>
  47. 48. <ul><ul><li>Creating a gradient background </li></ul></ul><ul><li>var gradient =
  48. 49. context.createLinearGradient(0, 0, 200, 200); </li></ul>
  49. 50. <ul><ul><li>Creating a gradient background </li></ul></ul><ul><li>var gradient =
  50. 51. context.createLinearGradient(0, 0, 200, 200);
  51. 52. gradient.addColorStop(0, &quot;#f00&quot;); </li></ul>
  52. 53. <ul><ul><li>Creating a gradient background </li></ul></ul><ul><li>var gradient =
  53. 54. context.createLinearGradient(0, 0, 200, 200);
  54. 55. gradient.addColorStop(0, &quot;#f00&quot;);
  55. 56. gradient.addColorStop(1, &quot;#fff&quot;); </li></ul>
  56. 57. <ul><ul><li>Creating a gradient background </li></ul></ul><ul><li>var gradient =
  57. 58. context.createLinearGradient(0, 0, 200, 200);
  58. 59. gradient.addColorStop(0, &quot;#f00&quot;);
  59. 60. gradient.addColorStop(1, &quot;#fff&quot;);
  60. 61. context.fillStyle = gradient; </li></ul>
  61. 62. <ul><ul><li>Creating a gradient background </li></ul></ul><ul><li>var gradient =
  62. 63. context.createLinearGradient(0, 0, 200, 200);
  63. 64. gradient.addColorStop(0, &quot;#f00&quot;);
  64. 65. gradient.addColorStop(1, &quot;#fff&quot;);
  65. 66. context.fillStyle = gradient;
  66. 67. context.fillRect(0, 0, 200, 200); </li></ul>
  67. 68. <ul><ul><li>Creating a Rectangle </li></ul></ul><ul><li>/* Setting fill */ </li></ul>
  68. 69. <ul><ul><li>Creating a Rectangle </li></ul></ul><ul><li>/* Setting fill */
  69. 70. context.fillStyle = &quot;#0f0&quot;; </li></ul>
  70. 71. <ul><ul><li>Creating a Rectangle </li></ul></ul><ul><li>/* Setting fill */
  71. 72. context.fillStyle = &quot;#0f0&quot;;
  72. 73. context.fillRect(20, 20, 100, 100); </li></ul>
  73. 74. <ul><ul><li>Creating a Rectangle </li></ul></ul><ul><li>/* Setting fill */
  74. 75. context.fillStyle = &quot;#0f0&quot;;
  75. 76. context.fillRect(20, 20, 100, 100);
  76. 77. /* Setting stroke */ </li></ul>
  77. 78. <ul><ul><li>Creating a Rectangle </li></ul></ul><ul><li>/* Setting fill */
  78. 79. context.fillStyle = &quot;#0f0&quot;;
  79. 80. context.fillRect(20, 20, 100, 100);
  80. 81. /* Setting stroke */
  81. 82. context.strokeStyle = &quot;#00f&quot;; </li></ul>
  82. 83. <ul><ul><li>Creating a Rectangle </li></ul></ul><ul><li>/* Setting fill */
  83. 84. context.fillStyle = &quot;#0f0&quot;;
  84. 85. context.fillRect(20, 20, 100, 100);
  85. 86. /* Setting stroke */
  86. 87. context.strokeStyle = &quot;#00f&quot;;
  87. 88. context.strokeRect(20, 20, 100, 100); </li></ul>
  88. 89. Show Demo <ul><li>Source file http://dicode.org/2009/codebits.html </li></ul>
  89. 90. Canvas JavaScript API <ul><li>http://html5demos.com/video-canvas
  90. 91. by @rem </li></ul>
  91. 92. another simple example <ul><li>Put an image on the background </li></ul>
  92. 93. another simple example <ul><li>Put an image on the background
  93. 94. Create the image: </li></ul>
  94. 95. another simple example <ul><li>Put an image on the background
  95. 96. Create the image:
  96. 97. img = document.createElement(&quot;img&quot;);
  97. 98. img.src = “gift.png” </li></ul>
  98. 99. another simple example <ul><li>Put an image on the background
  99. 100. Draw it in your context </li></ul>
  100. 101. another simple example <ul><li>Put an image on the background
  101. 102. Draw it in your context:
  102. 103. ctx.drawImage(img,10,10); </li></ul>
  103. 104. another simple example <ul><li>Add follow behaviour to a rect in your canvas </li></ul>
  104. 105. another simple example <ul><li>Add follow behaviour to a rect in your canvas
  105. 106. <canvas onmousemove=”moveRect(event)”>
  106. 107. </canvas> </li></ul>
  107. 108. another simple example <ul><li>Add follow behaviour to a rect in your canvas
  108. 109. function moveRect(ev){ </li><ul><li>drawRect( </li><ul><li>ev.clientX-ev.target.offsetLeft,
  109. 110. ev.clientY-ev.target.offsetTop
  110. 111. ); </li></ul></ul><li>}
  111. 112. http://dicode.org/2009/codebits_1.html </li></ul>
  112. 113. <ul><li>Are you having fun? </li></ul>
  113. 114. <ul><li>Are you having fun?
  114. 115. Defender of the favicon!
  115. 116. http://www.p01.org/releases/DEFENDER_of_the_favicon/ </li></ul>
  116. 117. Canvas Javascript API <ul><li>Also you can: </li><ul><li>Scale
  117. 118. Transform
  118. 119. And play with images / videos
  119. 120. https://developer.mozilla.org/samples/video/chroma-key/index.xhtml </li></ul></ul>
  120. 121. Why images?
  121. 122. Why images? <ul><li>Maybe you want to edit them... </li></ul>
  122. 123. Why images? <ul><li>Maybe you want to edit them...
  123. 124. And maybe you want to integrate this </li></ul>
  124. 125. Why images? <ul><li>Maybe you want to edit them...
  125. 126. And maybe you want to integrate this </li><ul><li>With TinyMce </li></ul></ul>
  126. 127. Why images? <ul><li>Maybe you want to edit them...
  127. 128. And maybe you want to integrate this </li><ul><li>With TinyMce
  128. 129. Or Moodle </li></ul></ul>
  129. 130. Why images? <ul><li>Maybe you want to edit them...
  130. 131. And maybe you want to integrate this </li><ul><li>With TinyMce
  131. 132. Or Moodle </li></ul><li>PaintWeb
  132. 133. http://code.google.com/p/paintweb/ </li></ul>
  133. 134. So the API
  134. 135. So the API <ul><li>Is not available in the browsers in full </li></ul>
  135. 136. So the API <ul><li>Is not available in the browsers in full
  136. 137. It's a WIP </li></ul>
  137. 138. So the API <ul><li>Is not available in the browsers in full
  138. 139. It's a WIP
  139. 140. But you have path based primitives </li></ul>
  140. 141. Blob Sallad <ul><li>http://www.blobsallad.se </li></ul>
  141. 142. So the API <ul><li>Is not available in the browsers in full
  142. 143. It's a WIP
  143. 144. But you have path based primitives
  144. 145. And you have a cheat sheet :) </li></ul>
  145. 146. CheatSheet <ul><li>http://www.whatwg.org/specs/web-apps/current-work/ </li></ul>
  146. 147. Frameworks <ul><li>Processing.js
  147. 148. http://processingjs.org </li></ul>
  148. 149. Frameworks <ul><li>Processing.js
  149. 150. http://processingjs.org
  150. 151. Raphael.js
  151. 152. http://raphaeljs.com </li></ul>
  152. 153. Frameworks <ul><li>Processing.js
  153. 154. http://processingjs.org
  154. 155. Raphael.js
  155. 156. http://raphaeljs.com
  156. 157. Rgraph.js
  157. 158. http://rgraph.net </li></ul>
  158. 159. Processing
  159. 160. Processing <ul><li>Open-source programming language </li></ul>
  160. 161. Processing <ul><li>Open-source programming language
  161. 162. electronic arts and visual design communities </li></ul>
  162. 163. Processing <ul><li>Open-source programming language
  163. 164. electronic arts and visual design communities
  164. 165. Created to make simpler use of Java Graphical capabilities </li></ul>
  165. 166. Processing.js
  166. 167. Processing.js <ul><li>a port of the Processing Visualization Language </li></ul>
  167. 168. Processing.js <ul><li>a port of the Processing Visualization Language
  168. 169. On the canvas element </li></ul>
  169. 170. Processing.js
  170. 171. Processing.js <ul><li>I'm not here to teach you Processing </li></ul>
  171. 172. Processing.js <ul><li>I'm not here to teach you Processing
  172. 173. But to show that is simple </li></ul>
  173. 174. Processing.js <ul><li>I'm not here to teach you Processing
  174. 175. But to show that is simple
  175. 176. Creating simple examples </li></ul>
  176. 177. Processing.js ex. 1 <ul><li>With this:
  177. 178. void setup() {
  178. 179. size(250,250);
  179. 180. frameRate(20);
  180. 181. strokeWeight(2);
  181. 182. }
  182. 183. void draw() {
  183. 184. background(50);
  184. 185. stroke(0,156,255);
  185. 186. line(random(width),random(height),random(width),random(height));
  186. 187. } </li></ul>
  187. 188. Processing.js ex. 1 <ul><li>Processing Example on Browser
  188. 189. http://dicode.org/2009/processing_0.html </li></ul>
  189. 190. Processing.js ex. 2 <ul><li>With this:
  190. 191. size(200, 200);
  191. 192. smooth();
  192. 193. background(0);
  193. 194. StrokeWeight(10);
  194. 195. for(int i = 0; i < width; i++) {
  195. 196. float r = random(255);
  196. 197. float x = random(0, width);
  197. 198. stroke(r, 100);
  198. 199. line(i, 0, x, height);
  199. 200. } </li></ul>
  200. 201. Processing.js ex. 2
  201. 202. Thanks and good bye <ul><li>Watch out for the news that will come up </li></ul>
  202. 203. Thanks and good bye
  203. 204. Thanks and good bye <ul><li>Watch out for the news that will come up
  204. 205. LibSAPO.JS - http://libsapojs.blogs.sapo.pt </li></ul>
  205. 206. Thanks and good bye <ul><li>Watch out for the news that will come up
  206. 207. LibSAPO.JS - http://libsapojs.blogs.sapo.pt
  207. 208. @dicode
  208. 209. http://dicode.org
  209. 210. [email_address] </li></ul>

×