How can that small box under the circle move right or left using those buttons without clearing the ball and upperbox

Question

Canvas game
https://code.sololearn.com/WKF6POXXc205/?ref=app

Answer 1

Before drawing a pad reflecting the ball in a new place, you need to remove it from the old place, for this you need to use the clearRect() method before changing the x coordinate, indicating the size of this site:

function drawRectangle(direction) {
ctx.clearRect(x, y, 50, 5); //debug
if(direction == "left"){
x-=10;
}
else if(direction == "right"){
x+=10;
}
//ctx.clearRect(0, 0, 109, 198); bug
ctx.beginPath();
ctx.rect(x, y, 50, 5);
ctx.fillStyle ='blue';
ctx.fill();
ctx.closePath();
}

Answer 2

Bad tried

Answer 3

I treid it already it still doesn't work