JS частицы (звезды) работают в хроме, но не firefox

Question

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

Я отправил его другу, и по какой-то причине он не работал в его браузере Chrome, но на моем браузере Chrome он работает, просто не firefox, и я совершенно не понимаю, потому что у меня нет сообщений об ошибках в любом браузере. был бы признателен за любую помощь :)

как примечание стороны, im рендеринг изображений, подобных этому, чтобы показать, что по какой-то причине они будут визуализировать, но не звезды, обычно у меня будет массив и пара циклов, но пока я хочу получить рендеринг звезд. Благодарю.

Редактирование: Я тестировал только в этих двух браузерах, о которых я упомянул.

var canvas = document.getElementById("canvas"), 
     context = canvas.getContext("2d"); 

    var stars = [], 
     numberOfStars = 200, 
     state = "town", 
     tileMap = new Image(); 

    tileMap.src = "images/tileMap.png"; 

    function Star() { 
    this.x = Math.random() * window.innerWidth; 
    this.y = Math.random() * window.innerHeight; 
    this.size = Math.random() * 3; 
    this.alpha = Math.random(); 
    this.counter = 0; 
    this.draw = function() { 
     this.counter++; 

     if (this.counter == 10) { 
     var decrease = false; 

     //check the brightness 
     if(this.alpha >= 1) { 
      decrease = true; 
     } else if (this.alpha <= 0) { 
      decrease = false; 
     } 

     //change brightness 
     if(decrease) { 
      this.alpha = 0.4; 
     } else { 
      this.alpha += 0.1; 
     } 

     //reset counter 
     this.counter = 0; 
     } 

     //draw star 
     context.fillStyle = "rgba(255,255,255," + this.alpha + ");"; 
     context.fillRect(this.x, this.y, this.size, this.size); 
    } 
    } 

    function loop() { 
    //que next frame 
    window.requestAnimationFrame(loop); 

    //set canvas size to window 
    context.canvas.width = window.innerWidth; 
    context.canvas.height = window.innerHeight; 

    //clear screen, set black background 
    context.fillStyle = "black"; 
    context.fillRect(0, 0, window.innerWidth, window.innerHeight); 

    //add stars 
    for(i = 0; i < stars.length; i++) { 
     stars[i].draw(); 

    //draw relavent map 
    context.drawImage(tileMap, 64, 64, 64, 128); 
    context.drawImage(tileMap, 64*2, 64, 64, 128); 
    context.drawImage(tileMap, 64*3, 64, 64, 128); 
    context.drawImage(tileMap, 64, 64*2, 64, 128); 
    context.drawImage(tileMap, 64*2, 64*2, 64, 128); 
    context.drawImage(tileMap, 64*3, 64*2, 64, 128); 
    } 
    } 

    window.onload = function() { 
    //create stars 
    for (i = 0; i < numberOfStars; i++) { 
     stars.push(new Star); 
    } 

    //request first frame 
    window.requestAnimationFrame(loop); 

    console.log("running..."); 
    } 

Answer 1

цвета строка не является командой, так удалить ;

Corect это:

context.fillStyle = "rgba(255,255,255," + this.alpha + ");"; 

Для этого:

context.fillStyle = "rgba(255,255,255," + this.alpha + ")";