JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="200" height="274"></canvas>

JavaScript

var width = 29760, 
height = 274, 
frames = 60, 
currentFrame = 1, 
canvas = document.getElementById("myCanvas"), 
cv = canvas.width,
ctx = canvas.getContext("2d");
image = new Image()
image.src = 'http://allods.my.com/splash-screen/images/astrolabiazip.png';
var fps = 60, fpsInterval, startTime, now, then, elapsed;

function startAnimating(fps) {
    fpsInterval = 1000 / fps;
    then = Date.now();
    startTime = then;
    animate();
}

function animate() {
	requestAnimationFrame(animate);
	now = Date.now();
	elapsed = now - then;
  if (elapsed > fpsInterval) {
		then = now - (elapsed % fpsInterval);	
		ctx.clearRect(0, 0, cv, height);
		ctx.drawImage(image, (width*(currentFrame-1))/frames, 0, width/frames, height, cv/2 - (width/frames)/2, 0, width/frames, height);
		if (currentFrame == frames) {
			currentFrame = 1;
		} else {
			currentFrame++;
		}
	}
}
image.onload = function(){
	startAnimating(fps);
}