JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <button id="downButton">вниз</button>
    <button id="upButton">ввер</button>
    <button id="rightButton">на право</button>
    <button id="leftButton">на лево</button>
    <canvas height='320' width='480' id='example'></canvas>
</body>

JavaScript

var example = document.getElementById("example"),
ctx = example.getContext('2d');
ctx.fillRect(0, 0, example.width, example.height);
var x = 0;
var y = 0;
var downButton = document.getElementById("downButton");
var upButton = document.getElementById("upButton");
var rightButton = document.getElementById("rightButton");
var leftButton = document.getElementById("leftButton");
downButton.onclick = function () { y++; }
upButton.onclick = function () { y--; } 
rightButton.onclick = function () { x++; } 
leftButton.onclick = function () { x--; } 

function box() {
	ctx.clearRect(0, 0, example.width, example.height);
	ctx.fillStyle = "green";
	ctx.fillRect(100, 100, 50, 50);
	ctx.fillStyle = "blue";
	ctx.fillRect(x, y, 50, 50); 
	setTimeout(box, 20);
}
box();