| <!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: 50px; |
| top: 50px; |
| 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() { |
| // update the follower |
| follower.style.left = "0px"; |
| follower.style.top = "0px"; |
| |
| // 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> |
| |
