html5 animation with spritesheet

Question

let globalCanvas;
let globalCtx;

class ScratchCard {
  constructor(canvasSelector, revealThreshold) {
    this.canvas = document.querySelector(canvasSelector);
    this.ctx = this.canvas.getContext("2d");
    globalCanvas = this.canvas;
    globalCtx = this.ctx;
    this.revealThreshold = revealThreshold;
    this.isDrawing = false;
    this.bounds = globalCanvas.getBoundingClientRect();
    this.overlayCleared = false;
    this.initCanvasSize();

    this.scratchImage = new Image();
    this.scratchImage.src = "./chairman-scratchedbg.c51180af71dc732a9dbf.png";
    this.scratchImage.onload = () => this.initCanvasWithImage();

    this.addEventListeners();
  }

  initCanvasSize() {
    globalCanvas.width = globalCanvas.clientWidth;
    globalCanvas.height = globalCanvas.clientHeight;
  }

  initCanvasWithImage() {
    globalCtx.drawImage(
      this.scratchImage,
      0,
      0,
      globalCanvas.width,
      globalCanvas.height
    );
  }

  addEventListeners() {
    globalCanvas.addEventListener("mousedown", () => {
      this.isDrawing = true;
    });

    globalCanvas.addEventListener("mouseup", () => {
      this.isDrawing = false;
      this.checkIfRevealed();
    });

    globalCanvas.addEventListener("mousemove", (e) => {
      const x = e.clientX - this.bounds.left;
      const y = e.clientY - this.bounds.top;
      if (this.isDrawing) {
        this.clearOverlay(e);
      }
      this.checkIfRevealed();
    });

    globalCanvas.addEventListener("touchstart", () => {
      this.isDrawing = true;
    });

    globalCanvas.addEventListener("touchend", () => {
      this.isDrawing = false;
      this.checkIfRevealed();
    });

    globalCanvas.addEventListener("touchmove", (e) => {
      if (this.isDrawing) {
        const touch = e.touches[0];
        this.clearOverlay(touch);
      }
      this.checkIfRevealed();
    });

    window.addEventListener("resize", () => {
      this.initCanvasSize();
      this.initCanvasWithImage();
    });
  }

  clearCanvas() {
    globalCtx.clearRect(0, 0, globalCanvas.width, globalCanvas.height);
  }

  clearOverlay(e) {
    const x = e.clientX - this.bounds.left;
    const y = e.clientY - this.bounds.top;

    globalCtx.globalCompositeOperation = "destination-out";
    globalCtx.beginPath();
    globalCtx.arc(x, y, 50, 0, Math.PI * 2);
    globalCtx.fill();
  }

  checkIfRevealed() {
    const imageData = globalCtx.getImageData(
      0,
      0,
      globalCanvas.width,
      globalCanvas.height
    );
    const pixels = imageData.data;
    let transparentPixels = 0;

    for (let i = 3; i < pixels.length; i += 4) {
      if (pixels[i] === 0) {
        transparentPixels++;
      }
    }

    const totalPixels = globalCanvas.width * globalCanvas.height;
    const revealPercentage = transparentPixels / totalPixels;

    if (revealPercentage >= this.revealThreshold && !this.overlayCleared) {
      this.overlayCleared = true;
      this.clearCanvas();
      startSpriteAnimation();
    }
  }
}

class SpriteAnimation {
  constructor(canvas, ctx) {
    this.canvas = canvas;
    this.ctx = ctx;
    this.spriteWidth = 207;
    this.spriteHeight = 200;
    this.offsetX = (this.canvas.width - this.spriteWidth) / 2;
    this.offsetY = (this.canvas.height - this.spriteHeight) / 2;
    this.frame = 0;
    this.timer = 0;
    this.markedForDeletion = false;
    this.animationFrameId = null;
    this.ballAnimation = new Image();
    this.ballAnimation.src = "./loading_animation.png";
  }

  startAnimation() {
    this.animationFrameId = requestAnimationFrame(this.animate.bind(this));
  }

  animate() {
    this.timer++;
    if (this.timer % 5 === 0) {
      this.frame++;
    }
    if (this.frame > 8) {
      this.frame = 0;
    }

    this.draw();
    this.animationFrameId = requestAnimationFrame(this.animate.bind(this));
  }

  draw() {
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    this.ctx.drawImage(
      this.ballAnimation,
      this.frame * this.spriteWidth,
      0,
      this.spriteWidth,
      this.spriteHeight,
      this.offsetX,
      this.offsetY,
      this.spriteWidth,
      this.spriteHeight
    );
  }

  stopAnimation() {
    if (this.animationFrameId) {
      cancelAnimationFrame(this.animationFrameId);
    }
  }
}

function startSpriteAnimation() {
  const spriteAnimation = new SpriteAnimation(globalCanvas, globalCtx);
  spriteAnimation.startAnimation();
}

const scratchCard = new ScratchCard(".scratch-area", 0.3);

i am trying to make the animation start when all the scratched area is cleared. in fact the animation function is being called but when the cover is all cleared the animation is not starting until i click on control + or control - (minimize or maximize the screen ) i dont know where i did something wrong. can someone help me?