canvas-putImageData-flicker.html 785 B

12345678910111213141516171819202122232425262728
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. This is a test should draw a fine filtered checkerboard pattern with no flickering. <br>
  5. This is a regression test for https://bugs.webkit.org/show_bug.cgi?id=64321. <br>
  6. <canvas id="c" width="300" height="300" style="width : 600px; height : 600px"></canvas>
  7. <script type="text/javascript">
  8. var canvas = document.getElementById('c');
  9. var ctx = canvas.getContext('2d');
  10. for (var x = 0; x < canvas.width; x++) {
  11. for (var y = 0; y < canvas.height; y++) {
  12. ctx.fillStyle = ((x + y) % 2) ? 'black' : 'white';
  13. ctx.fillRect(x, y, 1, 1);
  14. }
  15. }
  16. var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  17. function draw() {
  18. ctx.putImageData(imageData, 0, 0);
  19. window.setTimeout(draw, 0);
  20. }
  21. draw();
  22. </script>
  23. </body>
  24. </html>