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 width = canvas.width;
var height = canvas.height;
var ctx = canvas.getContext("2d");
var image = new Image();
var x = 0
var y = 0
var r1 = 1

var offsetX = 0, offsetY = 0;
var directionX = 1, directionY = 0;

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.translate(offsetX, offsetY);
     
     ctx.drawImage(image, -(image.width/2), -(image.height/2));                
     
     ctx.restore();
     
     r1 += 8;     
               
     x += 2;     
     y = height * Math.sin(x/50);
     
     if(x > width){ x = -image.width }
 }, 16);