OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <title>Synchronized screenshot test</title> | 4 <title>Synchronized screenshot test with canvas</title> |
5 <style> | 5 <style> |
6 html, body { margin: 0; } | 6 html, body { margin: 0; } |
7 </style> | 7 </style> |
8 </head> | 8 </head> |
9 <body> | 9 <body> |
10 <canvas id="canvas" width="256" height="256"></canvas> | 10 <canvas id="canvas" width="256" height="256" style="position: absolute; left;
0px; top: 0px;"></canvas> |
11 <div id="text"></div> | 11 <div id="text"></div> |
12 | 12 |
13 <script> | 13 <script> |
14 var canvas = document.getElementById("canvas"); | 14 var canvas = document.getElementById("canvas"); |
15 var ctx = canvas.getContext("2d"); | 15 var ctx = canvas.getContext("2d"); |
16 var text = document.getElementById("text"); | 16 var text = document.getElementById("text"); |
17 function draw(r, g, b) { | 17 function draw(r, g, b) { |
18 var rgb = "RGB(" + r + "," + g + "," + b + ")"; | 18 var rgb = "RGB(" + r + "," + g + "," + b + ")"; |
19 text.textContent = rgb; | 19 text.textContent = rgb; |
20 ctx.fillStyle = rgb; | 20 ctx.fillStyle = rgb; |
21 ctx.fillRect(0, 0, canvas.width, canvas.height); | 21 ctx.fillRect(0, 0, canvas.width, canvas.height); |
22 } | 22 } |
23 </script> | 23 </script> |
24 </body> | 24 </body> |
25 </html> | 25 </html> |
OLD | NEW |