Javascript Firefox RadialGradient

Question

Для моего хобби игрового проекта мы (с другом) используем HTML + JS. И рисуй на холсте. Нарисуем воздушные шары с таким кодом:

var radGrad = ctx.createRadialGradient(this.p.x - this.radius/4, this.p.y - this.radius/4, this.radius, this.p.x - this.radius/2, this.p.y - this.radius/2, 0); 
     radGrad.addColorStop(1, "rgba(255, 255, 255, 0.8)"); 
     radGrad.addColorStop(0, this.color); 
     ctx.fillStyle = radGrad; 
     ctx.beginPath(); 
     ctx.arc(this.p.x, this.p.y, this.radius, 0, Math.PI * 2, true); 
     ctx.closePath(); 
     ctx.fill(); 

В Safari и Chrome у нас нормальное поведение. Также это нормально в Firefox на Mac OS. Но для Firefox на Windows, мы получили:

http://dl.dropboxusercontent.com/u/5283279/Screenshots/2013-04-26%2013_10_26-BalloonSucker.png

Когда я выключаю аппаратное ускорение в Firefox - все работает, но это для общественности, так что я не могу рекомендовать другим, чтобы выключить его.

Answer 1

Я, наконец, решил. В firefox, когда внутренний градиентный круг является внешним. Чтобы исправить это:

var cInner = [ this.p.x - this.radius/4, this.p.y - this.radius/4, this.radius ], 
cOuter = [ this.p.x - this.radius/2, this.p.y - this.radius/2, 0 ]; 

var radGrad = ctx.createRadialGradient(
    cOuter[0],cOuter[1],cOuter[2], 
    cInner[0],cInner[1],cInner[2] 
); 
radGrad.addColorStop(0, "rgba(255, 255, 255, 0.8)"); 
radGrad.addColorStop(1, this.color);