JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas"></canvas>

CSS

#canvas{
            height: 400;
            width: 400;
            background-color: aquamarine;
        }

JavaScript

// detecta se cada uma das teclas está pressionada
let up = false, down = false, left = false, right = false;
// A posição do personagem na tela
let pos = { x: 0, y: 0 };
// Velocidade de deslocamento do personagem (pode aumentar para ele andar mais posições de uma vez)
let velocidade = 1;

//Quando pressionada uma tecla específica sinaliza o seu estado como pressionado
document.addEventListener("keydown", (event) => {
    if (event.key == "ArrowUp") up = true;
    if (event.key == "ArrowDown") down = true;
    if (event.key == "ArrowLeft") left = true;
    if (event.key == "ArrowRight") right = true;
});

//Quando solta um tecla específica sinaliza o seu estado como não pressionado
document.addEventListener("keyup", (event) => {
    if (event.key == "ArrowUp") up = false;
    if (event.key == "ArrowDown") down = false;
    if (event.key == "ArrowLeft") left = false;
    if (event.key == "ArrowRight") right = false;
});

var canvas, ctx;
const color = 'black', altura = 10, largura = 10;
// Ao carregar a página...
window.addEventListener("load", () => {
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');
    pos.x = canvas.width / 2;
    pos.y = canvas.height / 2;
draw();
    //requestAnimationFrame(draw); //inicio do programa
});

// desenha o player na tela
function draw() {
    // Para cada uma das teclas do direcional verifica se está pressionada, e aplica um deslocamento
    if (up) pos.y -= velocidade;
    if (down) pos.y += velocidade;
    if (left) pos.x -= velocidade;
    if (right) pos.x += velocidade;

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillRect(pos.x, pos.y, largura, altura);
    ctx.fillStyle = color;
    requestAnimationFrame(draw); //looping do programa
}