shadowBlur (html canvas) not working in js loop - html

Question

I was trying to improve my stars in the sky animation which I created using JS. This is when i discovered, I could use the shadowBlur property to change the size of the shadow created around my stars, to make it look like they are flickering. The issue now is that the shadowBlur goes up but doesn't go back to black. Here is the code I have used. Any help with this will be greatly appreciated :).
Have a great day!
// ---- Vars for star animation
let randomStars = [];
let starCollection = [];
let numberofStars = 50;
let flickeringStars = 50;
class Star{
constructor(x,y,color,radius,shadowBlur){
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;
this._shadowBlur = 10;
this._shadowColor = 'white';
}
//drawing individual stars
draw(){
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.shadowColor = this._shadowColor;
this._c.shadowBlur = this._shadowBlur;
this._c.stroke();
this._c.fill();
this._c.closePath();
}
//Fade in and out for stars
flicker(){
setTimeout(()=>{this._shadowBlur=10;},200);
setTimeout(()=>{this._shadowBlur=8;},400);
setTimeout(()=>{this._shadowBlur=6;},600);
setTimeout(()=>{this._shadowBlur=4;},800);
setTimeout(()=>{this._shadowBlur=2;},1000);
setTimeout(()=>{this._shadowBlur=0;},1200);
setTimeout(()=>{this._shadowBlur=2;},1400);
setTimeout(()=>{this._shadowBlur=4;},1600);
setTimeout(()=>{this._shadowBlur=6;},1800);
setTimeout(()=>{this._shadowBlur=8;},2000);
setTimeout(()=>{this._shadowBlur=10;},2200);
setTimeout(()=>{this.draw();},200);
setTimeout(()=>{this.draw();},400);
setTimeout(()=>{this.draw();},600);
setTimeout(()=>{this.draw();},800);
setTimeout(()=>{this.draw();},1000);
setTimeout(()=>{this.draw();},1200);
setTimeout(()=>{this.draw();},1400);
setTimeout(()=>{this.draw();},1600);
setTimeout(()=>{this.draw();},1800);
setTimeout(()=>{this.draw();},2000);
setTimeout(()=>{this.draw();},2200);
}
//Clears the canvas
clearstars(){
this._c.clearRect(0,0,window.innerWidth, window.innerHeight);
}
}
// ---- Functions ----
//Typing animation
const typingAnimation = ()=>{
if(textProgress < text.length){
setTimeout(()=>{requestAnimationFrame(typingAnimation)}, speed);
if(text.charAt(textProgress) === '\n')document.getElementById('animation-text').innerHTML += '</br>';
document.getElementById('animation-text').innerHTML += text.charAt(textProgress);
textProgress ++;
}else{
let event = new CustomEvent('showStars');
dispatchEvent(event);
}
}
//Store stars
const storeStars = ()=>{
starCollection = [];
for(let i=0;i<numberofStars;i++){
let x = Math.floor(Math.random()*window.innerWidth);
let y = Math.floor(Math.random()*window.innerHeight);
starCollection.push(new Star(x,y,"white",(Math.random()+1)-0.7));
}
}
//Show stars to the screen
const showStars = ()=>{
for(let i=0;i<starCollection.length;i++){
starCollection[i].draw();
}
}
//Store random stars
const generateRandomStars = ()=>{
randomStars = [];
for(let i=0;i<flickeringStars;i++){
let x = Math.floor(Math.random()*window.innerWidth);
let y = Math.floor(Math.random()*window.innerHeight);
randomStars.push(new Star(x,y,"white",(Math.random()+1)-0.7));
}
}
//Show randoms stars after clearing previous set of flickering stars
const showRandomStars = ()=>{
let id = window.setTimeout(function () { }, 0);
while (id--) {
window.clearTimeout(id);
}
let starHandler = new Star(0,0,"white",0);
starHandler.clearstars();
showStars();
flickerStars();
}
//Flickers stars and changes set of stars randomly
const flickerStars = ()=>{
for(let i=0;i<flickeringStars;i++){
setInterval(()=>{
randomStars[i].flicker();
},2200);
setInterval(()=>{
console.log("changing stars pattern");
generateRandomStars();
showRandomStars();
},12200);
}
}
// ---- Event Listeners ----
//Typing animation on load
window.addEventListener("load", ()=>{
storeStars();
generateRandomStars();
showStars();
flickerStars();
});
//Handles star animation scaling on window resize
window.addEventListener("resize", ()=>{
let id = window.setTimeout(function () { }, 0);
while (id--) {
window.clearTimeout(id);
}
let starHandler = new Star(0,0,"white",0);
starHandler.clearstars();
generateRandomStars();
storeStars();
showStars();
flickerStars();
});
body{
background-color:black;
}
<html>
<body><canvas></canvas></body>
</html>

Answer 1

I can not work out what FX you are trying to get. Below is a simple flickering star animation that uses small rectangles that change size to simulate flicker.
The frame rate is reduced so that the flicker is more pronounced.
It is very efficient and does not require complex state changes, or slow render methods (like blur)
var W = 0, H = 0; // hold canvas size. Set to zero so first frame sizes canvas
var count = 500; // number of stars
var frame = 0; // current frame number
const frameRate = 5; // render stars ever 5 frames
const sizeRange = 1.5; // max size of star us minSize + sizeRange + flickerSize
const minSize = 1; // minimum size of star
const flickerSize = 1; // amount of change random change to make a star brighter
const flickerRate = 0.1; // odds per rendered frame that a star flickers
const stars = [];
// Create a random set of numbers for star positions.
// Values must be larger than largest canvas you are going to use.
// This will work up to 8K display
while (count--) { stars.push(Math.random() * 1024 * 8) }
const ctx = canvas.getContext("2d");
requestAnimationFrame(mainLoop);
function mainLoop() {
var len = stars.length, i = 0, x = stars[i++], starSize;
// if the window has resized change the canvas to fit
if (W !== innerWidth || H !== innerHeight) {
W = canvas.width = innerWidth;
H = canvas.height = innerHeight;
ctx.fillStyle = "#FFF";
frame = 0;
}
if (frame++ % frameRate === 0) { // only render every frameRate frames
ctx.clearRect(0, 0, W, H);
ctx.beginPath(); // draw all stars with one path aas it is several orders
// of magnitude quicker than creating a path for each
while (i < len) {
// draws small stars to large
const starScale = (i / len); // set scale from 0 to 1
starSize = sizeRange; // set the range of sizes
if (Math.random() < flickerRate) { // on random odds of flicker
starSize += flickerSize * Math.random(); // add random flicker size
}
starSize *= starScale; // scale the star
starSize += minSize; // add min size of star
halfSize = starSize / 2; // offset to top left of star
const y = stars[i++]; // get next random number as star y pos
// add rect to path fitted to canvas width and height (W, H)
ctx.rect((x % W) - halfSize , (y % H) - halfSize , starSize , starSize );
x = y; // Use y for the next x star coordinate
}
ctx.fill(); // fill in all the stars
}
requestAnimationFrame(mainLoop);
}
canvas {
position: absolute;
top: 0px;
left: 0px;
background: #000;
}
<canvas id="canvas"></canvas>