blob: f496f7c16aa439912376bc16731a493c7b901004 [file] [log] [blame]
caryclark@google.com752b60e2012-03-22 21:11:17 +00001<html>
2<head>
3<div style="height:0">
caryclark@google.comfa0588f2012-04-26 21:01:06 +00004
5<div id="testSimplifyQuadratic1">
6 SkPath path, out;
7 path.moveTo(0, 0);
8 path.quadTo(1, 0, 1, 1);
9 path.close();
10 path.moveTo(1, 0);
11 path.quadTo(0, 0, 0, 1);
12 path.close();
13 testSimplify(path, true, out, bitmap);
14}
caryclark@google.com752b60e2012-03-22 21:11:17 +000015</div>
caryclark@google.comfa0588f2012-04-26 21:01:06 +000016
17<div id="testSimplifyQuadratic2">
18 SkPath path, out;
19 path.moveTo(0, 0);
20 path.quadTo(20, 0, 20, 20);
21 path.close();
22 path.moveTo(20, 0);
23 path.quadTo(0, 0, 0, 20);
24 path.close();
25 testSimplify(path, true, out, bitmap);
26}
caryclark@google.comd88e0892012-03-27 13:23:51 +000027</div>
caryclark@google.comfa0588f2012-04-26 21:01:06 +000028
29<div id="testSimplifyQuadratic3">
30 SkPath path, out;
31 path.moveTo(0, 0);
32 path.quadTo(20, 0, 20, 20);
33 path.close();
34 path.moveTo(0, 20);
35 path.quadTo(0, 0, 20, 0);
36 path.close();
37 testSimplify(path, true, out, bitmap);
38}
caryclark@google.comd88e0892012-03-27 13:23:51 +000039</div>
caryclark@google.comfa0588f2012-04-26 21:01:06 +000040
41<div id="testSimplifyQuadratic4">
42 SkPath path, out;
43 path.moveTo(0, 20);
44 path.quadTo(20, 0, 40, 20);
45 path.close();
46 path.moveTo(40, 10);
47 path.quadTo(20, 30, 0, 10);
48 path.close();
49 testSimplify(path, true, out, bitmap);
50 drawAsciiPaths(path, out, true);
51}
caryclark@google.comd88e0892012-03-27 13:23:51 +000052</div>
caryclark@google.comfa0588f2012-04-26 21:01:06 +000053
54<div id="testSimplifyQuadratic5">
55 SkPath path, out;
56 path.moveTo(0, 0);
57 path.quadTo(0, 0, 0, 0);
58 path.lineTo(0, 0);
59 path.close();
60 path.moveTo(0, 0);
61 path.lineTo(0, 0);
62 path.quadTo(0, 0, 0, 1);
63 path.close();
64 testSimplify(path, true, out, bitmap);
65 drawAsciiPaths(path, out, true);
66}
caryclark@google.comfb173422012-04-10 18:28:55 +000067</div>
caryclark@google.comfa0588f2012-04-26 21:01:06 +000068
69<div id="testSimplifyQuadratic6">
70 SkPath path, out;
71 path.moveTo(0, 0);
72 path.quadTo(0, 0, 0, 0);
73 path.lineTo(1, 0);
74 path.close();
75 path.moveTo(0, 0);
76 path.lineTo(0, 0);
77 path.quadTo(1, 0, 0, 1);
78 path.close();
79 testSimplify(path, true, out, bitmap);
80 drawAsciiPaths(path, out, true);
81}
caryclark@google.comfb173422012-04-10 18:28:55 +000082</div>
caryclark@google.comfa0588f2012-04-26 21:01:06 +000083
84<div id="testSimplifyQuadratic7">
85 SkPath path, out;
86 path.moveTo(0, 0);
87 path.quadTo(0, 0, 0, 0);
88 path.lineTo(0, 1);
89 path.close();
90 path.moveTo(0, 0);
91 path.lineTo(0, 0);
92 path.quadTo(1, 0, 0, 2);
93 path.close();
94 testSimplify(path, true, out, bitmap);
95 drawAsciiPaths(path, out, true);
96}
97</div>
98
99<div id="testSimplifyQuadratic8">
100 SkPath path, out;
101 path.moveTo(0, 0);
102 path.quadTo(0, 0, 0, 0);
103 path.lineTo(0, 0);
104 path.close();
105 path.moveTo(0, 0);
106 path.lineTo(0, 0);
107 path.quadTo(1, 0, 0, 2);
108 path.close();
109 testSimplify(path, true, out, bitmap);
110 drawAsciiPaths(path, out, true);
111}
112</div>
113
114<div id="testSimplifyQuadratic9">
115 SkPath path, out;
116 path.moveTo(0, 0);
117 path.quadTo(0, 0, 0, 0);
118 path.lineTo(1, 1);
119 path.close();
120 path.moveTo(0, 0);
121 path.lineTo(0, 0);
122 path.quadTo(1, 0, 2, 2);
123 path.close();
124 testSimplify(path, true, out, bitmap);
125 drawAsciiPaths(path, out, true);
126}
127</div>
128
129<div id="testSimplifyQuadratic10">
130 SkPath path, out;
caryclark@google.com78e17132012-04-17 11:40:34 +0000131 path.moveTo(0, 0);
132 path.quadTo(0, 0, 0, 0);
133 path.lineTo(0, 0);
134 path.close();
135 path.moveTo(0, 0);
136 path.lineTo(0, 1);
137 path.quadTo(1, 1, 1, 2);
caryclark@google.com78e17132012-04-17 11:40:34 +0000138 path.close();
caryclark@google.comfa0588f2012-04-26 21:01:06 +0000139 testSimplify(path, true, out, bitmap);
140 drawAsciiPaths(path, out, true);
141}
caryclark@google.com78e17132012-04-17 11:40:34 +0000142</div>
143
caryclark@google.comfa0588f2012-04-26 21:01:06 +0000144<div id="testSimplifyQuadratic11">
145 SkPath path, out;
caryclark@google.com78e17132012-04-17 11:40:34 +0000146 path.moveTo(0, 0);
147 path.quadTo(0, 0, 0, 0);
148 path.lineTo(0, 2);
caryclark@google.com78e17132012-04-17 11:40:34 +0000149 path.close();
150 path.moveTo(0, 0);
151 path.lineTo(2, 1);
152 path.quadTo(2, 2, 3, 3);
caryclark@google.comfa0588f2012-04-26 21:01:06 +0000153 path.close();
154 testSimplify(path, true, out, bitmap);
155 drawAsciiPaths(path, out, true);
156}
157</div>
158
159<div id="testSimplifyQuadratic12">
160 SkPath path, out;
161 path.moveTo(0, 0);
162 path.lineTo(0, 2);
caryclark@google.com78e17132012-04-17 11:40:34 +0000163 path.lineTo(0, 0);
164 path.close();
caryclark@google.comfa0588f2012-04-26 21:01:06 +0000165 path.moveTo(3, 0);
166 path.quadTo(1, 1, 0, 2);
167 path.lineTo(3, 0);
168 path.close();
169 testSimplify(path, true, out, bitmap);
170 drawAsciiPaths(path, out, true);
171}
caryclark@google.com78e17132012-04-17 11:40:34 +0000172</div>
173
caryclark@google.comfa0588f2012-04-26 21:01:06 +0000174<div id="testSimplifyQuadratic13">
175 SkPath path, out;
caryclark@google.com78e17132012-04-17 11:40:34 +0000176path.moveTo(0, 0);
177path.quadTo(0, 0, 1, 0);
178path.lineTo(1, 1);
179path.lineTo(0, 0);
180path.close();
181path.moveTo(0, 0);
182path.quadTo(3, 0, 1, 1);
183path.lineTo(0, 0);
184path.close();
caryclark@google.comfa0588f2012-04-26 21:01:06 +0000185 testSimplify(path, true, out, bitmap);
186 drawAsciiPaths(path, out, true);
187}
caryclark@google.com78e17132012-04-17 11:40:34 +0000188</div>
189
caryclark@google.comfa0588f2012-04-26 21:01:06 +0000190<div id="testSimplifyQuadratic14">
191 SkPath path, out;
caryclark@google.com78e17132012-04-17 11:40:34 +0000192 path.moveTo(0, 0);
193 path.quadTo(0, 0, 0, 0);
194 path.lineTo(1, 1);
caryclark@google.com78e17132012-04-17 11:40:34 +0000195 path.close();
196 path.moveTo(0, 0);
197 path.lineTo(0, 0);
198 path.quadTo(0, 1, 2, 1);
caryclark@google.com78e17132012-04-17 11:40:34 +0000199 path.close();
caryclark@google.comfa0588f2012-04-26 21:01:06 +0000200 testSimplify(path, true, out, bitmap);
201 drawAsciiPaths(path, out, true);
202}
caryclark@google.com78e17132012-04-17 11:40:34 +0000203</div>
204
caryclark@google.comfa0588f2012-04-26 21:01:06 +0000205<div id="testSimplifyQuadratic15">
206 SkPath path, out;
207 path.moveTo(0, 0);
208 path.quadTo(0, 0, 1, 3);
209 path.lineTo(3, 3);
210 path.close();
211 path.moveTo(0, 1);
212 path.lineTo(1, 1);
213 path.quadTo(0, 3, 3, 3);
214 path.close();
215 testSimplify(path, true, out, bitmap);
216 drawAsciiPaths(path, out, true);
217}
218</div>
219
220<div id="testSimplifyQuadratic16">
221 SkPath path, out;
222 path.moveTo(0, 0);
223 path.quadTo(0, 0, 0, 0);
224 path.lineTo(0, 1);
225 path.close();
226 path.moveTo(0, 0);
227 path.lineTo(0, 0);
228 path.quadTo(1, 0, 0, 1);
229 path.close();
230 testSimplify(path, true, out, bitmap);
231 drawAsciiPaths(path, out, true);
232}
233</div>
234
235<div id="testSimplifyQuadratic17">
236 SkPath path, out;
caryclark@google.comb45a1b42012-05-18 20:50:33 +0000237 path.moveTo(8, 8);
238 path.quadTo(10, 10, 8, -10);
caryclark@google.comfa0588f2012-04-26 21:01:06 +0000239 path.close();
caryclark@google.comb45a1b42012-05-18 20:50:33 +0000240 path.moveTo(8, 8);
241 path.quadTo(12, 12, 14, 4);
242 path.close();
243 path.moveTo(8, 8);
244 path.quadTo(9, 9, 10, 8);
caryclark@google.comfa0588f2012-04-26 21:01:06 +0000245 path.close();
246 testSimplify(path, true, out, bitmap);
247 drawAsciiPaths(path, out, true);
248}
caryclark@google.com78e17132012-04-17 11:40:34 +0000249</div>
caryclark@google.comfb173422012-04-10 18:28:55 +0000250
caryclark@google.comb45a1b42012-05-18 20:50:33 +0000251<div id="testSimplifyQuadratic18">
252 SkPath path, out;
253 path.moveTo(8.0000000000000071, 8.0000000000000071);
254 path.quadTo(8.7289570079366854, 8.7289570079366889, 9.3914917259458743, 9.0593802763083691);
255 path.close();
256 path.moveTo(8.0000000000000142, 8.0000000000000142);
257 path.quadTo(8.1250000000000107, 8.1250000000000071, 8.2500000000000071, 8.2187500000000053);
258 path.close();
259 testSimplify(path, true, out, bitmap);
260 drawAsciiPaths(path, out, true);
261</div>
caryclark@google.com8dcf1142012-07-02 20:27:02 +0000262
263<div id="testSimplifyQuadratic19">
264 SkPath path, simple;
265 path.moveTo(0,4);
266 path.lineTo(6,4);
267 path.lineTo(3,1);
268 path.close();
269 path.moveTo(2,3);
270 path.lineTo(3,2);
271 path.lineTo(4,3);
272 path.close();
273 testSimplifyx(path);
274</div>
275
276<div id="testSimplifyQuadratic20">
277 SkPath path, simple;
278 path.moveTo(0,4);
279 path.lineTo(6,4);
280 path.lineTo(3,1);
281 path.close();
282 path.moveTo(2,3);
283 path.lineTo(4,3);
284 path.lineTo(3,2);
285 path.close();
286 testSimplifyx(path);
287</div>
288
289<div id="testSimplifyQuadratic21">
290 SkPath path, simple;
291 path.moveTo(0,4);
292 path.lineTo(8,4);
293 path.lineTo(4,0);
294 path.close();
295 path.moveTo(2,2);
296 path.lineTo(3,3);
297 path.lineTo(4,2);
298 path.close();
299 testSimplifyx(path);
300</div>
301
302<div id="testLine6">
303 SkPath path, simple;
304 path.moveTo(0,0);
305 path.lineTo(4,0);
306 path.lineTo(2,2);
307 path.close();
308 path.moveTo(2,0);
309 path.lineTo(6,0);
310 path.lineTo(4,2);
311 path.close();
312 testSimplifyx(path);
313</div>
314
315<!-- don't support addRect yet -->
316<div id="testLine17">
317 SkPath path, simple;
318 path.addRect(0, 0, 12, 12, (SkPath::Direction) 0);
319 path.addRect(4, 12, 13, 13, (SkPath::Direction) 0);
320 testSimplifyx(path);
321</div>
322
caryclark@google.com752b60e2012-03-22 21:11:17 +0000323</div>
324
325<script type="text/javascript">
326
327var testDivs = [
caryclark@google.com8dcf1142012-07-02 20:27:02 +0000328 testLine6,
329 testSimplifyQuadratic21,
330 testSimplifyQuadratic20,
331 testSimplifyQuadratic19,
caryclark@google.comb45a1b42012-05-18 20:50:33 +0000332 testSimplifyQuadratic18,
caryclark@google.comfa0588f2012-04-26 21:01:06 +0000333 testSimplifyQuadratic17,
334 testSimplifyQuadratic16,
335 testSimplifyQuadratic15,
336 testSimplifyQuadratic14,
337 testSimplifyQuadratic13,
338 testSimplifyQuadratic12,
339 testSimplifyQuadratic11,
340 testSimplifyQuadratic10,
341 testSimplifyQuadratic9,
342 testSimplifyQuadratic8,
343 testSimplifyQuadratic7,
344 testSimplifyQuadratic6,
345 testSimplifyQuadratic5,
346 testSimplifyQuadratic4,
347 testSimplifyQuadratic3,
348 testSimplifyQuadratic2,
349 testSimplifyQuadratic1,
caryclark@google.com752b60e2012-03-22 21:11:17 +0000350];
351
352var scale, columns, rows, xStart, yStart;
353
354var ticks = 0.1;
355var at_x = 13 + 0.5;
356var at_y = 13 + 0.5;
357
358var tests = [];
359var testIndex = 0;
360
361var ctx;
362
363function parse(test) {
364 var contours = [];
365 var contourStrs = test.split("path.close();");
caryclark@google.comd88e0892012-03-27 13:23:51 +0000366 var pattern = /-?\d+\.*\d*/g;
caryclark@google.com752b60e2012-03-22 21:11:17 +0000367 for (var c in contourStrs) {
caryclark@google.comfb173422012-04-10 18:28:55 +0000368 var contour = contourStrs[c];
369 var verbStrs = contour.split("path");
370 var verbs = [];
371 for (var v in verbStrs) {
372 var verbStr = verbStrs[v];
373 var points = verbStr.match(pattern);
374 var pts = [];
375 for (var wd in points) {
376 var num = parseFloat(points[wd]);
377 if (isNaN(num)) continue;
378 pts.push(num);
379 }
380 if (pts.length > 0)
381 verbs.push(pts);
caryclark@google.com752b60e2012-03-22 21:11:17 +0000382 }
caryclark@google.comfa0588f2012-04-26 21:01:06 +0000383 if (verbs.length > 0) {
384 var lastIndex = verbs.length - 1;
385 var lastVerb = verbs[lastIndex];
386 var lastLen = lastVerb.length;
387 if (verbs[0][0] != lastVerb[lastLen - 2] && verbs[0][1] != lastVerb[lastLen - 1]) {
388 var lastPts = [];
389 lastPts.push(verbs[0][0]);
390 lastPts.push(verbs[0][1]);
391 verbs.push(lastPts);
392 }
caryclark@google.comfb173422012-04-10 18:28:55 +0000393 contours.push(verbs);
caryclark@google.comfa0588f2012-04-26 21:01:06 +0000394 }
caryclark@google.com752b60e2012-03-22 21:11:17 +0000395 }
caryclark@google.comfb173422012-04-10 18:28:55 +0000396 if (contours.length > 0)
397 tests.push(contours);
caryclark@google.com752b60e2012-03-22 21:11:17 +0000398}
399
400function init(test) {
401 var canvas = document.getElementById('canvas');
402 if (!canvas.getContext) return;
403 ctx = canvas.getContext('2d');
404 var xmin = Infinity;
405 var xmax = -Infinity;
406 var ymin = Infinity;
407 var ymax = -Infinity;
caryclark@google.comfb173422012-04-10 18:28:55 +0000408 for (var contours in test) {
409 var contour = test[contours];
410 for (var verbs in contour) {
411 var verb = contour[verbs];
412 var last = verb.length;
caryclark@google.comb45a1b42012-05-18 20:50:33 +0000413 for (var idx = 0; idx < last; idx += 2) {
414 xmin = Math.min(xmin, verb[idx]);
415 xmax = Math.max(xmax, verb[idx]);
416 ymin = Math.min(ymin, verb[idx + 1]);
417 ymax = Math.max(ymax, verb[idx + 1]);
418 }
caryclark@google.com752b60e2012-03-22 21:11:17 +0000419 }
420 }
421 var subscale = 1;
422 while ((xmax - xmin) * subscale < 0.1 && (ymax - ymin) * subscale < 0.1) {
423 subscale *= 10;
424 }
425 columns = Math.ceil(xmax) - Math.floor(xmin) + 1;
426 rows = Math.ceil(ymax) - Math.floor(ymin) + 1;
427 xStart = Math.floor(xmin);
428 yStart = Math.floor(ymin);
429 var hscale = ctx.canvas.width / columns / ticks;
430 var vscale = ctx.canvas.height / rows / ticks;
431 scale = Math.floor(Math.min(hscale, vscale)) * subscale;
432}
433
434function drawPoint(px, py, xoffset, yoffset, unit) {
caryclark@google.comd88e0892012-03-27 13:23:51 +0000435 var label = px.toFixed(3) + ", " + py.toFixed(3);
caryclark@google.com752b60e2012-03-22 21:11:17 +0000436 var _px = px * unit + xoffset;
437 var _py = py * unit + yoffset;
438 ctx.beginPath();
439 ctx.arc(_px, _py, 3, 0, Math.PI*2, true);
440 ctx.closePath();
441 ctx.fill();
442 ctx.fillText(label, _px + 5, _py);
443}
444
445function draw(test, _at_x, _at_y, scale) {
446 var unit = scale * ticks;
447 ctx.lineWidth = 1;
448 var i;
449 for (i = 0; i <= rows * ticks; ++i) {
450 ctx.strokeStyle = (i % ticks) != 0 ? "rgb(160,160,160)" : "black";
451 ctx.beginPath();
452 ctx.moveTo(_at_x + 0, _at_y + i * scale);
453 ctx.lineTo(_at_x + unit * columns, _at_y + i * scale);
454 ctx.stroke();
455 }
456 for (i = 0; i <= columns * ticks; ++i) {
457 ctx.strokeStyle = (i % ticks) != 0 ? "rgb(160,160,160)" : "black";
458 ctx.beginPath();
459 ctx.moveTo(_at_x + i * scale, _at_y + 0);
460 ctx.lineTo(_at_x + i * scale, _at_y + unit * rows);
461 ctx.stroke();
462 }
463
464 var xoffset = xStart * -unit + _at_x;
465 var yoffset = yStart * -unit + _at_y;
466
467 ctx.fillStyle = "rgb(40,80,60)"
468 for (i = 0; i <= columns; i += (1 / ticks))
469 {
470 num = (xoffset - _at_x) / -unit + i;
471 ctx.fillText(num.toFixed(0), i * unit + _at_y - 5, 10);
472 }
473 for (i = 0; i <= rows; i += (1 / ticks))
474 {
475 num = (yoffset - _at_x) / -unit + i;
476 ctx.fillText(num.toFixed(0), 0, i * unit + _at_y + 0);
477 }
478 ctx.strokeStyle = "red";
caryclark@google.comfb173422012-04-10 18:28:55 +0000479 var contours, verbs, pts;
caryclark@google.com8dcf1142012-07-02 20:27:02 +0000480 ctx.beginPath();
caryclark@google.comfb173422012-04-10 18:28:55 +0000481 for (contours in test) {
482 var contour = test[contours];
483 if (contours == 2) ctx.strokeStyle = "blue";
caryclark@google.comfb173422012-04-10 18:28:55 +0000484 var first = true;
485 for (verbs in contour) {
486 var verb = contour[verbs];
487 switch (verb.length) {
488 case 2:
489 if (first) {
490 ctx.moveTo(xoffset + verb[0] * unit, yoffset + verb[1] * unit);
491 first = false;
492 } else
493 ctx.lineTo(xoffset + verb[0] * unit, yoffset + verb[1] * unit);
494 break;
495 case 4:
496 ctx.quadraticCurveTo(xoffset + verb[0] * unit, yoffset + verb[1] * unit,
497 xoffset + verb[2] * unit, yoffset + verb[3] * unit);
498 break;
499 case 6:
500 ctx.bezierCurveTo(xoffset + verb[0] * unit, yoffset + verb[1] * unit,
501 xoffset + verb[2] * unit, yoffset + verb[3] * unit,
502 xoffset + verb[4] * unit, yoffset + verb[5] * unit);
503 break;
504 }
caryclark@google.com752b60e2012-03-22 21:11:17 +0000505 }
caryclark@google.com8dcf1142012-07-02 20:27:02 +0000506 ctx.closePath();
caryclark@google.com752b60e2012-03-22 21:11:17 +0000507 }
caryclark@google.com8dcf1142012-07-02 20:27:02 +0000508 ctx.stroke();
509 ctx.fillStyle="rgba(192,192,255, 0.3)";
510 ctx.fill();
caryclark@google.com752b60e2012-03-22 21:11:17 +0000511
512 ctx.fillStyle="blue";
caryclark@google.comfb173422012-04-10 18:28:55 +0000513 for (contours in test) {
514 var contour = test[contours];
515 for (verbs in contour) {
516 var verb = contour[verbs];
517 for (i = 0; i < verb.length; i += 2) {
518 x = verb[i];
519 y = verb[i + 1];
520 drawPoint(x, y, xoffset, yoffset, unit);
521 }
caryclark@google.com752b60e2012-03-22 21:11:17 +0000522 }
523 }
524}
525
526var mouseX = Infinity, mouseY;
527
528function calcXY() {
529 var e = window.event;
530 var tgt = e.target || e.srcElement;
531 var left = tgt.offsetLeft;
532 var top = tgt.offsetTop;
533 var unit = scale * ticks;
534 mouseX = (e.clientX - left - Math.ceil(at_x) + 1) / unit + xStart;
535 mouseY = (e.clientY - top - Math.ceil(at_y)) / unit + yStart;
536}
537
538function handleMouseOver() {
539 calcXY();
540 var num = mouseX.toFixed(3) + ", " + mouseY.toFixed(3);
541 ctx.beginPath();
542 ctx.rect(300,100,200,10);
543 ctx.fillStyle="white";
544 ctx.fill();
545 ctx.fillStyle="black";
546 ctx.fillText(num, 300, 108);
547}
548
549function handleMouseClick() {
550 calcXY();
551// drawInset();
552}
553
554function drawTop() {
555 init(tests[testIndex]);
556 redraw();
557}
558
559function redraw() {
560 ctx.beginPath();
561 ctx.rect(0, 0, ctx.canvas.width, ctx.canvas.height);
562 ctx.fillStyle="white";
563 ctx.fill();
564 draw(tests[testIndex], at_x, at_y, scale);
565// if (insetScale != scale && mouseX != Infinity)
566// drawInset();
567}
568
569function doKeyPress(evt) {
570 var char = String.fromCharCode(evt.charCode);
571 switch (char) {
572 case 'N':
573 case 'n':
574 if (++testIndex >= tests.length)
575 testIndex = 0;
caryclark@google.comfa0588f2012-04-26 21:01:06 +0000576 mouseX = Infinity;
577 drawTop();
578 break;
579 case 'P':
580 case 'p':
581 if (--testIndex < 0)
582 testIndex = tests.length - 1;
caryclark@google.com752b60e2012-03-22 21:11:17 +0000583 mouseX = Infinity;
584 drawTop();
585 break;
586 case 'T':
587 case 't':
caryclark@google.com752b60e2012-03-22 21:11:17 +0000588 break;
589 case '-':
caryclark@google.com752b60e2012-03-22 21:11:17 +0000590 redraw();
591 break;
592 case '=':
593 case '+':
caryclark@google.com752b60e2012-03-22 21:11:17 +0000594 redraw();
595 break;
596 }
597}
598
599function start() {
600 for (i = 0; i < testDivs.length; ++i) {
601 var str = testDivs[i].firstChild.data;
602 parse(str);
603 }
604 drawTop();
605 window.addEventListener('keypress', doKeyPress, true);
606}
607
608</script>
609</head>
610
611<body onLoad="start();">
612<canvas id="canvas" width="1500" height="1000"
613 onmousemove="handleMouseOver()"
614 onclick="handleMouseClick()"
615 ></canvas >
616</body>
617</html>