Restricting Object Movement in Canvas

I am trying to figure out how to restrict my pac man character within the window of my canvas. I've tried restricting it with coding it not being able to move past the boundaries of the canvas, but none of my attempts seem to be working. Any suggestions?

Canvas dimensions: 800px (width); 450px (height)

Here is my code for moving pac-man:

    $(document).on('keydown', movePacman); 

    function movePacman(event) {

    $(document).on('keydown', movePacman); 

    function movePacman(event) {
    console.log(event.which);
      switch(event.which) {

        case 39:
              $pacman.css("left", ($pacman.position().left + 10) + "px");

         if ($pacman.position().left > 800 ) {
                   $pacman.css("left", ($pacman.position().left + 0) + "px");
                }
            break;

        case 40:
            $('#pacman').css({
                'top': (pacman2.y += 10) + 'px'
            });
            break;

        case 37:
             $pacman.css("left", ($pacman.position().left - 10) + "px");
            break; 

        case 38:
            $('#pacman').css({
                'top': (pacman2.y -= 10) + 'px'
            });
            break;
    }
}


})

Solution

You were pretty close to having it.

Because I didn't know what the difference was supposed to be between $pacman and pacman, and since you were already using $pacman.position(). ..., I changed your pacman2.y ... to $pacman.position().top.

Your check of the right-hand edge had the correct idea, except that you were already moving the pacman right before you checked whether it was too far. I thus reversed the logic of that boundary check and put the move command inside the if statement.

I then essentially copied that check for the right-hand boundary another three times, changing the properties (e.g. top, etc.), comparators (e.g. >, etc.) and signs (e.g. +, etc.) as necessary.

$(document).on('keydown', movePacman);
const $pacman = $('#pacman');

function movePacman(event) {
  switch (event.which) {
    case 39: // i.e. right
      if ($pacman.position().left < 200) {
        $pacman.css("left", ($pacman.position().left + 10) + "px");
      }
      break;

    case 40: // i.e. down
      if ($pacman.position().top < 100) {
        $pacman.css("top", ($pacman.position().top + 10) + "px");
      }
      break;

    case 37: // i.e. left
      if ($pacman.position().left > 0) {
        $pacman.css("left", ($pacman.position().left - 10) + "px");
      }
      break;

    case 38: // i.e. up
      if ($pacman.position().top > 0) {
        $pacman.css("top", ($pacman.position().top - 10) + "px");
      }
      break;
  }
}

#pacman {
  position: fixed;
  left: 100px;
  top: 40px;
  width: 40px;
  height: 40px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Click inside this image and then use the arrow keys to move.</p>
<div id="pacman"></div>