Working With Canvas
Download as ODP, PDF0 likes1,649 views
The document explains the HTML5 <canvas> element, its browser support, and the need for alternatives in Internet Explorer. It provides examples of using the canvas API, including creating gradients, drawing shapes, and manipulating images. Additionally, it mentions various frameworks like Processing.js and Raphael.js that enhance canvas capabilities and offers links to resources for further exploration.
![simple to use: just need to include a script tag on header of your html header <!--[if IE]><script src="excanvas.js"></script><![endif]-->](https://image.slidesharecdn.com/workingwithcanvas-091204120923-phpapp02/85/Working-With-Canvas-15-320.jpg)
Working With Canvas
- 2. It's fun
- 4. <canvas> is an html tag
- 5. It is defined in HTML 5
- 6. and is already part of browsers
- 7. firefox
- 8. safari
- 9. chrome
- 10. opera
- 11. canvas is not in IE
- 12. but there are alternatives... canvas is not in IE
- 15. simple to use: just need to include a script tag on header of your html header <!--[if IE]><script src="excanvas.js"></script><![endif]-->
- 16. alternatives Chrome Frame http://code.google.com/chrome/chromeframe
- 17. alternatives Chrome Frame http://code.google.com/chrome/chromeframe simple use: put meta tag in your html file <meta http-equiv="X-UA-Compatible" content="chrome=1">
- 18. alternatives Chrome Frame http://code.google.com/chrome/chromeframe simple use: put meta tag in your html file <meta http-equiv="X-UA-Compatible" content="chrome=1">
- 19. But... it's a plugin...
- 20. a little bit of history
- 21. <canvas></canvas> First introduced in browsers by Apple
- 22. <canvas></canvas> First introduced in browsers by Apple Powerup dashboard and Safari
- 23. <canvas></canvas> First introduced in browsers by Apple Powerup dashboard and Safari Later on Gecko 1.8 based browsers
- 24. <canvas></canvas> First introduced in browsers by Apple Powerup dashboard and Safari Later on Gecko 1.8 based browsers Firefox 1.5
- 25. Canvas HTML Element <canvas></canvas> width attribute
- 26. height attribute
- 27. all global attributes ex.:
- 28. <canvas id=”elm” width=”10” height=”10”></canvas>
- 29. Canvas HTMLElement Js interface HTMLCanvasElement : HTMLElement { attribute unsigned long width;
- 30. attribute unsigned long height; DOMString toDataURL(in optional DOMString type, in any... args); Object getContext(in DOMString contextId); };
- 31. Canvas JavaScript API Starting with
- 32. <canvas id=”canvas” width=”200” height=”300”></canvas>
- 33. Canvas JavaScript API Getting the Context
- 34. Canvas JavaScript API Getting the Context
- 35. <script type=”text/javascript”> var elm = document.getElementById(“canvas”);
- 36. var context = elm.getContext(“2d”); </script>
- 37. Canvas JavaScript API Simple example
- 38. Canvas JavaScript API Simple example Creating a gradient background
- 39. Canvas JavaScript API Simple example Creating a gradient background
- 40. Draw a rectangle over it
- 41. Canvas JavaScript API Simple example Creating a gradient background
- 42. Draw a rectangle over it
- 43. Apply stroke to rectangule
- 44. Canvas JavaScript API Simple example Creating a gradient background
- 45. Draw a rectangule over it
- 47. Insert Text
- 48. Creating a gradient background var gradient =
- 49. context.createLinearGradient(0, 0, 200, 200);
- 50. Creating a gradient background var gradient =
- 51. context.createLinearGradient(0, 0, 200, 200);
- 53. Creating a gradient background var gradient =
- 54. context.createLinearGradient(0, 0, 200, 200);
- 57. Creating a gradient background var gradient =
- 58. context.createLinearGradient(0, 0, 200, 200);
- 62. Creating a gradient background var gradient =
- 63. context.createLinearGradient(0, 0, 200, 200);
- 67. context.fillRect(0, 0, 200, 200);
- 68. Creating a Rectangle /* Setting fill */
- 69. Creating a Rectangle /* Setting fill */
- 71. Creating a Rectangle /* Setting fill */
- 73. context.fillRect(20, 20, 100, 100);
- 74. Creating a Rectangle /* Setting fill */
- 76. context.fillRect(20, 20, 100, 100);
- 77. /* Setting stroke */
- 78. Creating a Rectangle /* Setting fill */
- 80. context.fillRect(20, 20, 100, 100);
- 81. /* Setting stroke */
- 83. Creating a Rectangle /* Setting fill */
- 85. context.fillRect(20, 20, 100, 100);
- 86. /* Setting stroke */
- 88. context.strokeRect(20, 20, 100, 100);
- 89. Show Demo Source file http://dicode.org/2009/codebits.html
- 90. Canvas JavaScript API http://html5demos.com/video-canvas
- 91. by @rem
- 92. another simple example Put an image on the background
- 93. another simple example Put an image on the background
- 95. another simple example Put an image on the background
- 99. another simple example Put an image on the background
- 100. Draw it in your context
- 101. another simple example Put an image on the background
- 102. Draw it in your context:
- 104. another simple example Add follow behaviour to a rect in your canvas
- 105. another simple example Add follow behaviour to a rect in your canvas
- 107. </canvas>
- 108. another simple example Add follow behaviour to a rect in your canvas
- 109. function moveRect(ev){ drawRect( ev.clientX-ev.target.offsetLeft,
- 111. ); }
- 113. Are you having fun?
- 114. Are you having fun?
- 115. Defender of the favicon!
- 117. Canvas Javascript API Also you can: Scale
- 118. Transform
- 119. And play with images / videos
- 121. Why images?
- 122. Why images? Maybe you want to edit them...
- 123. Why images? Maybe you want to edit them...
- 124. And maybe you want to integrate this
- 125. Why images? Maybe you want to edit them...
- 126. And maybe you want to integrate this With TinyMce
- 127. Why images? Maybe you want to edit them...
- 128. And maybe you want to integrate this With TinyMce
- 129. Or Moodle
- 130. Why images? Maybe you want to edit them...
- 131. And maybe you want to integrate this With TinyMce
- 132. Or Moodle PaintWeb
- 134. So the API
- 135. So the API Is not available in the browsers in full
- 136. So the API Is not available in the browsers in full
- 137. It's a WIP
- 138. So the API Is not available in the browsers in full
- 139. It's a WIP
- 140. But you have path based primitives
- 142. So the API Is not available in the browsers in full
- 143. It's a WIP
- 144. But you have path based primitives
- 145. And you have a cheat sheet :)
- 151. Raphael.js
- 155. Raphael.js
- 157. Rgraph.js
- 159. Processing
- 160. Processing Open-source programming language
- 161. Processing Open-source programming language
- 162. electronic arts and visual design communities
- 163. Processing Open-source programming language
- 164. electronic arts and visual design communities
- 165. Created to make simpler use of Java Graphical capabilities
- 166. Processing.js
- 167. Processing.js a port of the Processing Visualization Language
- 168. Processing.js a port of the Processing Visualization Language
- 169. On the canvas element
- 170. Processing.js
- 171. Processing.js I'm not here to teach you Processing
- 172. Processing.js I'm not here to teach you Processing
- 173. But to show that is simple
- 174. Processing.js I'm not here to teach you Processing
- 175. But to show that is simple
- 177. Processing.js ex. 1 With this:
- 178. void setup() {
- 179. size(250,250);
- 180. frameRate(20);
- 181. strokeWeight(2);
- 182. }
- 183. void draw() {
- 184. background(50);
- 185. stroke(0,156,255);
- 187. }
- 188. Processing.js ex. 1 Processing Example on Browser
- 190. Processing.js ex. 2 With this:
- 191. size(200, 200);
- 192. smooth();
- 193. background(0);
- 194. StrokeWeight(10);
- 195. for(int i = 0; i < width; i++) {
- 196. float r = random(255);
- 197. float x = random(0, width);
- 198. stroke(r, 100);
- 199. line(i, 0, x, height);
- 200. }
- 201. Processing.js ex. 2
- 202. Thanks and good bye Watch out for the news that will come up
- 203. Thanks and good bye
- 204. Thanks and good bye Watch out for the news that will come up
- 206. Thanks and good bye Watch out for the news that will come up
- 208. @dicode
- 210. [email_address]