|
1 <!DOCTYPE html> |
|
2 <html> |
|
3 <head> |
|
4 <script type="text/javascript"><!-- |
|
5 window.onload = function () { |
|
6 var canvas = document.getElementById('testCanvas'), |
|
7 context = canvas.getContext('2d'); |
|
8 |
|
9 // draw a path |
|
10 context.beginPath(); |
|
11 context.moveTo(10, 10); |
|
12 context.lineTo(200, 10); |
|
13 context.lineTo(200, 200); |
|
14 context.stroke(); |
|
15 context.closePath(); |
|
16 |
|
17 context.clearRect(0, 0, canvas.width, canvas.height); |
|
18 |
|
19 // draw some text |
|
20 context.font = 'bold 40px sans-serif'; |
|
21 context.strokeText("Hello world!", 10, 50); |
|
22 }; |
|
23 // --></script> |
|
24 </head> |
|
25 <body> |
|
26 <p>You should see only see "Hello world!" below, without any additional |
|
27 line. JavaScript is required.</p> |
|
28 |
|
29 <p><canvas id="testCanvas" width="400" height="300">You need Canvas |
|
30 support.</canvas></p> |
|
31 |
|
32 </body> |
|
33 </html> |