у меня есть несколько картинок и я хочу чтобы они последовательно менялись, при нажатии на определённую клавишу. У меня возникла проблема с тем, что когда персонаж двигается, то у меня отчищается весь холст вместе с задником. Как сделать чтобы убирался только персонаж?
<!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>