JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="coin-spin"></canvas>

CSS

canvas {
	position:absolute;
	border:solid 1px #000;
	width:400px;
	height:400px;
	top:calc(50% - 200px);
	left:calc(50% - 200px);
	border-radius:4px;
}

JavaScript

var offscreenCanvas = document.createElement('canvas');

var cvs = document.getElementById('coin-spin'),
		ctx = cvs.getContext('2d'),
		w = cvs.width = 400,
		h = cvs.height = 400,
		cx = w / 2,
		cy = h / 2,
		a = 0;

	var img = new Image();
	var frameCount = 0;

	var loop = function() {
    frameCount++;
		// BG
		ctx.fillStyle = '#ccc';
		ctx.fillRect(0, 0, w, h);
		
    offscreenContext.fillStyle = '#ccc';
    offscreenContext.fillRect(0, 0, w, h);
    
    var imgRenderWidth = offscreenCanvas.width * Math.sin(frameCount/10.0)
    
    offscreenContext.save();
    offscreenContext.translate(img.width/2, img.height/2);
    offscreenContext.rotate(Math.PI / 180 * a);
    offscreenContext.translate((0-img.width)/2, (0-img.height)/2);
    offscreenContext.drawImage(img, 0,0);
    offscreenContext.restore();
    
		// draw image
		ctx.save();
		ctx.drawImage(offscreenCanvas, cx - (imgRenderWidth / 2), cy -  (offscreenCanvas.height / 2), imgRenderWidth, offscreenCanvas.height);
		ctx.restore();

		// axis
		ctx.strokeStyle = '#000';
		
		ctx.beginPath();
		ctx.moveTo(cx, 0);
		ctx.lineTo(cx, h);
		ctx.stroke();
		
		ctx.beginPath();
		ctx.moveTo(0, cy);
		ctx.lineTo(w, cy);
		ctx.stroke();
		
		//mod angle
		a++;
		window.requestAnimationFrame(loop);
	};

	img.onload = function() {
  	offscreenCanvas.width = img.width;
    offscreenCanvas.height = img.height;
    
		loop();
	};

	img.src = 'https://image.ibb.co/gqkeXx/coin.png';
  var offscreenContext =  offscreenCanvas.getContext('2d');