Drawing Using HTML5 Canvas - Programming · PDF file1 Drawing Using HTML5 Canvas Go to Presentation copy http:// ?

1

Drawing Using HTML5 Canvas

● Go to http://o.ooli.ca/canvasjsbin● Presentation copy http://

✔

✘

✔

✔

✔

✔

?

2

ADVANCED

Overview

● Main Topics– Lines

– Color

– Shapes

– Images

● Optional– Curves

– Bezier curves

– Text

3

Computer screens = dots

4

Change colors of the dots to make pictures

5

Change colors of the dots to make pictures

6

Dots = pixels

8 megapixels

800 x 480

720p HD

7

Where is the dot?

8

Where is the dot?

9

Where is the dot?

10

Where is the dot?

11

Where is the dot?

3

12

Where is the dot?

3

13

Where is the dot?

3

14

Where is the dot?

3, 13

15

Math it up!

3, 1x y

16

Let's Start Programming: jsbinhttp://o.ooli.ca/canvasjsbin

17

jsbinhttp://o.ooli.ca/canvasjsbin

<!DOCTYPE html><canvas id="canvas" width="500" height="500"></canvas><script> canvas = document.getElementById('canvas'); c = canvas.getContext('2d'); function wait(fn) {window.setTimeout(fn, 250); }</script>

18

Let's Draw Somethinghttp://o.ooli.ca/canvasjsbin

19


20


Checking for Errors

cmd - op⌘ tion alt - C⌥ctrl - shift - J⇧F12

21

What's Going On?

c.moveTo(20,90);c.lineTo(90,90);c.stroke();

22

Canvas


23

Move Pen

c.moveTo(20,90);c.lineTo(90,90);c.stroke(); 20

90

24

Tell Computer Where You Want a Line

c.moveTo(20,90);c.lineTo(90,90);c.stroke(); 90

90

25

Tell Computer to Draw the Line


26



27



28

Make Your Own Picture

c.moveTo(20,90);c.lineTo(90,90);c.lineTo(90,140);c.lineTo(20,140);c.lineTo(20,90);c.lineTo(55,60);c.lineTo(90,90);

c.moveTo(45,140);c.lineTo(45,115);c.lineTo(65,115);c.lineTo(65,140);c.stroke();

29


30


c.moveTo(20,90);

31


c.moveTo(20,90);c.lineTo(90,90);

32


c.moveTo(20,90);c.lineTo(90,90);c.lineTo(90,140);

33



c.lineTo(20,140);c.lineTo(90,140);

34



c.lineTo(20,90);c.lineTo(20,140);c.lineTo(90,140);

35



c.lineTo(55,60);c.lineTo(20,90);c.lineTo(20,140);c.lineTo(90,140);

36



c.lineTo(90,90);c.lineTo(55,60);c.lineTo(20,90);c.lineTo(20,140);c.lineTo(90,140);

37



c.moveTo(45,140);


38



c.lineTo(45,115);c.moveTo(45,140);


39



c.lineTo(65,115);c.lineTo(45,115);c.moveTo(45,140);


40



c.lineTo(65,140);c.lineTo(65,115);c.lineTo(45,115);c.moveTo(45,140);


41



c.stroke();c.lineTo(65,140);c.lineTo(65,115);c.lineTo(45,115);c.moveTo(45,140);


42

IdeasDrawing a Line

Checking for Errors


cmd - op⌘ tion alt - C⌥ctrl - shift - J⇧

F12

ADVANCED

43

Curves

ADVANCED

44

Curves

ADVANCED

45

Curves

ADVANCED

46

Curves

ADVANCED

47

Which Curve?

ADVANCED

48

Which Curve?

ADVANCED

49

Which Curve?

ADVANCED

50

Curves

ADVANCED

51

Curves

ADVANCED

52

Curves

ADVANCED

53

Curves

ADVANCED

54

Curves

ADVANCED

55

Curves

ADVANCED

56

Curves

ADVANCED

57

Curves

ADVANCED

58

Curves

ADVANCED

59

c.moveTo(20,20);c.quadraticCurveTo(90,20,100,90);c.stroke();

(20,20) (90,20)

(100,90)

ADVANCED

60


(20,20) (90,20)

(100,90)

ADVANCED

61


(20,20) (90,20)

(100,90)

