OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <script> |
| 3 var context; |
| 4 |
| 5 window.onload = function() { |
| 6 if (window.testRunner) |
| 7 testRunner.waitUntilDone(); |
| 8 context = document.getElementById('c').getContext('2d'); |
| 9 context.scale(2,2); |
| 10 context.beginPath(); |
| 11 context.rect(0,0,75,75); |
| 12 context.clip(); |
| 13 context.fillStyle = 'red'; |
| 14 context.fillRect(0,0,30,30); |
| 15 context.fillRect(50,50,30,30); |
| 16 context.save(); |
| 17 context.scale(0.5,0.5); |
| 18 context.beginPath(); |
| 19 context.rect(0,0,5,5); |
| 20 context.clip(); |
| 21 requestAnimationFrame(drawSecondFrame); |
| 22 } |
| 23 |
| 24 function drawSecondFrame() { |
| 25 context.restore(); |
| 26 context.fillStyle = 'green'; |
| 27 context.fillRect(0,0,30,30); |
| 28 context.fillRect(50,50,30,30); |
| 29 if (window.testRunner) |
| 30 testRunner.notifyDone(); |
| 31 } |
| 32 </script> |
| 33 <p>Two green squares of different sizes should appear below</p> |
| 34 <canvas id="c" width="300" height="300"></canvas> |
OLD | NEW |