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)

I'm having the same issue (Firefox 11): http://i.imgur.com/ZSfEL.png — nak, Mar 30 '12 at 19:08
Looks like Firfox has officially fixed the issue in version 11. So no need to use my solution below anymore. — Ash Blue, May 02 '12 at 02:21

score 0 · Answer 1 · answered Oct 10 '14 at 11:19

0

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.

answered Oct 10 '14 at 11:19

SPlatten

5,334
11
57
128

That doesn't seem to be an answer to this question, which is about canvas. – Robert Longson Oct 10 '14 at 14:12

score 0 · Answer 2 · answered Dec 26 '11 at 13:59

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);

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. — Camilo Barraza, Dec 28 '11 at 19:49
Its because the gradient is failing and defaulting to a white fill instead. — Ash Blue, May 02 '12 at 02:22

score 0 · Answer 3 · edited Apr 02 '12 at 01:30

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

firefox and radialgradient (using html5 canvas)

3 Answers3