ADVANCED

62


(20,20) (90,20)

(100,90)

ADVANCED

63


(20,20) (90,20)

(100,90)

ADVANCED

64


(20,20) (90,20)

(100,90)

ADVANCED

65


(20,20) (90,20)

(100,90)

ADVANCED

66


(20,20) (90,20)

(100,90)

67ADVANCED

Drawing a Curve

Ideas



68

Colored Lines

69


Review

70


Review

71


Review

72


Review

73

c.moveTo(20,90);c.lineTo(90,90);c.strokeStyle = 'red';c.stroke();

Colored Lines

74


Colored Lines

75


Colors

blackbluebrown

greenorangepurple

redwhiteyellowyellow

pinkgray

76

Drawing Two Lines

77

c.moveTo(5,5);c.lineTo(90,5);c.strokeStyle='green';c.stroke();

Drawing Two Lines

78


Drawing Two Lines

c.moveTo(20,20);c.lineTo(90,20);c.strokeStyle='red';c.stroke();

79


Drawing Two Lines

c.moveTo(20,20);c.lineTo(90,20);c.strokeStyle='red';c.stroke();

80


c.beginPath();c.moveTo(20,20);c.lineTo(90,20);c.strokeStyle='red';c.stroke();

Different Lines, Different Colors

81

Colored Lines

Ideas

c.beginPath();c.moveTo(20,20);c.lineTo(90,20);c.lineTo(90,90);c.strokeStyle='red';c.stroke();


blackbluebrowngreenorangepurpleredwhiteyellowyellowpinkgray

ADVANCED

82

Crazy Curves

ADVANCED

83

Crazy Curves

ADVANCED

84

Crazy Curves

ADVANCED

85

Crazy Curves

ADVANCED

86

Crazy Curves

ADVANCED

87

4 Point Bezier Curve

● Invented by French mathematicians/engineers around 1960

● Adobe used them in computer graphics in the 1980s

ADVANCED

88




ADVANCED

89




ADVANCED

90




ADVANCED

91




ADVANCED

92




ADVANCED

93




ADVANCED

94




ADVANCED

95




ADVANCED

96




ADVANCED

97




ADVANCED

98




ADVANCED

99




ADVANCED

100




ADVANCED

101




ADVANCED

102




ADVANCED

103




ADVANCED

104




ADVANCED

105




ADVANCED

106

c.moveTo(10,90);c.bezierCurveTo(20,20,90,20,100,90);c.stroke();

(20,20) (90,20)

(100,90)(10,90)

ADVANCED

107


(20,20) (90,20)

(100,90)(10,90)

ADVANCED

108


(20,20) (90,20)

(100,90)(10,90)

ADVANCED

109


(20,20) (90,20)

(100,90)(10,90)

ADVANCED

110


(20,20) (90,20)

(100,90)(10,90)

ADVANCED

111


(20,20) (90,20)

(100,90)(10,90)

ADVANCED

112


(20,20) (90,20)

(100,90)(10,90)

113ADVANCED

Bezier Curves

Ideas

c.beginPath();c.moveTo(10,10);c.bezierCurveTo(10,50,90,50,90,90);c.stroke();


114

Filled Shapes

115

c.beginPath();c.moveTo(5,5);c.lineTo(90,5);c.lineTo(90,90);c.lineTo(5,90);c.lineTo(5,5);

c.stroke();

Drawing Shapes

116


c.stroke();

Drawing Shapes

117


c.stroke();

Drawing Shapes

118


c.stroke();

Drawing Shapes

119


c.stroke();

Drawing Shapes

120


c.stroke();

Drawing Shapes

121


c.stroke();

Drawing Shapes

122


c.stroke();

Fills

123


c.stroke();

Fills

c.fill();

124


c.stroke();

Fills

c.fill();

125


c.fill();

Colored Fills

126


c.fill();

Colored Fills

c.fillStyle = 'red';

127


c.fill();

Colored Fills

c.fillStyle = 'red';

128

Filled Shapes

Ideas

c.beginPath();c.moveTo(20,20);c.lineTo(90,20);c.lineTo(90,90);c.fillStyle='red';c.fill();


blackbluebrowngreenorangepurpleredwhiteyellowyellowpinkgray

ADVANCED

129

Text

Will you go to thedance with me?

