| <!doctype html> | |
| <html> | |
| <head> | |
| <style> | |
| #canvas { | |
| width: 300px; | |
| height: 300px; | |
| position: absolute; | |
| left: 0px; | |
| top: 0px; | |
| } | |
| #overlay { | |
| width: 300px; | |
| height: 300px; | |
| position: absolute; | |
| left: 0px; | |
| top: 0px; | |
| overflow: hidden; | |
| } | |
| #follower { | |
| position: absolute; | |
| left: 0px; | |
| top: 0px; | |
| width: 50px; | |
| height: 50px; | |
| background-color: #00FF00; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="canvas"></canvas> | |
| <div id="overlay"><div id="follower"></div></div> | |
| <script> | |
| if (window.testRunner) { | |
| testRunner.waitUntilDone(); | |
| } | |
| var canvas = document.getElementById("canvas"); | |
| canvas.width = 300; | |
| canvas.height = 300; | |
| var ctx = canvas.getContext("2d"); | |
| ctx.fillStyle = "#FF0000"; | |
| var follower = document.getElementById("follower"); | |
| drawLoop = function() { | |
| // draw the object | |
| ctx.clearRect(0, 0, 300, 300); | |
| ctx.fillRect(0, 0, 50, 50); | |
| if (window.testRunner) { | |
| testRunner.notifyDone(); | |
| } | |
| }; | |
| window.setTimeout(drawLoop, 0); | |
| </script> | |
| </body> | |
| </html> | |