Downloaded 100 times
![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)
![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/75/Working-With-Canvas-15-2048.jpg)
Uploaded byDiogo Antunes
Working With Canvas
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.
More Related Content
Working With Canvas
- 1.
- 2.
- 3.
- 4. <canvas> is anhtml tag
- 5. It is definedin HTML 5
- 6. and is alreadypart of browsers
- 7.
- 8.
- 9.
- 10.
- 11. canvas is notin IE
- 12. but there arealternatives... canvas is not in IE
- 13.
- 14.
- 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 Framehttp://code.google.com/chrome/chromeframe
- 17. alternatives Chrome Framehttp://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 Framehttp://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 aplugin...
- 20. a little bitof history
- 21. <canvas></canvas> First introducedin browsers by Apple
- 22. <canvas></canvas> First introducedin browsers by Apple Powerup dashboard and Safari
- 23. <canvas></canvas> First introducedin browsers by Apple Powerup dashboard and Safari Later on Gecko 1.8 based browsers
- 24. <canvas></canvas> First introducedin 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.
- 27.
- 28. <canvas id=”elm” width=”10”height=”10”></canvas>
- 29. Canvas HTMLElement Jsinterface HTMLCanvasElement : HTMLElement { attribute unsigned long width;
- 30. attribute unsigned longheight; DOMString toDataURL(in optional DOMString type, in any... args); Object getContext(in DOMString contextId); };
- 31. Canvas JavaScript APIStarting with
- 32. <canvas id=”canvas” width=”200”height=”300”></canvas>
- 33. Canvas JavaScript APIGetting the Context
- 34. Canvas JavaScript APIGetting the Context
- 35. <script type=”text/javascript”> varelm = document.getElementById(“canvas”);
- 36. var context =elm.getContext(“2d”); </script>
- 37. Canvas JavaScript APISimple example
- 38. Canvas JavaScript APISimple example Creating a gradient background
- 39. Canvas JavaScript APISimple example Creating a gradient background
- 40. Draw a rectangleover it
- 41. Canvas JavaScript APISimple example Creating a gradient background
- 42. Draw a rectangleover it
- 43. Apply stroke torectangule
- 44. Canvas JavaScript APISimple example Creating a gradient background
- 45. Draw a rectanguleover it
- 46.
- 47.
- 48. Creating a gradientbackground var gradient =
- 49.
- 50. Creating a gradientbackground var gradient =
- 51.
- 52.
- 53. Creating a gradientbackground var gradient =
- 54.
- 55.
- 56.
- 57. Creating a gradientbackground var gradient =
- 58.
- 59.
- 60.
- 61.
- 62. Creating a gradientbackground var gradient =
- 63.
- 64.
- 65.
- 66.
- 67.
- 68. Creating a Rectangle/* Setting fill */
- 69. Creating a Rectangle/* Setting fill */
- 70.
- 71. Creating a Rectangle/* Setting fill */
- 72.
- 73.
- 74. Creating a Rectangle/* Setting fill */
- 75.
- 76.
- 77.
- 78. Creating a Rectangle/* Setting fill */
- 79.
- 80.
- 81.
- 82.
- 83. Creating a Rectangle/* Setting fill */
- 84.
- 85.
- 86.
- 87.
- 88.
- 89. Show Demo Sourcefile http://dicode.org/2009/codebits.html
- 90. Canvas JavaScript APIhttp://html5demos.com/video-canvas
- 91.
- 92. another simple examplePut an image on the background
- 93. another simple examplePut an image on the background
- 94.
- 95. another simple examplePut an image on the background
- 96.
- 97.
- 98.
- 99. another simple examplePut an image on the background
- 100. Draw it inyour context
- 101. another simple examplePut an image on the background
- 102. Draw it inyour context:
- 103.
- 104. another simple exampleAdd follow behaviour to a rect in your canvas
- 105. another simple exampleAdd follow behaviour to a rect in your canvas
- 106.
- 107.
- 108. another simple exampleAdd follow behaviour to a rect in your canvas
- 109. function moveRect(ev){ drawRect(ev.clientX-ev.target.offsetLeft,
- 110.
- 111.
- 112.
- 113. Are you havingfun?
- 114. Are you havingfun?
- 115. Defender of thefavicon!
- 116.
- 117. Canvas Javascript APIAlso you can: Scale
- 118.
- 119. And play withimages / videos
- 120.
- 121.
- 122. Why images? Maybeyou want to edit them...
- 123. Why images? Maybeyou want to edit them...
- 124. And maybe youwant to integrate this
- 125. Why images? Maybeyou want to edit them...
- 126. And maybe youwant to integrate this With TinyMce
- 127. Why images? Maybeyou want to edit them...
- 128. And maybe youwant to integrate this With TinyMce
- 129.
- 130. Why images? Maybeyou want to edit them...
- 131. And maybe youwant to integrate this With TinyMce
- 132.
- 133.
- 134.
- 135. So the APIIs not available in the browsers in full
- 136. So the APIIs not available in the browsers in full
- 137.
- 138. So the APIIs not available in the browsers in full
- 139.
- 140. But you havepath based primitives
- 141.
- 142. So the APIIs not available in the browsers in full
- 143.
- 144. But you havepath based primitives
- 145. And you havea cheat sheet :)
- 146.
- 147.
- 148.
- 149.
- 150.
- 151.
- 152.
- 153.
- 154.
- 155.
- 156.
- 157.
- 158.
- 159.
- 160.
- 161.
- 162. electronic arts andvisual design communities
- 163.
- 164. electronic arts andvisual design communities
- 165. Created to makesimpler use of Java Graphical capabilities
- 166.
- 167. Processing.js a portof the Processing Visualization Language
- 168. Processing.js a portof the Processing Visualization Language
- 169. On the canvaselement
- 170.
- 171. Processing.js I'm nothere to teach you Processing
- 172. Processing.js I'm nothere to teach you Processing
- 173. But to showthat is simple
- 174. Processing.js I'm nothere to teach you Processing
- 175. But to showthat is simple
- 176.
- 177. Processing.js ex. 1With this:
- 178.
- 179.
- 180.
- 181.
- 182.
- 183.
- 184.
- 185.
- 186.
- 187.
- 188. Processing.js ex. 1Processing Example on Browser
- 189.
- 190. Processing.js ex. 2With this:
- 191.
- 192.
- 193.
- 194.
- 195. for(int i =0; i < width; i++) {
- 196. float r =random(255);
- 197. float x =random(0, width);
- 198.
- 199. line(i, 0, x,height);
- 200.
- 201.
- 202. Thanks and goodbye Watch out for the news that will come up
- 203.
- 204. Thanks and goodbye Watch out for the news that will come up
- 205.
- 206. Thanks and goodbye Watch out for the news that will come up
- 207.
- 208.
- 209.
- 210.