html5jp_graphs 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (40) hide show
  1. data/.gitigore +2 -0
  2. data/README.rdoc +82 -0
  3. data/Rakefile +22 -0
  4. data/html5jp_graphs.gemspec +17 -0
  5. data/lib/examples/sample_graph_circle_1.html +54 -0
  6. data/lib/examples/sample_graph_circle_2.html +61 -0
  7. data/lib/examples/sample_graph_line_1.html +44 -0
  8. data/lib/examples/sample_graph_line_2.html +53 -0
  9. data/lib/examples/sample_graph_radar_1.html +47 -0
  10. data/lib/examples/sample_graph_radar_2.html +52 -0
  11. data/lib/examples/sample_graph_vbar_1.html +51 -0
  12. data/lib/examples/sample_graph_vbar_2.html +52 -0
  13. data/lib/examples/sample_graph_vbar_3.html +52 -0
  14. data/lib/examples/sample_graph_vbar_4.html +52 -0
  15. data/lib/generators/html5jp_graphs/USAGE +8 -0
  16. data/lib/generators/html5jp_graphs/html5jp_graphs_generator.rb +12 -0
  17. data/lib/generators/html5jp_graphs/templates/excanvas/AUTHORS +10 -0
  18. data/lib/generators/html5jp_graphs/templates/excanvas/COPYING +202 -0
  19. data/lib/generators/html5jp_graphs/templates/excanvas/README +22 -0
  20. data/lib/generators/html5jp_graphs/templates/excanvas/examples/example1.html +93 -0
  21. data/lib/generators/html5jp_graphs/templates/excanvas/examples/example2.html +513 -0
  22. data/lib/generators/html5jp_graphs/templates/excanvas/examples/example3.html +284 -0
  23. data/lib/generators/html5jp_graphs/templates/excanvas/examples/ff.jpg +0 -0
  24. data/lib/generators/html5jp_graphs/templates/excanvas/excanvas-compressed.js +19 -0
  25. data/lib/generators/html5jp_graphs/templates/excanvas/excanvas.js +785 -0
  26. data/lib/generators/html5jp_graphs/templates/excanvas/testcases/arc.html +49 -0
  27. data/lib/generators/html5jp_graphs/templates/excanvas/testcases/linewidth.html +47 -0
  28. data/lib/generators/html5jp_graphs/templates/excanvas/testcases/overflow.html +37 -0
  29. data/lib/generators/html5jp_graphs/templates/excanvas/testcases/quadraticcurve.html +74 -0
  30. data/lib/generators/html5jp_graphs/templates/excanvas/testcases/resizing.html +65 -0
  31. data/lib/generators/html5jp_graphs/templates/graph/circle.js +407 -0
  32. data/lib/generators/html5jp_graphs/templates/graph/line.js +577 -0
  33. data/lib/generators/html5jp_graphs/templates/graph/radar.js +545 -0
  34. data/lib/generators/html5jp_graphs/templates/graph/vbar.js +1156 -0
  35. data/lib/html5jp_graphs.rb +1 -0
  36. data/lib/html5jp_graphs/version.rb +3 -0
  37. data/lib/html5jp_graphs_helper.rb +255 -0
  38. data/tasks/html5jp_graphs_tasks.rake +4 -0
  39. data/test/html5jp_graphs_test.rb +8 -0
  40. metadata +88 -0
