JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="600px" height="400px" style="border: 2px solid black;" ></canvas>

JavaScript

x = 50;
y = 50;
w = 150;
h = 100;
sw = 1.0;
sh = 1.0;

function drawRect() {
    var canvas = document.getElementById("canvas").getContext("2d");
    
    canvas.fillStyle = "white";
    canvas.fillRect(0, 0, 600, 400);
    
    canvas.fillStyle = "black";
    canvas.fillRect(x - (w * sw - w) / 2, y - (h * sh - h) / 2, w * sw, h * sh);
}

document.addEventListener("keydown", function(e) {
    var key = e.keyCode;
    
    console.log(key);
    
    if (key == 107 && sw < 1.95) {
        sw += 0.1;
    } else if (key == 109 && sw > 0.55) {
        sw -= 0.1;
    } else if (key == 221 && sh < 1.95) {
        sh += 0.1;
    } else if (key == 219 && sh > 0.55) {
        sh -= 0.1;
    } else if (key == 37) {
        x -= 10;
    } else if (key == 38) {
        y -= 10;
    } else if (key == 39) {
        x += 10;
    } else if (key == 40) {
        y += 10;
    }
    
    drawRect();
    
});

drawRect();