ADVANCED

130

Writing Things

c.fillText('Hello', 20, 100);

Hello

ADVANCED

131

Writing Things


Hello

ADVANCED

132

Writing Things


Hello

ADVANCED

133

Writing Things


Hello

ADVANCED

134

Writing Things

c.font = '20px';c.fillText('Hello', 20, 100);

Hello

ADVANCED

135

Writing Things


Hello

ADVANCED

136

Writing Things


Hello

ADVANCED

137

Writing Things

c.font = '20px serif';c.fillText('Hello', 20, 100);

Hello

ADVANCED

138

Writing Things

c.font = '20px serif';c.fillText('Hello', 20, 100);

Hello

139ADVANCED

Moon

Text

Ideas

c.fillStyle='blue';c.font = '20px sans-serif';c.fillText('Hello', 20, 100);


Hello

Red Moon

140

Drawing is Hard

141

Images

a = new Image();a.src = 'http://o.ooli.ca/mona.jpg';

wait(function() {

c.drawImage(a,100,50);

});

142

Images


wait(function() {


});

143

Images


wait(function() {


});

144

Images


wait(function() {


});

145

Images


wait(function() {


});

146

Images


wait(function() {


});

147

Images


wait(function() {


});

148

Images


wait(function() {


});

149

Images


wait(function() {


});

150

Images


wait(function() {


});

151

Changing Images


wait(function() {


});

152

Changing Images


wait(function() {


});

153

Changing Images


wait(function() {


});

http://o.ooli.ca/ele.png

154

Changing Images

a = new Image();a.src = 'http://o.ooli.ca/ele.png';

wait(function() {


});

155

Placing Images


wait(function() {


});

156

Placing Images


wait(function() {


});

157

Placing Images


wait(function() {


});

100

158

Placing Images


wait(function() {


});

100

50

159

Placing Images


wait(function() {


});

100

50

160

Placing Images


wait(function() {


});

100

90

161

Two Images


wait(function() {


});

162

Two Images


wait(function() {


});

163

Two Images

a = new Image();a.src = 'http://o.ooli.ca/ele.png';b = new Image();b.src = 'http://o.ooli.ca/mona.jpg';wait(function() {


});

164

Two Images



});

165

Two Images


c.drawImage(a,100,90);c.drawImage(b,10,10);

});

166

Two Images


c.drawImage(a,100,90);c.drawImage(b,10,10);

});

167

Click on Run If It Gets Stuck


wait(function() {


});

168cmd - op⌘ tion alt - C⌥ctrl - shift - J⇧F12

Program


wait(function() {


});

ele.png

Images

person.png

car_top.pngdog.png

mona.jpg

http://o.ooli.ca/

http://o.ooli.ca/

tree.png

leaves.png

grass.png

brick.png

stone.png

169

Where to Get Images

● Find an image● Right-click (ctrl-click)● Copy

– Copy Image URL

– Copy Image Location

– Copy Image Address

– Properties...Address

● Paste it

● Or upload your own images!



wait(function() {


});

Ideas http://o.ooli.ca/ele.png http://o.ooli.ca/dog.png http://o.ooli.ca/person.png http://o.ooli.ca/car_top.png http://o.ooli.ca/mona.jpg http://o.ooli.ca/tree.png http://o.ooli.ca/leaves.png http://o.ooli.ca/stone.png http://o.ooli.ca/brick.png http://o.ooli.ca/grass.png


● Copy Image URL● Copy Image Location● Copy Image Address● Properties...Address

● Paste it

171

Animation Using HTML5 Canvas

● Go to http://o.ooli.ca/canvasjsbin● Presentation copy http://

✔

✘

✔

✔

✔

✔

?

172

ADVANCED

Overview

● Main Topics– Images

– Basic Animation

– Keyboard Control

● Optional– Affine Transforms

– Advanced Animation

→←

173


174


