Как применить clearRect только к 1 объекту на холсте

Question

 <input type='button' value='play' onclick='animation()'>

Я создаю свою первую JavaScript-игру на холсте, и до сих пор у меня есть прямоугольник, который я могу перемещать, и шар, который анимируется по экрану.Я сталкиваюсь с проблемой, когда при вызове моей одушевленной функции она избавляется от прямоугольника, потому что очищает весь холст, кроме шара, и наоборот для прямоугольника.Мне нужен способ, с помощью которого я могу очистить свои предыдущие позиции без очистки всего холста.

Спасибо.

Вот мой код.

let canvas = document.getElementById('myCanvas');
ctx = canvas.getContext('2d');
let xPos = 10
let yPos = 10
document.addEventListener('keydown', movement)

window.onload = init()
function init(){
    ctx.beginPath();
    ctx.fillStyle = 'red'
    ctx.fillRect(10,10,30,30);
}
init()

function movement(e){
//Player Controls 
// horizontal and vertical movement
    if (e.keyCode === 87 ){
        ctx.clearRect(0,0, canvas.width, canvas.height);
        yPos = yPos - 5;
        ctx.fillRect(xPos,yPos,30,30)
    }
     if(e.keyCode === 83){
         ctx.clearRect(0,0, canvas.width, canvas.height);
         yPos = yPos + 5;
         ctx.fillRect(xPos,yPos,30,30)
    }
    if(e.keyCode === 65){
        ctx.clearRect(0,0, canvas.width, canvas.height);
        xPos = xPos - 5;
        ctx.fillRect(xPos,yPos,30,30)
    }
    if(e.keyCode === 68){
        ctx.clearRect(0,0, canvas.width, canvas.height);
        xPos = xPos + 5;
        ctx.fillRect(xPos,yPos,30,30)
    }
  
 
    // keeping the player inside the canvas
    xPos = Math.min(Math.max(xPos, 0+5), canvas.width-35);
    yPos = Math.min(Math.max(yPos, 0+5), canvas.height-35); 
}
let dx = 1
let x = 0
function animation(){
    requestAnimationFrame(animation);
    ctx.clearRect(0,0,canvas.width,canvas.height);
    
    ctx.beginPath();
    ctx.arc(x,250,40,0,Math.PI*2);
    ctx.strokeStyle = 'blue';
    ctx.stroke();
    x=x+dx;
}