JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div id="x">
    <!-- delete up -->


<canvas id="canvas"> </canvas>
    </div>
    <button onclick="">UP</button>
    <button onclick="">DOWN</button>


</div>

CSS

canvas{
    width: 100%;
    height: 300px;
}
#x {
    width: 500px;
    height: 300px;
    border: 1px red solid;
}

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var image = new Image();
var x = 50
var y = 0
var r1 = 1
image.src = "http://s3.cdn03.imgwykop.pl/static/wykoppl/img/favicon-160x160.png";
image.onload = function () {
    ctx.drawImage(image, x, y);
}

 setInterval(function () {
     
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.save();       
            ctx.translate(x + image.width/2, y + image.height/2);
            ctx.rotate(-r1/180);
            ctx.drawImage(image, -(image.width/2), -(image.height/2));  
            ctx.restore();
           
             r1 += 1;
        }, 16);