canvas-animation-update.html 719 B

12345678910111213141516171819202122232425262728293031
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. This test verifies that canvas animations update properly with anuimation loops that use setTimeout. Eight vertical green bars should appear below this text.
  5. <canvas id="c" width="400" height="200"></canvas>
  6. <script type="text/javascript">
  7. var canvas = document.getElementById('c');
  8. var ctx = canvas.getContext('2d');
  9. ctx.fillStyle = 'green';
  10. var xpos = 0;
  11. if (window.testRunner) {
  12. testRunner.waitUntilDone();
  13. }
  14. function draw() {
  15. ctx.fillRect(xpos, 0, 40, 200);
  16. xpos = xpos + 50;
  17. if (xpos < 400) {
  18. window.setTimeout(draw, 16);
  19. } else {
  20. if (window.testRunner) {
  21. testRunner.notifyDone();
  22. }
  23. }
  24. }
  25. draw();
  26. </script>
  27. </body>
  28. </html>