firefox and radialgradient (using html5 canvas)

Question

For some reason, my firefox doesn´t show radial gradient when using a Canvas, does anyone know why? (I don´t have this problem on other computers)

here is some of the code I´m using:

var canvas = document.getElementById ( "layer2" ) ; 
var context = canvas.getContext ( "2d" ) ;   
var radgrad2 = context.createRadialGradient( x, y, 15 ,x-30,y-60, 0);
radgrad2.addColorStop(0, aux.color , .5);
radgrad2.addColorStop(0.75, "#ffffff" , .5 );
radgrad2.addColorStop( .5, "#ffffff" , .5);
context.fillStyle = radgrad2;

ps: I have this problem only in Firefox (it´s updated)

Quietude

I'm having the same issue (Firefox 11): i.imgur.com/ZSfEL.png – Kalamazoo

Looks like Firfox has officially fixed the issue in version 11. So no need to use my solution below anymore. – Extemporary

ive updated my firefox and still no luck...weird – Quietude

Answer 1

I'm not sure, but if this code work on other PCs under FireFox then may be you have an old version of the FireFox browser or calling document.getElementById before cavas tag with id "layer2" to be loaded. The other problem I noticed was that you using float numbers without leading zero. For example 0.5 instead of 0.5. What happens when you run this code?

window.addEventListener("load", function() {
            var canvas = document.getElementById ( "layer2" ) ; 
            if(!canvas.getContext) {
                alert("Your browser don't support canvas.");
            throw new Error("Your browser don't support canvas.");  
            }
            var context = canvas.getContext ( "2d" ) ;   
            var radgrad2 = context.createRadialGradient( x, y, 15 ,x-30,y-60, 0);
            radgrad2.addColorStop(0, aux.color , 0.5);
            radgrad2.addColorStop(0.75, "#ffffff" , 0.5 );
            radgrad2.addColorStop(0.5, "#ffffff" , 0.5);
            context.fillStyle = radgrad2;

}, false);

Indemnify

On firefox, the canvas works fine when I use normal colors, but when I use gradient everything becomes white and I´m only able to see strokes. – Quietude

Its because the gradient is failing and defaulting to a white fill instead. – Extemporary

Answer 2

After searching for months I now have an answer to this elusive question. Mozilla changed how their radial gradients work. To create a simple radial gradient you no longer need to create a path. You simply fill a rectangle instead. See below code example:

var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);
radgrad2.addColorStop(0, '#FF5F98');
radgrad2.addColorStop(0.75, '#FF0188');
radgrad2.addColorStop(1, 'rgba(255,1,136,0)');

ctx.fillStyle = radgrad2;
ctx.fillRect(0,0,150,150);

This method is incredibly more efficient than creating paths with a radial gradient. Although, I can also see this method being a bit more limiting to developers. See this example from Mozilla's developer network for a better example: https://developer.mozilla.org/samples/canvas-tutorial/4_10_canvas_radialgradient.html

Extemporary

Answer 3

I've found an odd problem in Firefox with SVG and radialGradients. If I define the fill in a CSS class and embed the CSS into the document it works fine, however if I move the CSS into a seperate file and use the 'link' tag to include the CSS, then the radialGradient doesn't work. This seems to be a bug in Firefox as it works in Chrome, Safari, Opera and even IE, but not in Firefox.

Retina

That doesn't seem to be an answer to this question, which is about canvas. – Nigel