Character movement not working

[Thunderfist]

I managed to get a character sprite to appear on my project's testmap. The problem I'm having is that the movement code isn't working and I can't figure out why. There aren't any errors in the browser console, which makes this harder.

Here's the game.js code:

 

//establish variables


var canvasBg = document.getElementById("canvasBg"),
    ctxBg = canvasBg.getContext("2d"),
    canvasEntities = document.getElementById("canvasEntities"),
    ctxEntities = canvasEntities.getContext("2d"),
    canvasWidth = canvasBg.width,
    canvasHeight = canvasBg.height,
    player1 = new Player(),
    isPlaying = false,
    obstacles = [],
    //animation
    requestAnimFrame = window.requestAnimationFrame ||
                       window.webkitRequestAnimationFrame ||
                       window.mozRequestAnimationFrame ||
                       window.oRequestAnimationFrame ||
                       window.msRequestAnimationFrame ||
                       function (callback) {
            window.setTimeout(callback, 1000 / 60);
        },
    imgSprite = new Image();
    imgPlayer = new Image();
imgSprite.src = "img/testroomImage.png";
imgSprite.addEventListener("load", init, false);
imgPlayer.src = "img/player.png";
imgPlayer.addEventListener("load", init, false);

function init() {
    document.addEventListener("keydown", function(e) {checkKey(e, true);}, false);
    document.addEventListener("keyup", function(e) {checkKey(e, false);}, false);
    defineObstacles();
    begin();
}
 
function begin() {
    ctxBg.drawImage(imgSprite, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight);
    isPlaying = true;
    requestAnimFrame(loop);
}

function update() {
    clearCtx(ctxEntities);
    player1.update();
}

function draw() {
    player1.draw();
}

function loop() {
    if (isPlaying) {
        update();
        draw();
        requestAnimFrame(loop);
    }
}

function clearCtx(ctx) {
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
}

function randomRange(min, max) {
    return Math.floor(Math.random() * (max + 1 - min)) + min;
}

function Player() {
    this.srcX = 0;
    this.srcY = 0;
    this.width = 12;
    this.height = 21;
    this.drawX = 0;
    this.drawY = 0;
    this.centerX = this.drawX + (this.width / 2);
    this.centerY = this.drawY + (this.height / 2);
    this.speed = 2;
    this.isUpKey = false;
    this.isRightKey = false;
    this.isDownKey = false;
    this.isLeftKey = false;
    

}

Player.prototype.update = function () {
    this.centerX = this.drawX + (this.width / 2);
    this.centerY = this.drawY + (this.height / 2);
    this.checkDirection();
};

Player.prototype.draw = function () {
    ctxEntities.drawImage(imgPlayer, this.srcX, this.srcY, this.width, this.height, this.drawX, this.drawY, this.width, this.height);
};

Player.prototype.checkDirection = function () {
    var newDrawX = this.drawX,
        newDrawY = this.drawY,
        obstacleCollision = false;
    if (this.isUpKey) {
        newDrawY -= this.speed;
        this.srcX = 12; //Facing North
    } else if (this.isDownKey) {
        newDrawY += this.speed;
        this.srcX = 0; //Facing South
    } else if (this.isRightKey) {
        newDrawX += this.speed;
        this.srcX = 36; //Facing East
    } else if (this.isLeftKey) {
        newDrawX -= this.speed;
        this.srcX = 24; //Facing West
    }
    
    obstacleCollision = this.checkObstacleCollide(newDrawX, newDrawY);
    
    if (!obstacleCollision && !outOfBounds(this, newDrawX, newDrawY)) {
        this.drawX = newDrawX;
        this.drawY = newDrawY;
    }
};

Player.prototype.checkObstacleCollide = function (newDrawX, newDrawY) {
    var obstacleCounter = 0,
        newCenterX = newDrawX + (this.width / 2),
        newCenterY = newDrawY + (this.height / 2);
    for (var i = 0; i < obstacles.length; i++) {
        if (obstacles[i].leftX < newCenterX &&
            newCenterX < obstacles[i].rightX &&
           obstacles[i].topY -20 < newCenterY &&
           newCenterY < obstacles[i].bottomY - 20) {
            obstacleCounter = 0;
        } else {
            obstacleCounter++;
        }
    }

if (obstacleCounter === obstacles.length) {
    return false;
    } else {
    return true;
    }
};

function Obstacle(x, y, w, h) {
    this.drawX = x;
    this.drawY = y;
    this.width = w;
    this.height = h;
    this.leftX = this.drawX;
    this.rightX = this.drawX + this.width;
    this.topY = this.drawY;
    this.bottomY = this.drawY + this.height;
}

function defineObstacles() {
    var treeWidth = 65,
    treeHeight = 90,
    rockDimensions = 30,
    bushHeight = 28;
    
    obstacles = [new Obstacle(78, 360, treeWidth, treeHeight),
        new Obstacle(390, 395, treeWidth, treeHeight),
        new Obstacle(415, 102, treeWidth, treeHeight),
        new Obstacle(619, 185, treeWidth, treeHeight),
        new Obstacle(97, 63, rockDimensions, rockDimensions),
        new Obstacle(296, 379, rockDimensions, rockDimensions),
        new Obstacle(285, 25, 150, bushHeight),
        new Obstacle(570, 138, 150, bushHeight),
        new Obstacle(605, 492, 90, bushHeight)];
}

function checkKey(e, value) {
    var keyID = e.keyCode || e.which;
    if (keyID === 38) { //up arrow
        player1.isUpKey = value;
        e.preventDefault();
    }
    if (keyID === 39) { //right arrow
        player1.isRightKey = value;
        e.preventDefault();
    }
    if (keyID === 40) { //down arrow
        player1.isDownKey = value;
        e.preventDefault();
    }
    if (keyID === 37) { //left arrow
        player1.isLeftKey = value;
        e.preventDefault();
    }
    if (keyID === 32) { //spacebar
        player1.isSpacebar = value;
        e.preventDefault();
    }
};

function outOfBounds(a, x, y) {
    var newBottomY = y + a.height,
        newTopY = y,
        newRightX = x + a.width,
        newLeftX = x,
        treeLineTop = 512,
        treeLineBottom = 512,
        treeLineRight = 750,
        treeLineLeft = 65;
    return newBottomY > treeLineBottom ||
        newTopY < treeLineTop ||
        newRightX > treeLineRight ||
        newLeftX < treeLineLeft;
}

Any ideas that could be used to fix the problems?

[hotfeet]

there is a bunch of stuff i don't get about your implementation like using multiple canvases. i did up this jsfiddle https://jsfiddle.net/hotfeet/h015gfgt/ maybe it will help you out a bit. i was going to mess about with your code but i figured it easier to just post a working example of a basic top-down game. 

[Thunderfist]

I've tried to fix a few things, but the code still isn't working. And to make matters worse, certain lines of code that I commented out make the sprite disappear if I uncomment them.

[Thunderfist]

I noticed that something was keeping the movement from working. There was an && !outOfBounds(this, newDrawX, newDrawY) in the code, which somehow kept the game from making the sprite move.