Javascript-форум - Анимация при помощи канвас

у меня есть несколько картинок и я хочу чтобы они последовательно менялись, при нажатии на определённую клавишу. У меня возникла проблема с тем, что когда персонаж двигается, то у меня отчищается весь холст вместе с задником. Как сделать чтобы убирался только персонаж?

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div class="container">
    <div id="Game">
      <div class="bg" width="800" height="600">
        <canvas id="canvas" width="800" height="600"></canvas>
        <img id="background"/>
        <img id="cat">
      </div>
    </div>

  </div>

  <script src="http://code.jquery.com/jquery-3.3.1.js"></script>
  <script>
//Game
var canvas = document.getElementById('canvas'), context = canvas.getContext('2d');
var width = 800, height = 600;
canvas.width = width;
canvas.height = height;
var bg = document.getElementById('background');
var cat = document.getElementById('cat');

drawBG();
drawCat();
// background image
function drawBG() {
  bg.onload = function () {
    context.drawImage(bg, 0, 0);
    bg.style.display = 'none';
  };
  bg.src = 'assets/images/bg/bg.jpg';}

// DRAW CAT
function drawCat(){
  var i = 1;
  cat.onload = function(){
    context.clearRect(0, 0, 800, 600);
    context.drawImage(cat, x, y, 100, 100);
    cat.style.display = 'none';
  };
  cat.src = 'assets/images/cat/run/Run ('+ i +').png';
};

//MOVE CAT 
var x = 0;
var y = 430;

function CheckPos(x) {
  if(x <= 800 && x >= 0){
      return true;
  }
  else return false;
}

$(document).keydown(function(event){

  switch (event.keyCode){
      case 68: {
          if(CheckPos(x+10)){
          x+=10;
          drawCat();
          }
          break;
      }
      case 65: {
          if (CheckPos(x-10)) {
          x-=10;
          drawCat();
          }
          break;
      }

}
});


  </script>
</body>

</html>