I am trying to create a boundary for my canvas, I am not sure where to begin to do that. I have already created the starting point made the character asset, that can move, however, the character moves outside the canvas, I want to make it when it hits the wall it does not move outside the boundary.

Here is the CSS code:

#canvas
{
  width: 500px;
  height: 200px;
  border: 1px solid black;
  margin: auto;
  margin-top: 200px;
}

#character
{
  width: 12px;
  height: 12px;
  background-color: blue;
  border-radius: 20px;
  position: relative;
  top:100px;
  left: 250px;
}

.animate
{
  animation:UpKey 300ms linear;
  animation:DownKey 300ms linear;
}

JavaScript code:

function place(id,x_pos, y_pos)
{
  var element = document.getElementById(id);
  element.style.position = "absolute";
  element.style.left = x_pos + 'px';
  element.style.top = y_pos + 'px';


}
setInterval(update,1);
function update()
{
  document.addEventListener('keydown', keyPress);
}
function keyPress(e)
{
  var x = e.keyCode;

  var character = document.getElementById("character").getBoundingClientRect();

  var left = parseInt(character.left,10);
  var top = parseInt(character.top,10)

  switch (x) {
    case 37:
        place('character', left-10, top);
      break;
    case 39:
        place('character', left+10, top);
      break;
    case 38:
        place('character', left, top-10);
      break;
    case 40:
        place('character', left, top+10);
      break;
  }

 

  console.log(x);
}
update();

I am looking to do it in JavaScript