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 x1 = 1
var x2 = 50
var r1 = 1
image.src = "http://s3.cdn03.imgwykop.pl/static/wykoppl/img/favicon-160x160.png";
image.onload = function () {
    ctx.drawImage(image, x1, x2, 100, 100);
}

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