JS clearRect not clearing entire canvas

I am slightly new with js and ran into an issue. I was trying to create a stars in the sky animation. I did so by creating small circles randomly on a canvas and then randomly selecting stars which are flickered (opacity is changed). I then realised the website was not working when scaled so I decided to implement an onevent for the window resize and when the window is resized I run the same functions again to recreate the same process but while clearing all the previous stars so they don't multiply. The issue here is that the clearRect method doesn't seem to be clearing the previously drawn stars for me. Any help on this would be very much appreciated :). Here is my code.

let starCollection  = [];
let randomStars     = [];
let numberofStars   = 100;
let flickeringStars = 50;

class Star{
    constructor(x,y,color,radius){
        this._canvas        = document.querySelector('canvas');
        this._canvas.width  = window.innerWidth;
        this._canvas.height = window.innerHeight; 
        this._c             = this._canvas.getContext('2d');
        this._radius        = radius;

        this._x       = x;
        this._y       = y;
        this._color   = color;     
    }

    //drawing individual stars
    draw(){
        //Drawing
        this._c.beginPath();
        this._c.arc(this._x,this._y,this._radius,0,Math.PI * 2,false);
        this._c.fillStyle   = this._color;
        this._c.strokeStyle = 'black';
        this._c.stroke();
        this._c.fill();
        this._c.closePath();
    }
    //Fade in and out for stars
    flicker(){

        setTimeout(()=>{this._color='#EBEBEB';},300);
        setTimeout(()=>{this._color='#D9D9D9';},600);
        setTimeout(()=>{this._color='#B6B6B6';},900);
        setTimeout(()=>{this._color='#898787';},1200);
        setTimeout(()=>{this._color='#4F4F4F';},1500);

        setTimeout(()=>{this._color='black';},1800);
        setTimeout(()=>{this._color='#4F4F4F';},2100);
        setTimeout(()=>{this._color='#898787';},2400);
        setTimeout(()=>{this._color='#B6B6B6';},2700);
        setTimeout(()=>{this._color='#D9D9D9';},3000);
        setTimeout(()=>{this._color='#EBEBEB';},3300);
        setTimeout(()=>{this._color='#FFFFFF';},3600);

        setTimeout(()=>{this.draw();},300);
        setTimeout(()=>{this.draw();},600);
        setTimeout(()=>{this.draw();},900);
        setTimeout(()=>{this.draw();},1200);
        setTimeout(()=>{this.draw();},1500);
        setTimeout(()=>{this.draw();},1800);
        setTimeout(()=>{this.draw();},2100);

        setTimeout(()=>{this.draw();},2400);
        setTimeout(()=>{this.draw();},2700);
        setTimeout(()=>{this.draw();},3000);
        setTimeout(()=>{this.draw();},3300);
        setTimeout(()=>{this.draw();},3600);

    }

}

window.addEventListener("showStars", ()=>{
    //Stars animation
    //Adding the stars to the array as objects
    for(let i=0;i<numberofStars;i++){
        let x           = Math.floor(Math.random()*window.innerWidth);
        let y           = Math.floor(Math.random()*window.innerHeight);
        let starSize    = (Math.random()+1)-0.7;
        starCollection.push(new Star(x,y,"white",starSize));
    }
    //Drawing all the stars on the screen
    for(let i=0;i<starCollection.length;i++){
        starCollection[i].draw();
    }
    //Storing random stars  
    const shuffleStars = ()=>{
        randomStars = [];
        for(let i=0;i<flickeringStars;i++){
            randomStars.push(Math.floor(Math.random()*starCollection.length))
        }
    }
    shuffleStars();


   //Flickering stars randomly
   const starflicker = ()=>{
    console.log(starCollection);
    console.log(randomStars);
            setTimeout(()=>{
                requestAnimationFrame(starflicker);
                for(let i=0;i<randomStars.length;i++){
                    starCollection[randomStars[i]].flicker();
                }
                shuffleStars();
            },500);
        }
        starflicker();
    })

    window.addEventListener("resize", ()=>{


        let canvas     = document.querySelector("canvas");
        let context    = canvas.getContext("2d");
        canvas.width   = window.innerWitdh;
        canvas.height  = window.innerHeight;
        context.clearRect(0,0,window.innerWidth, window.innerHeight);

        starCollection = [];
        randomStars    = [];

        let event      = new CustomEvent("showStars");
        dispatchEvent(event); 
    });

let starCollection = [];
let randomStars = [];
let numberofStars = 100;
let flickeringStars = 50;

class Star {
  constructor(x, y, color, radius) {
    this._canvas = document.querySelector('canvas');
    this._canvas.width = window.innerWidth;
    this._canvas.height = window.innerHeight;
    this._c = this._canvas.getContext('2d');
    this._radius = radius;

    this._x = x;
    this._y = y;
    this._color = color;
  }

