canvas-ClearRect-hidpi.html 639 B

12345678910111213141516171819202122232425262728293031
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <p>
  5. Test for crbug.com/609820. When running this test on Mac with retina display,
  6. the result should be a clear canvas with no artifact after a few seconds.
  7. </p>
  8. <canvas id='output' width='300' height='250'></canvas>
  9. <script>
  10. var repeat = 350;
  11. var x = y = 0;
  12. var canvas = document.getElementById("output");
  13. var ctx = canvas.getContext('2d');
  14. ctx.fillStyle = "#FF0000";
  15. requestAnimationFrame(animate);
  16. function animate()
  17. {
  18. ctx.clearRect(x, y, 50, 50);
  19. x++;
  20. y++;
  21. ctx.fillRect(x, y, 50, 50);
  22. repeat--;
  23. if (repeat > 0)
  24. requestAnimationFrame(animate);
  25. }
  26. </script>
  27. </body>
  28. </html>