Why isn't my rectangle showing up in HTML Canvas?

Question

I am currently trying to build a Digital Table Tennis game and I have a lot in place so far, but whenever I run the program, the non-AI player's bat (The green rectangle) isn't showing up. It doesn't seem to be there at all. Is there some bug in my code? Also make sure to mainly pay attention to the bottom of the code, where the animate() function is declared. The outcome so far is here: https://Digital-Table-Tennis.programprodigy.repl.co. PLS HELP!

  let canvas = document.querySelector('canvas');
  let ctx = canvas.getContext('2d');
  canvas.width = innerWidth;
  canvas.height = innerHeight;
  let mouse = {
    x: null
  }
  window.onmousemove = e => {
    mouse.x = e.x;
  }
  class Ball {
    constructor() {
      this.dx = Math.random() * 4 - 2;
      this.dy = Math.random() * 4 - 2;
      this.x = Math.random() * canvas.width;
      this.y = Math.random() * canvas.height;
    }
    draw() {
      ctx.fillStyle = 'orange';
      ctx.beginPath();
      ctx.arc(this.x, this.y, 10, 0, Math.PI * 2);
      ctx.fill();
    }
    update() {
      this.x += this.dx;
      this.y += this.dy;
      if (
        this.x >= mouse.x &&
        this.x <= mouse.x + 50 &&
        this.y >= canvas.height - 5 &&
        this.y <= canvas.height
      ) {
        this.dx = -this.dx;
        this.dy = -this.dy;
      }
      if (
        this.x <= 0 ||
        this.x >= canvas.width ||
        this.y <= 0 ||
        this.y >= canvas.height
      ) {
        this.dx = -this.dx;
        this.dy = -this.dy;
      }
      this.draw();
    }
  }
  let ball = new Ball();
  class AI {
    constructor(lvl) {
      this.x = 0;
      this.color = 'red';
      this.speed = lvl * 5;
    }
    draw() {
      ctx.fillStyle = this.color;
      ctx.fillRect(this.x, 0, 50, 5);
    }
    update() {
      if (ball.y < canvas.height / 2) {
        let distance = ball.x - this.x;
        this.x += distance / this.speed;
      }
      if (
        ball.x >= this.x &&
        ball.x <= this.x + 50 &&
        ball.y >= 0 &&
        ball.y <= 5
      ) {
        ball.dx = -ball.dx;
        ball.dy = -ball.dy;
      }
      this.draw();
    }
  }
  let ai_player = new AI(5);
  function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = 'red';
    ctx.fillRect(mouse.x - 25, canvas.height - 5, 50, 5);
    ball.update();
    ai_player.update();
    requestAnimationFrame(animate);
  }
  animate();

Answer 1

I actually have a red player rectangle on my end, however I had to scroll down to see it since the canvas height was more than my viewport.

You specified that the player rectangle should be green, but it's declared in animate() as ctx.fillStyle = 'red';.

As for solving the scrolling issues, it should be a quick CSS fix by specifying a max-width of 100vw and a max-height of 100vh on your canvas element, assuming you don't have any conflicting styles.