مشکل در جاوا اسکریپت

سلام. توی این کد پایین رنگ نقطه ها فقط توی کروم درست نشون داده میشه. توی باقی مرورگرا رنگ همه مشکی میشه. همچنین توی باقی مرورگرا حالت fade هم وجود نداره و نقاط یهو ظاهر میشن.

کد:

---

var canvas = $('canvas')[0];
var context = canvas.getContext('2d');


canvas.width = 722;
canvas.height = 128;


var Dots = [];
var colors = ['#FF9900', '#424242', '#BCBCBC', '#3299BB'];
var maximum = 130;


function Initialize() {
  GenerateDots();


  Update();
}


function Dot() {
  this.active = true;


  this.diameter = Math.random() * 7;


  this.x = Math.round(Math.random() * canvas.width);
  this.y = Math.round(Math.random() * canvas.height);


  this.velocity = {
    x: (Math.random() < 0.5 ? -1 : 1) * Math.random() * 0.2,
    y: (Math.random() < 0.5 ? -1 : 1) * Math.random() * 0.2
  };


  this.alpha = 0.1;
  this.hex = colors[Math.round(Math.random() * 3)];
  this.color = HexToRGBA(this.hex, this.alpha);
}


Dot.prototype = {
  Update: function() {
    if(this.alpha < 0.8) {
      this.alpha += 0.01;
      this.color = HexToRGBA(this.hex, this.alpha);
    }


    this.x += this.velocity.x;
    this.y += this.velocity.y;


    if(this.x > canvas.width + 5 || this.x < 0 - 5 || this.y > canvas.height + 5 || this.y < 0 - 5) {
      this.active = false;
    }
  },


  Draw: function() {
    context.fillStyle = this.color;
    context.beginPath();
    context.arc(this.x, this.y, this.diameter, 0, Math.PI * 2, false);
    context.fill();
  }
}


function Update() {
  GenerateDots();


  Dots.forEach(function(Dot) {
    Dot.Update();
  });


  Dots = Dots.filter(function(Dot) {
    return Dot.active;
  });


  Render();
  requestAnimationFrame(Update);
}


function Render() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  Dots.forEach(function(Dot) {
    Dot.Draw();
  });
}


function GenerateDots() {
  if(Dots.length < maximum) {
    for(var i = Dots.length; i < maximum; i++) {
      Dots.push(new Dot());
    }
  }


  return false;
}


function HexToRGBA(hex, alpha) {
  var red = parseInt((TrimHex(hex)).substring(0, 2), 16);
  var green = parseInt((TrimHex(hex)).substring(2, 4), 16);
  var blue = parseInt((TrimHex(hex)).substring(4, 6), 16);


  return 'rgba(' + red + ', ' + green + ', ' + blue + ', ' + alpha + ');';
}


function TrimHex(hex) {
  return (hex.charAt(0) == "#") ? hex.substring(1, 7) : h;
}


$(window).resize(function() {
  Dots = [];
  canvas.width = 722;
  canvas.height = 128;
});


Initialize();

---

توی مرورگر قسمت Console ارور ها رو چک کنید.

برای این بخش کد:

کد:

---

!function(t){String.prototype.trim===t&&(String.prototype.trim=function(){return this.replace(/^\s+|\s+$/g,"")}),Array.prototype.reduce===t&&(Array.prototype.reduce=function(n){if(void 0===this||null===this)throw new TypeError;

---

نوشته:

کد:

---

mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create

---

لطفا اگه ایده ای برای حلش دارید بفرمایید...