| 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 |