canvas-cursor.html 773 B

12345678910111213141516171819202122232425262728
  1. <html>
  2. <body>
  3. This is a test of our ability to convert a canvas to a data url and use it as a cursor. We pass if the cursor animates smoothly and without flickering.<br>
  4. <canvas id="c" width="40" height="40"></canvas>
  5. <script type="text/javascript">
  6. var angle = 0;
  7. var canvas = document.getElementById('c');
  8. var ctx = canvas.getContext('2d');
  9. function drawArrow() {
  10. angle = angle + 0.1;
  11. canvas.width = canvas.width; // reset canvas
  12. ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2);
  13. ctx.rotate(angle);
  14. ctx.beginPath();
  15. ctx.rect(-10,-10, 20, 20);
  16. ctx.fill();
  17. document.body.style.cursor = 'url('+canvas.toDataURL()+'), pointer';
  18. requestAnimationFrame(drawArrow);
  19. }
  20. requestAnimationFrame(drawArrow);
  21. </script>
  22. </body>
  23. </html>