clearRect is making my Square to disappear

everyone. I just started learning HTML CANVAS last week and I am facing a challenge now. I have a couple of square boxes and a player which i called the shooter, if the shooter touches any of the square boxes the box should disappear from the screen.

My main challenge now is that the square is not showing because i set my animate with ctx.clearRect(0, 0, canvas.width, canvas.height) but if i change the the animate function with ctx.clearRect(0, 160, canvas.width, canvas.height); the square boxes will start showing but my code will not work well.

Please how do I set this up properly so that the Square and Shooter won't interfere with each other unless I tell them to do so?

let canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");

canvas.width = innerWidth;
canvas.height = innerHeight;
ctx.fillStyle = "red";

const gravity = 1;
class Square {
  constructor({ x, y, width, height }) {
    this.position = {
      x,
      y,
    };
    this.width = width;
    this.height = height;
  }

  draw() {
    ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
  }
}

class Shooter {
   constructor(width, height) {
     (this.position = {
       x: 300,
       y: 520,
     }),
     (this.velocity = {
       x: 10,
       y: 10,
     }),
     (this.width = width),
     (this.height = height);
   }

   drawTwo() {
     ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
   }

  update() {
    this.drawTwo();
  }
}

const shooter = new Shooter(50, 50);

squares = [
   new Square({ x: 40, y: 50, width: 50, height: 50 }),
   new Square({ x: 300, y: 50, width: 50, height: 50 }),
   new Square({ x: 400, y: 50, width: 50, height: 50 }),
];

function animate() {
  requestAnimationFrame(animate);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  shooter.update();
}

animate();

squares.forEach((square) => {
  square.draw();

  document.addEventListener("keydown", ({ keyCode }) => {
  switch (keyCode) {
    case 87:
      shooter.position.y -= shooter.velocity.y;
      if (
        shooter.position.x < square.position.x + square.width &&
        shooter.position.x + shooter.width > square.position.x &&
        shooter.position.y < square.position.y + square.height &&
        shooter.position.y + shooter.height > square.position.y
      ) {
        console.log(
        "losssssssssssssssssssssssssssssssssssssssssssssssssssss 87"
      );

      ctx.clearRect(
        square.position.x,
        square.position.y,
        square.width,
        square.height
      );
     }

    break;
  case 68:
    shooter.position.x += shooter.velocity.x;
    if (
      shooter.position.x < square.position.x + square.width &&
      shooter.position.x + shooter.width > square.position.x &&
      shooter.position.y < square.position.y + square.height &&
      shooter.position.y + shooter.height > square.position.y
    ) {
      console.log(
        "losssssssssssssssssssssssssssssssssssssssssssssssssssss 65"
      );
      ctx.clearRect(
        square.position.x,
        square.position.y,
        canvas.width,
        canvas.height
      );
    }

    break;
  case 83:
    shooter.position.y += shooter.velocity.y;
    if (
      shooter.position.x < square.position.x + square.width &&
      shooter.position.x + shooter.width > square.position.x &&
      shooter.position.y < square.position.y + square.height &&
      shooter.position.y + shooter.height > square.position.y
    ) {
      console.log(
        "losssssssssssssssssssssssssssssssssssssssssssssssssssss 83"
      );
      ctx.clearRect(
        square.position.x,
        square.position.y,
        canvas.width,
        canvas.height
      );
    }

    break;
  case 65:
    shooter.position.x -= shooter.velocity.x;
    if (
      shooter.position.x < square.position.x + square.width &&
      shooter.position.x + shooter.width > square.position.x &&
      shooter.position.y < square.position.y + square.height &&
      shooter.position.y + shooter.height > square.position.y
    ) {
      console.log(
        "losssssssssssssssssssssssssssssssssssssssssssssssssssss 65"
      );
      ctx.clearRect(
        square.position.x,
        square.position.y,
        canvas.width,
        canvas.height
      );
    }

    break;
   }
  });
});

Link to fiddle https://jsfiddle.net/kingsley_chukwuma/jfs06g7e/6/