  //drawing individual stars
  draw() {
    //Drawing
    this._c.beginPath();
    this._c.arc(this._x, this._y, this._radius, 0, Math.PI * 2, false);
    this._c.fillStyle = this._color;
    this._c.strokeStyle = 'black';
    this._c.stroke();
    this._c.fill();
    this._c.closePath();
  }
  //Fade in and out for stars
  flicker() {

    setTimeout(() => {
      this._color = '#EBEBEB';
    }, 300);
    setTimeout(() => {
      this._color = '#D9D9D9';
    }, 600);
    setTimeout(() => {
      this._color = '#B6B6B6';
    }, 900);
    setTimeout(() => {
      this._color = '#898787';
    }, 1200);
    setTimeout(() => {
      this._color = '#4F4F4F';
    }, 1500);

    setTimeout(() => {
      this._color = 'black';
    }, 1800);
    setTimeout(() => {
      this._color = '#4F4F4F';
    }, 2100);
    setTimeout(() => {
      this._color = '#898787';
    }, 2400);
    setTimeout(() => {
      this._color = '#B6B6B6';
    }, 2700);
    setTimeout(() => {
      this._color = '#D9D9D9';
    }, 3000);
    setTimeout(() => {
      this._color = '#EBEBEB';
    }, 3300);
    setTimeout(() => {
      this._color = '#FFFFFF';
    }, 3600);

    setTimeout(() => {
      this.draw();
    }, 300);
    setTimeout(() => {
      this.draw();
    }, 600);
    setTimeout(() => {
      this.draw();
    }, 900);
    setTimeout(() => {
      this.draw();
    }, 1200);
    setTimeout(() => {
      this.draw();
    }, 1500);
    setTimeout(() => {
      this.draw();
    }, 1800);
    setTimeout(() => {
      this.draw();
    }, 2100);

    setTimeout(() => {
      this.draw();
    }, 2400);
    setTimeout(() => {
      this.draw();
    }, 2700);
    setTimeout(() => {
      this.draw();
    }, 3000);
    setTimeout(() => {
      this.draw();
    }, 3300);
    setTimeout(() => {
      this.draw();
    }, 3600);

  }

}

window.addEventListener("showStars", () => {
  //Stars animation
  //Adding the stars to the array as objects
  for (let i = 0; i < numberofStars; i++) {
    let x = Math.floor(Math.random() * window.innerWidth);
    let y = Math.floor(Math.random() * window.innerHeight);
    let starSize = (Math.random() + 1) - 0.7;
    starCollection.push(new Star(x, y, "white", starSize));
  }
  //Drawing all the stars on the screen
  for (let i = 0; i < starCollection.length; i++) {
    starCollection[i].draw();
  }
  //Storing random stars  
  const shuffleStars = () => {
    randomStars = [];
    for (let i = 0; i < flickeringStars; i++) {
      randomStars.push(Math.floor(Math.random() * starCollection.length))
    }
  }
  shuffleStars();


  //Flickering stars randomly
  const starflicker = () => {
    console.log(starCollection);
    console.log(randomStars);
    setTimeout(() => {
      requestAnimationFrame(starflicker);
      for (let i = 0; i < randomStars.length; i++) {
        starCollection[randomStars[i]].flicker();
      }
      shuffleStars();
    }, 500);
  }
  starflicker();
})

window.addEventListener("resize", () => {


  let canvas = document.querySelector("canvas");
  let context = canvas.getContext("2d");
  canvas.width = window.innerWitdh;
  canvas.height = window.innerHeight;
  context.clearRect(0, 0, window.innerWidth, window.innerHeight);

  starCollection = [];
  randomStars = [];

  let event = new CustomEvent("showStars");
  dispatchEvent(event);
});

body{
background-color:black;
}

<html>
<body>
<canvas></canvas>
</body>
</html>

Solution

Your problem is in the flicker function. Those setTimeouts still fire even after your resize function. So they call this.draw() even though those stars were removed from your array. The function still remembers what 'this' is.

You can clear all your timeouts like this:

  window.addEventListener("resize", () => {
    let canvas = document.querySelector("canvas");
    let context = canvas.getContext("2d");
    canvas.width = window.innerWitdh;
    canvas.height = window.innerHeight;
    context.clearRect(0, 0, window.innerWidth, window.innerHeight);
    starCollection = [];
    randomStars = [];

    var id = window.setTimeout(function () { }, 0);
    while (id--) {
      window.clearTimeout(id); // will do nothing if no timeout with id is present
    }

    let event = new CustomEvent("showStars");
    dispatchEvent(event);
});

Here's an example with 10 stars, 5 of which are flickering. I made the stars bigger so it's easier to see.

