Boundary for canvas game in Javascript

Question

I have to make a game for school with html5 canvas Javascript. I am new to javascript and still learning but i really need some help with this issue that i have and would appreciate it if someone could help me out. I tried several things but nothing seems to work and im at a loss.

So this is the code for the player object. It can move from left to right. Now the problem is that it leaves the canvas. I want it to stay in the canvas on the x axes.

// Things to do when keys are down
function onKeyDown(event) {

    // prevent arrow keys from scrolling the page
    if (event.keyCode >= 37 && event.keyCode <= 39) event.preventDefault();

    switch (event.keyCode) {
        case 37:
            player.vx = -1;
            player.image = player.imgLeft;
            break; // left key
     // case 38: player.vy = -1; break; // up key
        case 39:
            player.vx = 1;
            player.image = player.imgRight;
            break; // right key
    }
}

// Things to do when keys are up
function onKeyUp(event) {
    switch (event.keyCode) {
        case 37:
        case 39:
            player.vx = 0;
            player.image = player.original;
            break; // left or right key released
     // case 38: player.vy = 0; break; // up or down key released
    }
}

This is what i got so far....

if ((player.x >= 800) && (player.x  <= 0)) {

} else {

}

Answer 1

Basically just test to see if x + width (optional: + velocity) > canvas.width and the same for height.

Answer 2

You could consider adding two functions to check that you're within bounds. (Essentially the same as your code, albeit with my true condition returned in what would be your else statement.)

// returns true if param is in range [0..799]
function isInXrange(intPos)
{
  if ((intPos>=0) && (intPos<800))
    return true;
  else
    return false;
}
// returns true if param is in range [0..599]
function isInYrange(intPos)
{
  if ((intPos>=0) && (intPos<600))
    return true;
  else
    return false;
}

You could then add a function to move the player and another to handle colliding with the walls/wandering out of bounds

function movePlayer()
{
    if (isInXRange(player.x))
        player.x += player.vx;
    if (isInXRange(player.y))
        player.y += player.vy;
}

function handleOutOfBounds()
{
    if (isInXRange(player.x) == false)
    {
        // do something;
    }

    if (isInYRange(player.y) == false)
    {
        // do something else
    }
}