JSFiddle - React, Tailwind, and code Playground

HTML

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Play ETYMOLOGY</title>
</head>
<body>
    <canvas id="gamescreen"></canvas>
    <div id="gametext">
         
    </div>
</body>
</html>

CSS

#gamescreen {
    height: 200px;
    width: 500px;
    border: 3px solid white;
    margin: auto;
    padding: 0;
    display: block;
    margin-top: 80px;
    background-color: paleturquoise;
}

#gametext {
    height: 200px;
    width: 500px;
    border: 3px solid white;
    margin: auto;
    padding: 0;
    display: block;
    margin-top: 5px;
}

body {
    background-color: black;
}

JavaScript

let canvas = document.getElementById("gamescreen");
let ctx = canvas.getContext("2d");
let height = canvas.height - 100;
let width = (canvas.width / 2) - 12.5;
setTimeout(function(){
   ctx.fillStyle = "red";
   ctx.fillRect(width, height, 25, 50); 
}, 50)



document.onkeydown = event => {
    ctx.fillStyle = "red";

    if (event.key == (keyCode == '38')) {
        height -= 25;
        ctx.clear();
        ctx.fillRect(width, height, 25, 50);
    }
    else if (event.keyCode == '40') {
        
    }
    else if (event.keyCode == '37') {
       
    }
    else if (event.keyCode == '39') {
       
    }
}