<!DOCTYPE html><canvas id="canvas" width="500" height="500"></canvas><script> canvas = document.getElementById('canvas'); c = canvas.getContext('2d'); c.clear = function() {this.clearRect(0,0,500,500);}; function wait(fn) {window.setTimeout(fn, 250); } function repeat(fn) { if (window.requestAnimationFrame) { var advance = function() {fn(); requestAnimationFrame(advance);}; requestAnimationFrame(advance); } else window.setInterval(fn, 50); } var dx = 0, dy = 0, mousex = 0, mousey=0, mouseclicks = 0; document.onkeydown = function(e) { var key = e.keyCode; if (key == 37) dx=-1; else if (key == 38) dy=-1; else if (key == 39) dx=1; else if (key == 40) dy=1; else return true; return false; }; document.onkeyup = function(e) { var key = e.keyCode; if (key == 37 || key == 39) dx=0; else if (key == 38 || key == 40) dy=0;else return true; return false; }; canvas.onmousemove = function(e) { var rect = canvas.getBoundingClientRect(); mousex = e.clientX - rect.left; mousey = e.clientY - rect.top; }; canvas.onmousedown = function(e) {mouseclicks++;};</script>

175

Images


wait(function() {


});

176

Images


wait(function() {


});

177

Images


wait(function() {


});

178

Images


wait(function() {


});

179

Images


wait(function() {


});

180

Images


wait(function() {


});

181

Images


wait(function() {


});

182

Images


wait(function() {


});

183

Images


wait(function() {


});

184

Images


wait(function() {


});

185

Changing Images


wait(function() {


});

186

Changing Images


wait(function() {


});

187

Changing Images


wait(function() {


});

http://o.ooli.ca/ele.png

188

Changing Images


wait(function() {


});

189

Where to Get Images


– Copy Image URL

– Copy Image Location

– Copy Image Address

– Properties...Address

● Paste it

● Or upload your own images!



wait(function() {


});

Ideas http://o.ooli.ca/ele.png http://o.ooli.ca/dog.png http://o.ooli.ca/person.png http://o.ooli.ca/car_top.png http://o.ooli.ca/mona.jpg http://o.ooli.ca/tree.png http://o.ooli.ca/leaves.png http://o.ooli.ca/stone.png http://o.ooli.ca/brick.png http://o.ooli.ca/grass.png



● Paste it

ADVANCED

191

Affine Transformations

● What are they?– Graphics effects for distorting images

– Mostly useful for 3d animation● Due to useful mathematical properties

ADVANCED

192

Affine Transformation Example


wait(function() {


});

ADVANCED

193

Affine Transformation Example


wait(function() {

c.scale(3, 1);c.drawImage(a,10,10);

});

ADVANCED

194

scale

translate

rotate

shear (not available in canvas)

Four Distortions

ADVANCED

195

Scale


wait(function() {


});

ADVANCED

196

Scale


wait(function() {


});

ADVANCED

197

Scale


wait(function() {


});

ADVANCED

198

Scale


wait(function() {


});

ADVANCED

199

Scale


wait(function() {

c.scale(0.5, 1);c.drawImage(a,10,10);

});

ADVANCED

200

Scale


wait(function() {

c.scale(0.1, 1);c.drawImage(a,10,10);

});

ADVANCED

201

Scale


wait(function() {

c.scale(-1, 1);c.drawImage(a,10,10);

});

ADVANCED

202

Scale


wait(function() {

c.scale(-1, 1);c.drawImage(a,100,10);

});

ADVANCED

203

Translate


wait(function() {

c.translate(0, 0);c.drawImage(a,10,10);

});

ADVANCED

204

Translate


wait(function() {


});

ADVANCED

205

Translate


wait(function() {


});

ADVANCED

206

Rotate


wait(function() {

c.rotate(30 * Math.PI / 180);c.drawImage(a,10,10);

});

ADVANCED

207

Combining Affine Transforms

● More than one transformation?– What happens?

c.translate(100, 0);c.scale(1, 2);c.rotate(20 * Math.PI / 180);c.translate(-5, 0);c.drawImage(a,10,10);

ADVANCED

208

Combining Affine Transforms

● Do the steps backwards!

c.translate(100, 0);c.scale(1, 2);c.rotate(20 * Math.PI / 180);c.translate(-5, 0);c.drawImage(a,10,10);

ADVANCED

209

Combining Affine Transformsc.translate(100, 0);c.scale(1, 2);c.rotate(20 * Math.PI / 180);c.translate(-5, 0);c.drawImage(a,10,10);

ADVANCED

210


ADVANCED

211


ADVANCED

212


ADVANCED

213


ADVANCED

214

Overhead Car

