OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <script> |
| 3 var ctx; |
| 4 window.onload = function () { |
| 5 if (window.testRunner) { |
| 6 testRunner.waitUntilDone(); |
| 7 } |
| 8 ctx = document.getElementById('c').getContext('2d'); |
| 9 ctx.fillStyle = 'green'; |
| 10 ctx.fillRect(0, 0, 100, 100); |
| 11 ctx.save(); |
| 12 ctx.translate(10, 0); |
| 13 requestAnimationFrame(blueSquare); |
| 14 } |
| 15 |
| 16 function blueSquare() { |
| 17 ctx.fillStyle = 'blue'; |
| 18 ctx.fillRect(0, 10, 80, 80); |
| 19 requestAnimationFrame(redSquare); |
| 20 } |
| 21 |
| 22 function redSquare() { |
| 23 ctx.fillStyle = 'red'; |
| 24 ctx.fillRect(10, 20, 60, 60); |
| 25 if (window.testRunner) { |
| 26 testRunner.notifyDone(); |
| 27 } |
| 28 } |
| 29 </script> |
| 30 <p>The canvas below should contain green, blue and red nested squares, all cente
red with respect to each other.</p> |
| 31 <canvas id="c" width="100" height="100"></canvas> |
OLD | NEW |