canvas making collectibles in canvas game

[Thunderfist]

I've gotten most of my game done, but I still have to make at least something that the player can do other that walk around the map and bump into things. I decided to add coins to collect, but I just have one problem: I've never added collectibles to a game before. Please help. I need to get this done in before next Friday.

 

EDIT:

 

I tried coding, but a coin wouldn't spawn anywhere other than the upper left corner.

I tried setting its draw setting to this.randomRange, so it would spawn randomly on the map.

Here's the 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,
    cash = new collectibles(),
    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();
    imgMoney = new Image();
imgSprite.src = "img/testroomImage.png";
imgSprite.addEventListener("load", init, false);
imgPlayer.src = "img/temp.png";
imgPlayer.addEventListener("load", init, false);
imgMoney.src = "img/coin.png";
imgMoney.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();
    cash.update();
}

function draw() {
    player1.draw();
    cash.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 = 48;
    this.srcY = 1;
    this.width = 31; //how wide the sprite is in pixels
    this.height = 35; //how tall the sprite is in pixels
    this.drawX = 125;
    this.drawY = 50;
    this.moveX = 31;
    this.moveY = 35;
    this.centerX = this.drawX + (this.width / 2);
    this.centerY = this.drawY + (this.height / 2);
    this.speed = .60;
    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,//draw specific specific points on x and y coordinates
        //newMoveX = this.moveX,
        //newMoveY = this.moveY;
        obstacleCollision = false;
    if (this.isUpKey) {
        newDrawY -= this.speed;
        //newMoveY -= this.speed;
        //this.moveY -= 35;
        this.srcX = 48; //Facing North
        this.srcY = 72;
    } else if (this.isDownKey) {
        newDrawY += this.speed;
        //newMoveY += this.speed;
        //this.moveY += 35;
        this.srcX = 48; //Facing South
        this.srcY = 1;
    } else if (this.isRightKey) {
        newDrawX += this.speed;
        //newMoveX += this.speed;
        //this.moveX += 31;
        this.srcX = 48; //Facing East
        this.srcY = 36;
    } else if (this.isLeftKey) {
        newDrawX -= this.speed;
        //newMoveX -= this.speed;
        //this.moveX -= 31;
        this.srcX = 48; //Facing West
        this.srcY = 108;
    }
    
    obstacleCollision = this.checkObstacleCollide(newDrawX, newDrawY);
    
    if (!obstacleCollision) {
        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 tEdgeWidth = 512,
    tEdgeHeight = 10;
    
    var bEdgeWidth = 512,
    bEdgeHeight = 10;
    
    var rEdgeWidth = 1,
    rEdgeHeight = 512;
        
    var lEdgeWidth = 1,
    lEdgeHeight = 512;
        
    var bigFenceLeftSideWidth = 20,
    bigFenceLeftSideHeight = 304;
        
    var bigFenceRightSideWidth = 22,
    bigFenceRightSideHeight = 304;
    
    var bigFenceUpperLeftWidth = 160,
    bigFenceUpperLeftHeight = 30,
    bigFenceUpperRightWidth = 140,
    bigFenceUpperRightHeight = 30;
        
    var bigFenceLowerLeftWidth = 100,
    bigFenceLowerLeftHeight = 20,
    bigFenceLowerRightWidth = 195,
    bigFenceLowerRightHeight = 20;
        
    var smallFenceSideWidth = 4,
    smallFenceSideHeight = 80;
        
    var rockWidth = 34,
    rockHeight = 32;
        
    var smallInclineWidth = 89,
    smallInclineHeight = 42;
        
    var largeInclineRWidth = 153,
    largeInclineRHeight = 55;
    
    var largeInclineLWidth = 176,
    largeInclineLHeight = 58;
        
    var leftHoleWidth = 64,
    leftHoleHeight = 48;
        
    var rightHoleLongWidth = 113,
    rightHoleLongHeight = 48;
        
    var rightHoleTallWidth = 43,
    rightHoleTallHeight = 99;
    
    
    
    obstacles = [new Obstacle(10, 25, tEdgeWidth, tEdgeHeight),
                 new Obstacle(10, 512, bEdgeWidth, bEdgeHeight),
                 new Obstacle(499, 1, rEdgeWidth, rEdgeHeight),
                 new Obstacle(14, 1, lEdgeWidth, lEdgeHeight),
                 new Obstacle(2, 229, bigFenceLeftSideWidth, bigFenceLeftSideHeight),
                 new Obstacle(320, 229, bigFenceRightSideWidth, bigFenceRightSideHeight),
                 new Obstacle(10, 212, bigFenceUpperLeftWidth, bigFenceUpperLeftHeight),
                 new Obstacle(200, 212, bigFenceUpperRightWidth, bigFenceUpperRightHeight),
                 new Obstacle(15, 499, bigFenceLowerLeftWidth, bigFenceLowerLeftHeight),
                 new Obstacle(144, 499, bigFenceLowerRightWidth, bigFenceLowerRightHeight),
                 new Obstacle(90, 403, rockWidth, rockHeight),
                 new Obstacle(184, 291, smallInclineWidth, smallInclineHeight),
                 new Obstacle(15, 165, leftHoleWidth, leftHoleHeight),
                 new Obstacle(258, 165, rightHoleLongWidth, rightHoleLongHeight),
                 new Obstacle(335, 162, rightHoleTallWidth, rightHoleTallHeight),
                 new Obstacle(97, 170, rockWidth, rockHeight),
                 new Obstacle(73, 195, rockWidth, rockHeight),
                 new Obstacle(0, 115, largeInclineLWidth, largeInclineLHeight),
                 new Obstacle(192, 115, largeInclineRWidth, largeInclineRHeight),
                 new Obstacle(120, 175, rockWidth, rockHeight),
                 new Obstacle(215, 170, rockWidth, rockHeight),
                 new Obstacle(233, 187, rockWidth, rockHeight),
                ];
}

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 collectibles () {
    this.srcX = 0;
    this.srcY = 0;
    this.width = 20; //how wide the sprite is in pixels
    this.height = 20; //how tall the sprite is in pixels
    this.drawX = randomRange;
    this.drawY = randomRange;
    this.centerX = this.drawX + (this.width / 2);
    this.centerY = this.drawY + (this.height / 2);
}

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

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

function outOfBounds(a, x, y) {
    var newBottomY = y + a.height,
        newTopY = y,
        newRightX = x + a.width,
        newLeftX = x,
        edgeTop = 512,
        edgeBottom = 0,
        edgeRight = 512,
        edgeLeft = 0;
    return newBottomY > edgeBottom ||
        newTopY < edgeTop ||
        newRightX > edgeRight ||
        newLeftX < edgeLeft;
}

What's wrong with it? just editing it in the slightest made the coin disappear when I refreshed the page.