a = new Image();a.src = 'http://o.ooli.ca/car_top.png';

wait(function() {

c.drawImage(a, 0, 0);

});

ADVANCED

215

Overhead Car


wait(function() {

c.drawImage(a, 0, 0);

});Move the car

over here,then rotate it

ADVANCED

216

Overhead Car


wait(function() {

c.translate(200, 200);c.rotate(30 * Math.PI / 180);c.translate(-37, -19);c.drawImage(a, 0, 0);

// Resetc.setTransform(1,0,0,1,0,0);

});

ADVANCED

217

Overhead Car


wait(function() {



});

ADVANCED

218

Overhead Car


ADVANCED

219

Overhead Car


ADVANCED

220

Overhead Car


ADVANCED

221

Overhead Car


ADVANCED

222

Overhead Car


Move the carover here,

then rotate it

223ADVANCED



wait(function() {

c.translate(200, 200);c.rotate(30 * Math.PI / 180);c.translate(-37, -19);c.scale(1, 1);c.drawImage(a, 0, 0);


});

http://o.ooli.ca/ … ele.png dog.png person.png car_top.png mona.jpg tree.png leaves.png stone.png brick.png grass.png



● Paste it

● Stretch an image● Mirror or flip an image● Rotate an image its lower-right point

224

Animation: Moving Things

225

Animation: Moving Things

226

Images Review

a = new Image();a.src = 'http://o.ooli.ca/person.png';

wait(function() {


});

227

Images Review


wait(function() {


});

228

Images Review


wait(function() {


});

229

Animation


wait(function() {


});

230

Animation


wait(function() {


});

231

Animation


repeat(function() {


});

232

Animation


repeat(function() {


});

233

Animation: Variables


repeat(function() {


});

234



repeat(function() {


});

235


a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;repeat(function() {

c.drawImage(a, x,50);

});

236

Animation: Changing Things


c.drawImage(a, x,50);x = x + 1;

});

237



c.drawImage(a, x,50);x = x + 1;

});

238



c.clear();c.drawImage(a, x,50);x = x + 1;

});

239




});

240




});

241




});

242




});

243




});

244




});



c.clear();c.drawImage(a, x, 50);x = x + 1;

});

Ideashttp://o.ooli.ca/ … ele.png dog.png person.png car_top.png mona.jpg tree.png leaves.png stone.png brick.png grass.png



● Paste it

ADVANCED

246

Advanced Animation

● So far ● More flexibility

ADVANCED

247

Time

a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;y = 50;

repeat(function() {

c.clear();c.drawImage(a, x, y);x = x + 1;

});

ADVANCED

248

Time

a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;y = 50;

repeat(function() {


});

ADVANCED

249

Time

a = new Image();a.src = 'http://o.ooli.ca/person.png';x = 50;y = 50;time = 1;repeat(function() {


});

ADVANCED

250

Time


c.clear();c.drawImage(a, x, y);time = time + 1;x = x + 1;

});

ADVANCED

251

What Time Is It?

...repeat(function() {

c.clear();c.drawImage(a, x, y);time = time + 1;x = x + 1;

});

Move right

ADVANCED

252

What Time Is It?


c.clear();c.drawImage(a, x, y);time = time + 1;if (time > 1 && time < 50) { x = x + 1;}

});

time=50

ADVANCED

253

What Time Is It?


c.clear();c.drawImage(a, x, y);time = time + 1;if (time > 1 && time < 50) { x = x + 1;}

});

When time is between 1 and 50,

move right

time=50

ADVANCED

254

What Time Is It?


c.clear();c.drawImage(a, x, y);time = time + 1;if (time > 1 && time < 50) { x = x + 1;}if (time > 50 && time < 100) { x = x + 1; y = y + 1;}});

time=0 time=50

time=100

ADVANCED

255

What Time Is It?


c.clear();c.drawImage(a, x, y);time = time + 1;if (time > 1 && time < 50) { x = x + 1;}if (time > 50 && time < 100) { x = x + 1; y = y + 1;}}); When time is

between 50 and 100,

move right and down

time=0 time=50

time=100

256ADVANCED



c.clear();c.drawImage(a, x, y);time = time + 1;if (time > 1 && time < 50) { x = x + 1;}if (time > 50 && time < 100) { x = x + 1; y = y + 1;}});

