Why doesn't createRadialGradient work on Firefox?

Question

I'm working with the canvas tag of HTML5 and JavaScript to access the canvas methods and properties.

This code works on Chrome but it doesn't work on Firefox: http://jsfiddle.net/thirtydot/BD3xA/ .

Does anyone know why?

Answer 1

createRadialGradient works on Firefox, but addColorStop does not work completely - and will throw an exception if you pass in a transparency along with your color.

For example, after you create a radial gradient:

var grad = ctx.createRadialGradient(centerX,centerY,outRadius,centerX,centerY,outRadius+pad);
var colorOut="rgba(100,200,100,0.7)";
grad.addColorStop(0,'rgba(0,0,0,0)');
grad.addColorStop(0.01,colorOut);

The above works great on chrome, but will not work on FF because of the 0.7 in the rgba color.

So, I use something like:

colorOut= ($.browser.mozilla)?'#D88':'rgba(200,100,100,0.7);';

This doesn't make gradients look quite so nice on FF, but functions.

Of course, you should cache that $.browser.mozilla earlier - make a var IS_MOZILLA = $.browser.mozilla; and then just use that (so that you minimize class calls... as saving every computation in complex drawing calls is important).