Make a canvas object stop inside the canvas area?

Question

Basically I've made a little game, but what I'm wondering is how do I make my created object not go outside the lines of the canvas. When he reaches a border I want him to stop. Any help is appreciated

Answer 1

Hi there i made a little demo game my self. In that game there is what you are looking for. Working demo you can find it here

So what i did was to

1) track user keyboard press

 document.onkeydown = function(e) {
        e = e || window.event;

        if(e.keyCode == "37") player.move("left");
        else if(e.keyCode == "38") player.move("up");
        else if(e.keyCode == "39") player.move("right");
        else if(e.keyCode == "40") player.move("down");
    };

2) getting a basic config of the player position (middle in my case)

var player = {
        x: Math.round((w/2)/objectSizes),
        y: Math.round((h/2)/objectSizes)
    }

3) then on the function play.move i track the direction and do all the restrictions

player.move = function(direction) {

/**
 * A temporary object to hold the current x, y so if there is a collision with the new coordinates to fallback here
 */
var hold_player = {
    x: player.x,
    y: player.y
};

/**
 * Decide here the direction of the user and do the neccessary changes on the directions
 */
switch(direction) {
    case "left":
        player.x -= speed / modifier;
        if(player.currentDirection == "stand") {
            player.currentDirection = "left-1";
        } else if(player.currentDirection == "left-1") {
            player.currentDirection = "left-2";
        } else if(player.currentDirection == "left-2") {
            player.currentDirection = "left-1";
        } else {
            player.currentDirection = "left-1";
        }
        break;
    case "right":
        player.x += speed / modifier;
        if(player.currentDirection == "stand") {
            player.currentDirection = "right-1";
        } else if(player.currentDirection == "right-1") {
            player.currentDirection = "right-2";
        } else if(player.currentDirection == "right-2") {
            player.currentDirection = "right-1";
        } else {
            player.currentDirection = "right-1";
        }
        break;
    case "up":
        player.y -= speed / modifier;

        if(player.currentDirection == "stand") {
            player.currentDirection = "up-1";
        } else if(player.currentDirection == "up-1") {
            player.currentDirection = "up-2";
        } else if(player.currentDirection == "up-2") {
            player.currentDirection = "up-1";
        } else {
            player.currentDirection = "up-1";
        }

        break;
    case "down":
        player.y += speed / modifier;

        if(player.currentDirection == "stand") {
            player.currentDirection = "down-1";
        } else if(player.currentDirection == "down-1") {
            player.currentDirection = "down-2";
        } else if(player.currentDirection == "down-2") {
            player.currentDirection = "down-1";
        } else {
            player.currentDirection = "down-1";
        }

        break;
}
    /**
     * if there is a collision just fallback to the temp object i build before while not change back the direction so we can have a movement
     */
    if(check_collision(player.x, player.y)) {
        player.x = hold_player.x;
        player.y = hold_player.y;
    }

    /**
     * If player finds the coordinates of pokeball the generate new one, play the sound and update the score
     */
    if(player.x == pokeball.x && player.y == pokeball.y) { // found a pokeball !! create a new one
        console.log("found a pokeball of "+pokeball.spritePosition+"! Bravo! ");
        pokePick.pause();
        pokePick.currentTime = 0;
        pokePick.play();
        score += 1;
        pokeball.generatePosition();
    }

    update();
};

Then at last i have this function to check any collision

 /**
     * Our function that decides if there is a collision on the objects or not
     * @function
     * @name check_collision
     * @param {Integer} x - The x axis
     * @param {Integer} y - The y axis
     */
    function check_collision(x, y) {
        var foundCollision = false;

        if(((x > 3 && x < 9) && y == 6) || ((x > 4 && x < 9) && (y == 5 || y == 4 || y == 3))) { //collision on house
            console.log("on house");
            foundCollision = true;
        }

        if((x<1 || x>20) ||
            (y<2 || y>20) ||
            ((y > 0 && y < 4) && (x == 20 || x == 19)) || //right corner
            ((y > 0 && y < 4) && (x == 2 || x == 3)) || //left corner
            ((y > 18) && (x == 2 || x == 3)) || //left corner
            ((x > 17) && (y == 19 || y == 20)) || //left corner
            ((x > 19) && (y == 17 || y == 18)) //left corner 2
        ) {
            console.log("lost on the woods");
            foundCollision = true
        }

        return foundCollision;
    }