|
1 <!-- Any copyright is dedicated to the Public Domain. |
|
2 http://creativecommons.org/publicdomain/zero/1.0/ --> |
|
3 <!doctype html> |
|
4 |
|
5 <html> |
|
6 <head> |
|
7 <meta charset="utf-8"/> |
|
8 <title>Canvas inspector test page</title> |
|
9 </head> |
|
10 |
|
11 <body> |
|
12 <canvas width="128" height="128"></canvas> |
|
13 |
|
14 <script type="text/javascript;version=1.8"> |
|
15 "use strict"; |
|
16 |
|
17 var ctx = document.querySelector("canvas").getContext("2d"); |
|
18 |
|
19 function drawRect(fill, size) { |
|
20 ctx.fillStyle = fill; |
|
21 ctx.fillRect(size[0], size[1], size[2], size[3]); |
|
22 } |
|
23 |
|
24 function drawScene() { |
|
25 ctx.clearRect(0, 0, 128, 128); |
|
26 drawRect("rgb(192, 192, 192)", [0, 0, 128, 128]); |
|
27 drawRect("rgba(0, 0, 192, 0.5)", [30, 30, 55, 50]); |
|
28 drawRect("rgba(192, 0, 0, 0.5)", [10, 10, 55, 50]); |
|
29 |
|
30 window.requestAnimationFrame(drawScene); |
|
31 } |
|
32 |
|
33 drawScene(); |
|
34 </script> |
|
35 </body> |
|
36 |
|
37 </html> |