Как мне заставить этот скрипт анимации холста работать в Firefox?

Question

Я написал этот скрипт анимации холста в надежде использовать его на своем веб-сайте портфолио, но он в основном не работает в Firefox, и я не уверен, почему.Скрипт рисует звезды на холсте, которые медленно вращаются, и если вы удерживаете кнопку мыши, они вращаются быстрее, создавая следы.Он работает потрясающе в Chrome, но очень медленно и прерывисто в Firefox.

let canvas = document.querySelector('canvas');
let c = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let mouse = {
  x: window.innerWidth / 2,
  y: window.innerHeight / 2
}

let stars = [];
const starCount = 800;

class Star {
  constructor(x, y, radius, color){
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.color = color;

    this.draw = () => {
      c.save(); 
      c.beginPath(); 
      c.arc(this.x, this.y, this.radius, 0, Math.PI * 2); 
      c.fillStyle = this.color;
      c.shadowColor = this.color;
      c.shadowBlur = 15;
      c.fill(); 
      c.closePath(); 
      c.restore(); 
    };

    this.update = () => {
      this.draw();
    };
  }
}

let colors = [
  "#A751CC",
  "#DE9AF9",
  "#F9E0F9",
  "#B5ECFB",
  "#5F86F7"
];


(initializeStars = () =>{
  for(let i = 0; i < starCount; i++){
    let randomColorIndex = Math.floor(Math.random() * 5);
    let randomRadius = Math.random() * 2;
    let x = (Math.random() * (canvas.width + 400)) - (canvas.width + 400) / 2; 
    let y = (Math.random() * (canvas.width + 400)) - (canvas.width + 400) / 2;
    stars.push(new Star(x, y, randomRadius, colors[randomColorIndex]));
  }
})();

let opacity = 1;
let speed = 0.0005;
let time = 0;

let spinSpeed = desiredSpeed => {
  speed += (desiredSpeed - speed) * 0.01;
  time += speed;
  return time;
}

let starOpacity = (desiredOpacity, ease) => {
  opacity += (desiredOpacity - opacity) * ease;
  return c.fillStyle = `rgba(18, 18, 18, ${opacity})`;
}

let animate = () => {
  window.requestAnimationFrame(animate);
  c.save();

  if(mouseDown){
    starOpacity(0.01, 0.03);
    spinSpeed(0.012);
  }else{
    starOpacity(1, 0.01);
    spinSpeed(0.001);
  }

  c.fillRect(0,0, canvas.width, canvas.height);
  c.translate(canvas.width / 2, canvas.height / 2);
  c.rotate(time);

  for(let i = 0; i < stars.length; i++){
    stars[i].update();
  }

  c.restore();

}


window.addEventListener('mousemove', e => {
  mouse.x = e.clientX - canvas.width / 2;
  mouse.y = e.clientY - canvas.height / 2;
});


window.addEventListener('resize', () => {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  stars = [];
  initializeStars();
});


let mouseDown = false;

window.addEventListener("mousedown", () =>{
  mouseDown = true;
});

window.addEventListener("mouseup", () => {
  mouseDown = false;
});

animate();

Вот ссылка на демонстрацию на Code Pen;любая помощь приветствуется.

Answer 1

1. Вы можете использовать прямоугольник вместо дуги, чтобы нарисовать ваши звезды:

   c.rect (this.x, this.y, 2 * this.radius, 2 * this.radius);

2. удалить размытие Это чрезвычайно дорого:

   // c.shadowBlur = 15;

Вы можете использовать радиальныеградиент, идущий от непрозрачного в центре к прозрачному вместо него.