<html>

<head>
    <style>
        body {
            background: black;
        }
    </style>
</head>

<body>
    <canvas></canvas>

    <script>

        let starCollection = [];
        let randomStars = [];
        let numberofStars = 10;
        let flickeringStars = 5;

        class Star {
            constructor(x, y, color, radius) {
                this._canvas = document.querySelector('canvas');
                this._canvas.width = window.innerWidth;
                this._canvas.height = window.innerHeight;
                this._c = this._canvas.getContext('2d');
                this._radius = radius;

                this._x = x;
                this._y = y;
                this._color = color;
            }

            //drawing individual stars
            draw() {
                //Drawing
                this._c.beginPath();
                this._c.arc(this._x, this._y, this._radius, 0, Math.PI * 2, false);
                this._c.fillStyle = this._color;
                this._c.strokeStyle = 'black';
                this._c.stroke();
                this._c.fill();
                this._c.closePath();
            }
            //Fade in and out for stars
            flicker() {

                setTimeout(() => {
                    this._color = '#EBEBEB';
                }, 300);
                setTimeout(() => {
                    this._color = '#D9D9D9';
                }, 600);
                setTimeout(() => {
                    this._color = '#B6B6B6';
                }, 900);
                setTimeout(() => {
                    this._color = '#898787';
                }, 1200);
                setTimeout(() => {
                    this._color = '#4F4F4F';
                }, 1500);

                setTimeout(() => {
                    this._color = 'black';
                }, 1800);
                setTimeout(() => {
                    this._color = '#4F4F4F';
                }, 2100);
                setTimeout(() => {
                    this._color = '#898787';
                }, 2400);
                setTimeout(() => {
                    this._color = '#B6B6B6';
                }, 2700);
                setTimeout(() => {
                    this._color = '#D9D9D9';
                }, 3000);
                setTimeout(() => {
                    this._color = '#EBEBEB';
                }, 3300);
                setTimeout(() => {
                    this._color = '#FFFFFF';
                }, 3600);

                setTimeout(() => {
                    this.draw();
                }, 300);
                setTimeout(() => {
                    this.draw();
                }, 600);
                setTimeout(() => {
                    this.draw();
                }, 900);
                setTimeout(() => {
                    this.draw();
                }, 1200);
                setTimeout(() => {
                    this.draw();
                }, 1500);
                setTimeout(() => {
                    this.draw();
                }, 1800);
                setTimeout(() => {
                    this.draw();
                }, 2100);

                setTimeout(() => {
                    this.draw();
                }, 2400);
                setTimeout(() => {
                    this.draw();
                }, 2700);
                setTimeout(() => {
                    this.draw();
                }, 3000);
                setTimeout(() => {
                    this.draw();
                }, 3300);
                setTimeout(() => {
                    this.draw();
                }, 3600);

            }

        }

        window.addEventListener("showStars", () => {
            //Stars animation
            //Adding the stars to the array as objects
            for (let i = 0; i < numberofStars; i++) {
                let x = Math.floor(Math.random() * window.innerWidth);
                let y = Math.floor(Math.random() * window.innerHeight);
                // let starSize = (Math.random() + 1) - 0.7;
                let starSize = 10;
                starCollection.push(new Star(x, y, "white", starSize));
            }
            //Drawing all the stars on the screen
            for (let i = 0; i < starCollection.length; i++) {
                starCollection[i].draw();
            }
            //Storing random stars  
            const shuffleStars = () => {
                randomStars = [];
                for (let i = 0; i < flickeringStars; i++) {
                    randomStars.push(Math.floor(Math.random() * starCollection.length))
                }
            }
            shuffleStars();


            //Flickering stars randomly
            const starflicker = () => {
                console.log(starCollection);
                console.log(randomStars);
                setTimeout(() => {
                    requestAnimationFrame(starflicker);
                    for (let i = 0; i < randomStars.length; i++) {
                        starCollection[randomStars[i]].flicker();
                    }
                    shuffleStars();
                }, 500);
            }
            starflicker();
        })

        window.addEventListener("resize", () => {


            let canvas = document.querySelector("canvas");
            let context = canvas.getContext("2d");
            canvas.width = window.innerWitdh;
            canvas.height = window.innerHeight;
            context.clearRect(0, 0, window.innerWidth, window.innerHeight);

            starCollection = [];
            randomStars = [];
            var id = window.setTimeout(function () { }, 0);
            while (id--) {
                window.clearTimeout(id); // will do nothing if no timeout with id is present
            }

            let event = new CustomEvent("showStars");
            dispatchEvent(event);
        });
        dispatchEvent(new CustomEvent("showStars"))
    </script>

</body>

</html>

Check this post for more info on how that timeout clearing code works: javascript: Clear all timeouts?