JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id = "canvas"></canvas>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

JavaScript

var canvas = document.getElementById("canvas");
var ctx=canvas.getContext("2d");
canvas.width = 750; //keeping ratio
canvas.height = 587; //keeping ratio
$('#canvas').css("height", window.innerHeight);
$('#canvas').css("width",  window.innerHeight * 1.277); //keeping the ratio
//and also resizing according to the window(not to overflow)
var board = new Image();
board.src = "https://s21.postimg.org/ko999yaaf/circ.png";
var circle = new Image();
circle.src = "https://s21.postimg.org/4zigxdh7r/circ.png";
ctx.drawImage(board, 0, 0);
var x = 10, y = 10;
ctx.drawImage(circle, x, y);
startMoving();

function startMoving(){
	  if(y > 310) return;
    y+=3;
    ctx.clearRect(0,0,750,587);
    ctx.drawImage(board, 0, 0);
	  ctx.drawImage(circle, x, y);
    setTimeout(function(){startMoving()}, 30);
}