JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

canvas = document.getElementById("canvas");
context = canvas.getContext("2d");

context.canvas.height = window.innerHeight - 30;
context.canvas.width = window.innerWidth - 30;

window.onkeydown = function(e) {

    e = e || window.event;

    if (e.keyCode == '38') {
    context.translate(0,  5);
    }
    else if (e.keyCode == '40') {
    context.translate(0, -5);
    }
    else if (e.keyCode == '37') {
    context.translate(5, 0);
    }
    else if (e.keyCode == '39') {
    context.translate(-5, 0);
    }

}

var main = setInterval(function()
{
    context.clearRect(-2000, -2000, 4000, 4000);
    context.fillRect(0, 0, 100, 100);
    context.fillRect(100, 100, 100, 100);
    context.fillRect(200, 0, 100, 100);
    context.fillRect(200, 200, 100, 100);
    context.fillRect(0, 200, 100, 100);

  }, 33);