A brief explanation about canvas html5 element. Some live examples, javascript api and processingjs explanation. Presentation made @codebits 2009

1. 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

19. But... it's a plugin...

20. a little bit of history

26. height attribute

28. <canvas id=”elm” width=”10” height=”10”></canvas>

32. <canvas id=”canvas” width=”200” height=”300”></canvas>

40. Draw a rectangle over it

42. Draw a rectangle over it

43. Apply stroke to rectangule

45. Draw a rectangule over it

46. Stroke the rectangule

47. Insert Text

49. context.createLinearGradient(0, 0, 200, 200);

51. context.createLinearGradient(0, 0, 200, 200);

52. gradient.addColorStop(0, &quot;#f00&quot;);

54. context.createLinearGradient(0, 0, 200, 200);

55. gradient.addColorStop(0, &quot;#f00&quot;);

56. gradient.addColorStop(1, &quot;#fff&quot;);

58. context.createLinearGradient(0, 0, 200, 200);

59. gradient.addColorStop(0, &quot;#f00&quot;);

60. gradient.addColorStop(1, &quot;#fff&quot;);

61. context.fillStyle = gradient;

63. context.createLinearGradient(0, 0, 200, 200);

64. gradient.addColorStop(0, &quot;#f00&quot;);

65. gradient.addColorStop(1, &quot;#fff&quot;);

66. context.fillStyle = gradient;

67. context.fillRect(0, 0, 200, 200);

70. context.fillStyle = &quot;#0f0&quot;;

72. context.fillStyle = &quot;#0f0&quot;;

73. context.fillRect(20, 20, 100, 100);

75. context.fillStyle = &quot;#0f0&quot;;

76. context.fillRect(20, 20, 100, 100);

77. /* Setting stroke */

79. context.fillStyle = &quot;#0f0&quot;;

80. context.fillRect(20, 20, 100, 100);

81. /* Setting stroke */

82. context.strokeStyle = &quot;#00f&quot;;

84. context.fillStyle = &quot;#0f0&quot;;

85. context.fillRect(20, 20, 100, 100);

86. /* Setting stroke */

87. context.strokeStyle = &quot;#00f&quot;;

88. context.strokeRect(20, 20, 100, 100);

91. by @rem

94. Create the image:

96. Create the image:

97. img = document.createElement(&quot;img&quot;);

98. img.src = “gift.png”

100. Draw it in your context

102. Draw it in your context:

103. ctx.drawImage(img,10,10);

106. <canvas onmousemove=”moveRect(event)”>

107. </canvas>

110. ev.clientY-ev.target.offsetTop

112. http://dicode.org/2009/codebits_1.html

115. Defender of the favicon!

116. http://www.p01.org/releases/DEFENDER_of_the_favicon/

118. Transform

119. And play with images / videos

120. https://developer.mozilla.org/samples/video/chroma-key/index.xhtml

121. Why images?

124. And maybe you want to integrate this

129. Or Moodle

133. http://code.google.com/p/paintweb/

134. So the API

137. It's a WIP

139. It's a WIP

140. But you have path based primitives

143. It's a WIP

144. But you have path based primitives

145. And you have a cheat sheet :)

148. http://processingjs.org

150. http://processingjs.org

151. Raphael.js

152. http://raphaeljs.com

154. http://processingjs.org

155. Raphael.js

156. http://raphaeljs.com

157. Rgraph.js

158. http://rgraph.net

159. Processing

162. electronic arts and visual design communities

164. electronic arts and visual design communities

165. Created to make simpler use of Java Graphical capabilities

166. Processing.js

169. On the canvas element

170. Processing.js

173. But to show that is simple

175. But to show that is simple

176. Creating simple examples

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);

186. line(random(width),random(height),random(width),random(height));

187. }

189. http://dicode.org/2009/processing_0.html

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

203. Thanks and good bye

205. LibSAPO.JS - http://libsapojs.blogs.sapo.pt

207. LibSAPO.JS - http://libsapojs.blogs.sapo.pt

208. @dicode

209. http://dicode.org

210. [email_address]