JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="600" height="600"></canvas>

JavaScript

var c = document.getElementById('myCanvas');
var ctx = c.getContext("2d");

var Player = function (xSet, ySet) {
    this.XPos = xSet;
    this.YPos = ySet;
    this.Color = "#0F0";
}

var Background = function (xSet, ySet) {
    this.XPos = xSet;
    this.YPos = ySet;
    this.Sprite = new Image();
    this.Sprite.src = "http://i.stack.imgur.com/hcFJb.png";
}

var player = new Player(343, 343);
var background = new Background(0, 0);
var keyCode;

function setKey(e) {
	this.keyCode = e.keyCode;
}

function moveSomething() {
    switch (this.keyCode) {
        case 37:
            if (background.XPos < 0) {
            background.XPos += 1;
            }
            else{
                player.XPos -= 1;
            }
            break;
        case 38:
            if (background.YPos < 0) {
                background.YPos += 1;
            } else {
                player.YPos -= 1;
            }
            break;
        case 39:
            if (Math.abs(background.XPos) < (c.width / 2)) {
                background.XPos -= 1;
            } else {
                player.XPos += 1;
            }
            break;
        case 40:
            if (Math.abs(background.YPos) < (c.height / 2)) {
                background.YPos -= 1;
            } else {
                player.YPos += 1;
            }
            break;
    }
}

window.addEventListener("keydown", setKey, false);

window.setInterval( function() {
	moveSomething(); 
 }, 16);


setInterval(function () {
    ctx.fillStyle = "#000";
    //ctx.fillRect(0, 0, c.width, c.height);
    ctx.drawImage(background.Sprite, background.XPos, background.YPos);
    ctx.fillStyle = player.Color;
    ctx.fillRect(player.XPos, player.YPos, 48, 48);
}, 3)