JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/[email protected]/bundles/Rx.min.js"></script>

JavaScript

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

document.body.appendChild(canvas);
canvas.width = 500;
canvas.height = 500;

let yCoord = 100;
let xCoord = 100;
const deltaCoord = 5;
const playerColor = '#f00';
const canvasColor = '#fff';
const playerWidth = 16;
const playerHeight = 16;
const playerStartXCoord = 100;
const playerStartYCoord = 100;
let xCoordOld;
let yCoordOld;

const move = Rx.Observable.fromEvent(document, 'keydown')
	.map(
		e => {
			switch (e.keyCode) {
			  case 37: xCoord -= deltaCoord; break;
			  case 38: yCoord -= deltaCoord; break;
			  case 39: xCoord += deltaCoord; break;
			  case 40: yCoord += deltaCoord; break;
			}
			return {
				x: xCoord,
				y: yCoord
			};
		}
	)
	.startWith({ x: playerStartXCoord, y: playerStartYCoord });

const game = move.subscribe(player => {
	render(player);
});

function render(coords) {
	ctx.fillStyle = canvasColor;
	ctx.fillRect(xCoordOld || playerStartXCoord, yCoordOld || playerStartYCoord, playerWidth, playerHeight);	
	ctx.fillStyle = playerColor;
	ctx.fillRect(coords.x, coords.y, playerWidth, playerHeight);
	xCoordOld = coords.x;
	yCoordOld = coords.y;
}