canvas-cursor.html | Explore in Territory

<html>
<body>
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>
<canvas id="c" width="40" height="40"></canvas>
<script type="text/javascript">
var angle = 0;
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');

function drawArrow() {
    angle = angle + 0.1;
    canvas.width = canvas.width; // reset canvas

    ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2);
    ctx.rotate(angle);
    ctx.beginPath();
    ctx.rect(-10,-10, 20, 20);
    ctx.fill();

    document.body.style.cursor = 'url('+canvas.toDataURL()+'), pointer';
    requestAnimationFrame(drawArrow);
}

requestAnimationFrame(drawArrow);

</script>
</body>
</html>

chromium/third_party/blink/manual_tests/canvas-cursor.html