JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="300" height="300">

JavaScript

var myCanvas;
var ctx;
var timer;
var angle = 0;




// shim layer with setTimeout fallback
window.requestAnimFrame = (function() {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
    function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
        window.setTimeout(callback, 1000 / 60);
    };
})();



function animloop() {
    // alert("WW");
    draw();
    requestAnimFrame(animloop, myCanvas);
}

function init() {
    myCanvas = document.getElementById('myCanvas');
    ctx = myCanvas.getContext('2d');
    timer = 0;

    //return draw();
    return animloop();

}

function draw() {
    angle += 0.01;

    clear();
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(100,100);
    ctx.arc(100, 100, 50, 0, angle * Math.PI, false);
    ctx.closePath();
    ctx.clip();
    ctx.drawImage(img, 50, 50, 100, 100);
    ctx.restore();
    
    ctx.beginPath();
    ctx.arc(100, 100, 50, 0, angle * Math.PI, false);    
    ctx.lineCap = 'round';
    ctx.lineWidth = 2;
    ctx.stroke();
}



function clear() {
    return ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
}


function resetTimer() {
    return clearInterval(timer);
}


var img = new Image();
img.onload = init;
img.src = 'http://i.imgur.com/BwhsJ.jpg';