data/lib/generators/html5jp_graphs/templates/excanvas/README ADDED
@@ -0,0 +1,22 @@
1
+ ExplorerCanvas
2
+ Copyright 2006 Google Inc.
3
+
4
+ -------------------------------------------------------------------------------
5
+ DESCRIPTION
6
+
7
+ Firefox, Safari and Opera 9 support the canvas tag to allow 2D command-based
8
+ drawing operations. ExplorerCanvas brings the same functionality to Internet
9
+ Explorer; web developers only need to include a single script tag in their
10
+ existing canvas webpages to enable this support.
11
+
12
+
13
+ -------------------------------------------------------------------------------
14
+ INSTALLATION
15
+
16
+ Include the ExplorerCanvas tag in the same directory as your HTML files, and
17
+ add the following code to your page, preferably in the <head> tag.
18
+
19
+ <!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
20
+
21
+ If you run into trouble, please look at the included example code to see how
22
+ to best implement this
data/lib/generators/html5jp_graphs/templates/excanvas/examples/example1.html ADDED
@@ -0,0 +1,93 @@
1
+ <!--
2
+ Copyright 2006 Google Inc.
3
+
4
+ Licensed under the Apache License, Version 2.0 (the "License");
5
+ you may not use this file except in compliance with the License.
6
+ You may obtain a copy of the License at
7
+
8
+ http://www.apache.org/licenses/LICENSE-2.0
9
+
10
+ Unless required by applicable law or agreed to in writing, software
11
+ distributed under the License is distributed on an "AS IS" BASIS,
12
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
+ See the License for the specific language governing permissions and
14
+ limitations under the License.
15
+ -->
16
+ <html>
17
+ <head>
18
+ <title>ExplorerCanvas Example 1</title>
19
+ <!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
20
+ <script type="text/javascript">
21
+ var canvas, ctx;
22
+ var particles = [];
23
+ var NUM_PARTICLES = 20;
24
+
25
+ function Particle() {
26
+ this.x = Math.random() * canvas.width;
27
+ this.y = Math.random() * canvas.height;
28
+
29
+ this.xvel = Math.random() * 5 - 2.5;
30
+ this.yvel = Math.random() * 5 - 2.5;
31
+ }
32
+
33
+ Particle.prototype.update = function() {
34
+ this.x += this.xvel;
35
+ this.y += this.yvel;
36
+
37
+ this.yvel += 0.1;
38
+
39
+ if (this.x > canvas.width || this.x < 0) {
40
+ this.xvel = -this.xvel;
41
+ }
42
+
43
+ if (this.y > canvas.height || this.y < 0) {
44
+ this.yvel = -this.yvel;
45
+ }
46
+ }
47
+
48
+ function loop() {
49
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
50
+
51
+ for(var i = 0; i < NUM_PARTICLES; i++) {
52
+ particles[i].update();
53
+
54
+ ctx.beginPath();
55
+ ctx.moveTo(particles[i].x, particles[i].y);
56
+ ctx.lineTo(particles[i].x - particles[i].xvel,
57
+ particles[i].y - particles[i].yvel);
58
+ ctx.stroke();
59
+ ctx.closePath();
60
+ }
61
+
62
+ setTimeout(loop, 10);
63
+ }
64
+
65
+ function load() {
66
+ canvas = document.getElementById("cv");
67
+ ctx = canvas.getContext("2d");
68
+
69
+ for(var i = 0; i < NUM_PARTICLES; i++) {
70
+ particles[i] = new Particle();
71
+ }
72
+
73
+ ctx.lineWidth = "2";
74
+ ctx.strokeStyle = "rgb(255, 255, 255)";
75
+ loop();
76
+ }
77
+ </script>
78
+ <style>
79
+ body {
80
+ background-color:black;
81
+ margin:50px;
82
+ text-align:center;
83
+ }
84
+
85
+ canvas {
86
+ border:1px solid #444;
87
+ }
88
+ </style>
89
+ </head>
90
+ <body onload="load();">
91
+ <canvas id="cv" width="400" height="300"></canvas>
92
+ </body>
93
+ </html>
data/lib/generators/html5jp_graphs/templates/excanvas/examples/example2.html ADDED
@@ -0,0 +1,513 @@
1
+ <!--
2
+ Copyright 2006 Google Inc.
3
+
4
+ Licensed under the Apache License, Version 2.0 (the "License");
5
+ you may not use this file except in compliance with the License.
6
+ You may obtain a copy of the License at
7
+
8
+ http://www.apache.org/licenses/LICENSE-2.0
9
+
10
+ Unless required by applicable law or agreed to in writing, software
11
+ distributed under the License is distributed on an "AS IS" BASIS,
12
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
+ See the License for the specific language governing permissions and
14
+ limitations under the License.
15
+ -->
16
+ <html>
17
+ <head>
18
+ <title>ExplorerCanvas Example 1</title>
19
+ <!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
20
+ <script type="text/javascript">
21
+ /* -------------------------------------------------------------------- */
22
+
23
+ var canvas, ctx;
24
+ var canvasWidth, halfCanvasWidth;
25
+ var canvasHeight, halfCanvasHeight;
26
+
27
+ var space; // 3D Engine
28
+ var scene; // 3D Scene
29
+
30
+ /* -------------------------------------------------------------------- */
31
+
32
+ /**
33
+ * Space is a simple 3D system.
34
+ *
35
+ * Y+ = up
36
+ * Z+ = into screen
37
+ * X+ = right
38
+ */
39
+ function Space() {
40
+ this.m = this.createMatrixIdentity();
41
+ this.mStack = [];
42
+ }
43
+
44
+ Space.prototype.createMatrixIdentity = function() {
45
+ return [
46
+ [1, 0, 0, 0],
47
+ [0, 1, 0, 0],
48
+ [0, 0, 1, 0],
49
+ [0, 0, 0, 1]
50
+ ];
51
+ }
52
+
53
+ /**
54
+ * Multiplies two 4x4 matricies together.
55
+ */
56
+ Space.prototype.matrixMultiply = function(m1, m2) {
57
+ var result = this.createMatrixIdentity();
58
+
59
+ var width = m1[0].length;
60
+ var height = m1.length;
61
+
62
+ if (width != m2.length) {
63
+ // error
64
+ }
65
+
66
+ for (var x = 0; x < width; x++) {
67
+ for (var y = 0; y < height; y++) {
68
+ var sum = 0;
69
+
70
+ for (var z = 0; z < width; z++) {
71
+ sum += m1[y][z] * m2[z][x];
72
+ }
73
+
74
+ result[y][x] = sum;
75
+ }
76
+ }
77
+
78
+ return result;
79
+ }
80
+
81
+ /**
82
+ * Transforms a coordinate using the current transformation
83
+ * matrix, then flattens it using the projection matrix.
84
+ */
85
+ Space.prototype.flatten = function(point) {
86
+ var p = [[point.x, point.y, point.z, 1]];
87
+ var pm = this.matrixMultiply(p, this.m);
88
+
89
+ point.tx = pm[0][0];
90
+ point.ty = pm[0][1];
91
+ point.tz = pm[0][2];
92
+
93
+ // lazy projection
94
+ point.fx = halfCanvasWidth + (canvasWidth * point.tx / point.tz);
95
+ point.fy = halfCanvasHeight -(canvasWidth * point.ty / point.tz);
96
+ }
97
+
98
+ /**
99
+ * Translate (move) the current transformation matrix
100
+ */
101
+ Space.prototype.translate = function(x, y, z) {
102
+ var m = [
103
+ [1, 0, 0, 0],
104
+ [0, 1, 0, 0],
105
+ [0, 0, 1, 0],
106
+ [x, y, z, 1]
107
+ ];
108
+
109
+ this.m = this.matrixMultiply(m, this.m);
110
+ }
111
+
112
+ /**
113
+ * Rotate the current transformation matrix. Rotations are
114
+ * world-oriented, and occur in y,x,z order.
115
+ */
116
+ Space.prototype.rotate = function(x, y, z) {
117
+ if (y) {
118
+ var cosY = Math.cos(y);
119
+ var sinY = Math.sin(y);
120
+ var rotY = [
121
+ [cosY, 0, sinY, 0],
122
+ [0, 1, 0, 0],
123
+ [-sinY, 0, cosY, 0],
124
+ [0, 0, 0, 1]
125
+ ];
126
+
127
+ this.m = this.matrixMultiply(this.m, rotY);
128
+ }
129
+
130
+ if (x) {
131
+ var cosX = Math.cos(x);
132
+ var sinX = Math.sin(x);
133
+ var rotX = [
134
+ [1, 0, 0, 0],
135
+ [0, cosX, -sinX, 0],
136
+ [0, sinX, cosX,0],
137
+ [0, 0, 0, 1]
138
+ ];
139
+ this.m = this.matrixMultiply(this.m, rotX);
140
+ }
141
+
142
+ if (z) {
143
+ var cosZ = Math.cos(z);
144
+ var sinZ = Math.sin(z);
145
+ var rotZ = [
146
+ [cosZ, -sinZ, 0, 0],
147
+ [sinZ, cosZ, 0, 0],
148
+ [0, 0, 1, 0],
149
+ [0, 0, 0, 1]
150
+ ];
151
+
152
+ this.m = this.matrixMultiply(this.m, rotZ);
153
+ }
154
+ }
155
+
156
+ /**
157
+ * Pushes the current transformation onto the stack
158
+ */
159
+ Space.prototype.push = function() {
160
+ this.mStack.push(this.m);
161
+ this.m = [
162
+ [this.m[0][0], this.m[0][1], this.m[0][2], this.m[0][3]],
163
+ [this.m[1][0], this.m[1][1], this.m[1][2], this.m[1][3]],
164
+ [this.m[2][0], this.m[2][1], this.m[2][2], this.m[2][3]],
165
+ [this.m[3][0], this.m[3][1], this.m[3][2], this.m[3][3]]
166
+ ];
167
+ }
168
+
169
+ /**
170
+ * Pops the end off the transformation stack
171
+ */
172
+ Space.prototype.pop = function() {
173
+ this.m = this.mStack.pop();
174
+ }
175
+
176
+ /* -------------------------------------------------------------------- */
177
+
178
+ /**
179
+ * A 3d coordinate
180
+ */
181
+ function Point(x, y, z) {
182
+ this.x = x;
183
+ this.y = y;
184
+ this.z = z;
185
+
186
+ // Relative to camera coordinates
187
+ this.tx;
188
+ this.ty;
189
+ this.tz;
190
+
191
+ // Flattened coordinates
192
+ this.fx;
193
+ this.fy;
194
+ }
195
+
196
+ /**
197
+ * A Shape is made up of polygons
198
+ */
199
+ function Shape() {
200
+ this.points = [];
201
+ this.polygons = [];
202
+ }
203
+
204
+ /**
205
+ * Draws the shape
206
+ */
207
+ Shape.prototype.draw = function(drawlist) {
208
+ for (var i = 0; i< this.points.length; i++) {
209
+ space.flatten(this.points[i]);
210
+ }
211
+
212
+ for (var i = 0; i< this.polygons.length; i++) {
213
+ var poly = this.polygons[i]; // convenience
214
+
215
+ space.flatten(poly.origin);
216
+
217
+ // lazy backface culling
218
+ if (poly.normal && this.backface) {
219
+ space.flatten(poly.normal);
220
+
221
+ var originDist = Math.pow(poly.origin.tx, 2)
222
+ + Math.pow(poly.origin.ty, 2)
223
+ + Math.pow(poly.origin.tz, 2);
224
+
225
+ var normalDist = Math.pow(poly.normal.tx, 2)
226
+ + Math.pow(poly.normal.ty, 2)
227
+ + Math.pow(poly.normal.tz, 2);
228
+
229
+ if(originDist > normalDist) {
230
+ drawlist.push(poly);
231
+ }
232
+ } else {
233
+ drawlist.push(poly);
234
+ }
235
+ }
236
+ }
237
+
238
+ /**
239
+ * A polygon is a connection of points in the shape object. You
240
+ * should probably try to make them coplanar.
241
+ */
242
+ function Polygon(points, normal, backface, type, color) {
243
+ this.points = points;
244
+
245
+ this.origin = new Point(0, 0, 0);
246
+ for(var i = 0; i < this.points.length; i++) {
247
+ this.origin.x += this.points[i].x;
248
+ this.origin.y += this.points[i].y;
249
+ this.origin.z += this.points[i].z;
250
+ }
251
+
252
+ this.origin.x /= this.points.length;
253
+ this.origin.y /= this.points.length;
254
+ this.origin.z /= this.points.length;
255
+
256
+ if (normal) {
257
+ this.normal = new Point(this.origin.x + normal.x,
258
+ this.origin.y + normal.y,
259
+ this.origin.z + normal.z);
260
+ } else {
261
+ this.normal = null;
262
+ }
263
+
264
+ this.backface = backface;
265
+ this.type = type;
266
+ this.color = color;
267
+ }
268
+
269
+ Polygon.SOLID = 0;
270
+ Polygon.WIRE = 1;
271
+
272
+ /**
273
+ * Draws the polygon. Assumes that the points have already been
274
+ * flattened.
275
+ */
276
+ Polygon.prototype.draw = function() {
277
+ ctx.beginPath();
278
+ ctx.moveTo(this.points[0].fx, this.points[0].fy);
279
+
280
+ for(var i = 0; i < this.points.length; i++) {
281
+ ctx.lineTo(this.points[i].fx, this.points[i].fy);
282
+ }
283
+
284
+ ctx.closePath();
285
+
286
+ var color = this.color;
287
+
288
+ /*
289
+ // Do lighting here
290
+ lightvector = Math.abs(this.normal.x + this.normal.y);
291
+ if(lightvector > 1) {
292
+ lightvector = 1;
293
+ }
294
+
295
+ color[0] = (color[0] * lightvector).toString();
296
+ color[1] = (color[1] * lightvector).toString();
297
+ color[2] = (color[2] * lightvector).toString();
298
+ */
299
+
300
+ if (color.length > 3) {
301
+ var style = ["rgba(",
302
+ color[0], ",",
303
+ color[1], ",",
304
+ color[2], ",",
305
+ color[3], ")"].join("");
306
+ } else {
307
+ var style = ["rgb(",
308
+ color[0], ",",
309
+ color[1], ",",
310
+ color[2], ")"].join("");
311
+ }
312
+
313
+ if (this.type == Polygon.SOLID) {
314
+ ctx.fillStyle = style;
315
+ ctx.fill();
316
+ } else if (this.type == Polygon.WIRE) {
317
+ ctx.strokeStyle = style;
318
+ ctx.stroke();
319
+ }
320
+ }
321
+
322
+ /* -------------------------------------------------------------------- */
323
+
324
+ /**
325
+ * Scene describes the 3D environment
326
+ */
327
+ function Scene() {
328
+ this.shapes = {};
329
+ this.camera = new Point(0, 0, 0);
330
+ this.cameraTarget = new Point(0, 0, 0);
331
+ this.cameraRotation = 0;
332
+
333
+ this.drawlist = [];
334
+ }
335
+
336
+ /**
337
+ * Draw the world
338
+ */
339
+ Scene.prototype.draw = function() {
340
+ space.push();
341
+
342
+ // Camera transformation
343
+ space.translate(
344
+ -this.camera.x,
345
+ -this.camera.y,
346
+ -this.camera.z
347
+ );
348
+
349
+ // Camera rotation
350
+ var xdiff = this.cameraTarget.x - this.camera.x;
351
+ var ydiff = this.cameraTarget.y - this.camera.y;
352
+ var zdiff = this.cameraTarget.z - this.camera.z;
353
+
354
+ var xzdist = Math.sqrt(Math.pow(xdiff, 2) + Math.pow(zdiff, 2));
355
+
356
+ var xrot = -Math.atan2(ydiff, xzdist); // up/down rotation
357
+ var yrot = Math.atan2(xdiff, zdiff); // left/right rotation
358
+
359
+ space.rotate(xrot, yrot, this.cameraRotation);
360
+
361
+ // Drawing
362
+ this.drawlist = [];
363
+
364
+ for(var i in this.shapes) {
365
+ this.shapes[i].draw(this.drawlist);
366
+ }
367
+
368
+ // Depth sorting (warning: this is only enough to drive this demo - feel
369
+ // free to contribute a better system).
370
+ this.drawlist.sort(function (poly1, poly2) {
371
+ return poly2.origin.tz - poly1.origin.tz;
372
+ });
373
+
374
+ for (var i = 0; i < this.drawlist.length; i++) {
375
+ this.drawlist[i].draw();
376
+ }
377
+
378
+ space.pop();
379
+ }
380
+
381
+ /* -------------------------------------------------------------------- */
382
+
383
+ var count = 0;
384
+
385
+ function loop() {
386
+ ctx.clearRect(0, 0, canvasWidth, canvasHeight);
387
+
388
+ scene.camera.x = 70*Math.sin(count);
389
+ scene.camera.y = 70;
390
+ scene.camera.z = 70*Math.cos(count);
391
+ scene.cameraRotation = count / 10;
392
+
393
+ count += 0.01;
394
+ scene.draw();
395
+ }
396
+
397
+ function load() {
398
+ // Init drawing system
399
+ canvas = document.getElementById("cv");
400
+ ctx = canvas.getContext("2d");
401
+
402
+ canvasWidth = canvas.width;
403
+ canvasHeight = canvas.height;
404
+ halfCanvasWidth = canvasWidth * 0.5;
405
+ halfCanvasHeight = canvasHeight * 0.5;
406
+
407
+ // Init 3D components
408
+ space = new Space();
409
+ scene = new Scene();
410
+
411
+ // Create a box shape and add it to the scene
412
+ scene.shapes['box'] = new Shape();
413
+ var p = scene.shapes['box'].points; // for convenience
414
+
415
+ p[0] = new Point(-10, -10, -10); // left bottom front
416
+ p[1] = new Point(10, -10, -10); // right bottom front
417
+ p[2] = new Point(10, 10, -10); // right top front
418
+ p[3] = new Point(-10, 10, -10); // left top front
419
+
420
+ p[4] = new Point(-10, -10, 10); // left bottom back
421
+ p[5] = new Point(10, -10, 10); // right bottom back
422
+ p[6] = new Point(10, 10, 10); // right top back
423
+ p[7] = new Point(-10, 10, 10); // left top back
424
+
425
+ // Back
426
+ scene.shapes['box'].polygons.push(new Polygon(
427
+ [ p[0], p[1], p[2], p[3] ],
428
+ new Point(0, 0, -1),
429
+ true /* double-sided */,
430
+ Polygon.SOLID,
431
+ [255, 0, 0]
432
+ ));
433
+
434
+ // Front
435
+ scene.shapes['box'].polygons.push(new Polygon(
436
+ [ p[4], p[5], p[6], p[7] ],
437
+ new Point(0, 0, 1),
438
+ true /* double-sided */,
439
+ Polygon.SOLID,
440
+ [0, 0, 255]
441
+ ));
442
+
443
+ // Top
444
+ scene.shapes['box'].polygons.push(new Polygon(
445
+ [ p[2], p[3], p[7], p[6] ],
446
+ new Point(0, 1, 0),
447
+ false /* single-sided */,
448
+ Polygon.WIRE,
449
+ [0, 255, 0]
450
+ ));
451
+
452
+ // Transparent Top
453
+ scene.shapes['box'].polygons.push(new Polygon(
454
+ [ p[2], p[3], p[7], p[6] ],
455
+ new Point(0, 1, 0),
456
+ false /* single-sided */,
457
+ Polygon.SOLID,
458
+ [0, 255, 0, 0.4]
459
+ ));
460
+
461
+ // Left
462
+ scene.shapes['box'].polygons.push(new Polygon(
463
+ [ p[0], p[4], p[7], p[3] ],
464
+ new Point(-1, 0, 0),
465
+ true /* double-sided */,
466
+ Polygon.SOLID,
467
+ [255, 255, 0]
468
+ ));
469
+
470
+ // Right
471
+ scene.shapes['box'].polygons.push(new Polygon(
472
+ [ p[1], p[5], p[6], p[2] ],
473
+ new Point(1, 0, 0),
474
+ true /* double-sided */,
475
+ Polygon.SOLID,
476
+ [0, 255, 255]
477
+ ));
478
+
479
+ // Create a floor shape and add it to the scene
480
+ scene.shapes['floor'] = new Shape();
481
+ var p = scene.shapes['floor'].points; // for convenience
482
+
483
+ p[0] = new Point(-40, -10, -40);
484
+ p[1] = new Point(-40, -10, 40);
485
+ p[2] = new Point( 40, -10, 40);
486
+ p[3] = new Point( 40, -10, -40);
487
+
488
+ // Floor
489
+ scene.shapes['floor'].polygons.push(new Polygon(
490
+ [ p[0], p[1], p[2], p[3] ],
491
+ new Point(0, 1, 0),
492
+ false /* single-sided */,
493
+ Polygon.SOLID,
494
+ [45, 45, 45]
495
+ ));
496
+
497
+ setInterval('loop()', 20);
498
+ }
499
+
500
+ /* -------------------------------------------------------------------- */
501
+ </script>
502
+ <style>
503
+ body {
504
+ background-color:black;
505
+ margin:50px;
506
+ text-align:center;
507
+ }
508
+ </style>
509
+ </head>
510
+ <body onload="load();">
511
+ <canvas id="cv" width="400" height="300"></canvas>
512
+ </body>
513
+ </html>