JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="200" height="200"></canvas>

JavaScript

var loop = function () {
		if (up)
			buffer.fillStyle = 'green';
		else
			buffer.fillStyle = 'red';
		buffer.fillRect(130, 110, 10, 10);

		if (left)
			buffer.fillStyle = 'green';
		else
			buffer.fillStyle = 'red';
		buffer.fillRect(120, 120, 10, 10);

		if (right)
			buffer.fillStyle = 'green';
		else
			buffer.fillStyle = 'red';
		buffer.fillRect(140, 120, 10, 10);

		if (space)
			buffer.fillStyle = 'green';
		else
			buffer.fillStyle = 'red';
		buffer.fillRect(40, 120, 50, 10);
	}

	var c = document.getElementById('canvas');
	var buffer = c.getContext('2d');

	var animFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || null;

	var goloop = function () {
		loop();
		animFrame(goloop);
	};
	animFrame(goloop);

	window.onkeydown = keydown;
	window.onkeyup = keyup;
	var up = false, left = false, right = false, space = false;

	function keydown(e) {
		if (e.keyCode == 32)
			space = true;
		if (e.keyCode == 38)
			up = true;
		if (e.keyCode == 37)
			left = true;
		if (e.keyCode == 39)
			right = true;
	}

	function keyup(e) {
		if (e.keyCode == 32)
			space = false;
		if (e.keyCode == 38)
			up = false;
		if (e.keyCode == 37)
			left = false;
		if (e.keyCode == 39)
			right = false;
	}