http://o.ooli.ca/ … ele.png dog.png person.png car_top.png mona.jpg tree.png leaves.png stone.png brick.png grass.png



● Paste it

257

Using the Keyboard

→←

258

Animation Review



});

259

Animation Review



});

260

Animation Review



});

261

Animation Review



});

262

Animation Review



});

263

Animation Review



});

264

Animation Review



});

265

Animation Review



});

266

Animation Review



});

267

Keyboard: dx



});

268

Keyboard: dx



});

269

Keyboard: dx


c.clear();c.drawImage(a, x,50);x = x + dx;

});

270

Keyboard: dx



});

→

271

Keyboard: dx



});

→←

272

Keyboard: dx



});

→←Done!

273

Keyboard: dx

● Special variable dx

→←

dx = 0 dx = +1dx = -1

274

Keyboard: Why Does This Work?

● Remember, use (x, y) for positions90

90

(90,90)

275

Keyboard: Change in Positions

● To go right, x should get bigger

● To go left, x should get smaller

(90,90)

276




(90,90) (150,90)

277




(90,90) (150,90)(30,90)

278

Change in x



(90,90) (150,90)(30,90)

279

Change in x



(90,90) (150,90)(30,90)

x = x + 1

280

Change in x



(90,90) (150,90)(30,90)

x = x + 1

x = x - 1

281

Keyboard



(90,90) (150,90)(30,90)

x = x + 1

x = x - 1

→←

dx = 0 dx = +1dx = -1

282

Keyboard



(90,90) (150,90)(30,90)

→ x = x + 1

x = x - 1

→←

dx = 0 dx = +1dx = -1

283

Keyboard



(90,90) (150,90)(30,90)

→ x = x + 1

x = x - 1

→←

dx = 0 dx = +1dx = -1

dx

284

Keyboard



(90,90) (150,90)(30,90)

→

←

x = x + 1

x = x - 1

→←

dx = 0 dx = +1dx = -1

dx

285

Keyboard



(90,90) (150,90)(30,90)

→

←

x = x + 1

x = x - 1

→←

dx = 0 dx = +1dx = -1

+ dx

dx

286

Keyboard



(90,90) (150,90)(30,90)

→

←

x = x + 1

x = x - 1

→←

dx = 0 dx = +1dx = -1

+ dx

dx

x = x + dx

287

Keyboard: dx



});

288

Keyboard: dx



});

289

Keyboard: dx



});

290

Keyboard: dx



});

→

dx= 1

291

Keyboard: dx



});

→

dx= 1

←

dx= -1

292

Click on Canvas to Use Keyboard



});




});

Ideashttp://o.ooli.ca/ … ele.png dog.png person.png car_top.png mona.jpg tree.png leaves.png stone.png brick.png grass.png



● Paste it

ADVANCED

294

Driving Car

a = new Image();a.src = 'http://o.ooli.ca/car_top.png';x = 50;y = 50;angle = 0;repeat(function() {

angle = angle + dx;x = x - dy * Math.cos(angle * Math.PI / 180);y = y - dy * Math.sin(angle * Math.PI / 180);

c.clear();c.translate(x, y);c.rotate(angle * Math.PI / 180);c.translate(-37, -19);c.drawImage(a, 0, 0);

c.setTransform(1,0,0,1,0,0); // reset

});

295

Art CreditsMage City ArcanosHyptosisopengameart.org

BaurnRachel J. MorrisArtSader

Justin BieberKevin Aranibar of Kerosene PhotographyCC Attribution 2.0 Generic

Chad KroegerJames AndersonCC Attribution-Share Alike 3.0 Unported

Celine DionGeorges BiardCC Atribution-Share Alike 3.0 Unported

neo1973ryanlerchopenclipart.org

TV iconjhnri4openclipart.org

Architetto -- macchina fotograficaAnonymous (francesco rollandin)openclipart.org

Edit Hand Holding Pencildarrenbeckopenclipart.org

tango style pen(remix of tango pen)warszawianka openclipart.org

Brunette Female DriverMerlin2525openclipart.org

horse machovkaopenclipart.org

RPG man symbols: Round Towernicubunuopenclipart.org

Documents

Drawing Using HTML5 Canvas - Programming · PDF file1 Drawing Using HTML5 Canvas Go to Presentation copy http:// ?