Firefox and radialgradient (using html5 canvas)

Question

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

here is the code i use:

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 only have this problem in Firefox (it is updated)

Answer 1

I'm not sure, but if this code works on other PCs under FireFox, maybe you have an old version of the FireFox browser or a call to document.getElementById before the cavas tag with id "layer2" to load. Another problem I noticed was that you are using floating point numbers without a leading zero. For example, 0.5 instead of 0.5. What happens when this code is run?

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

Answer 2

After searching for several months, I now have an answer to this elusive question. Mozilla has changed the work of its radial gradients. To create a simple radial gradient, you no longer need to create a path. Instead, you just fill the rectangle. Sample code below:

 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 effective than creating paths with a radial gradient. Although, I also see that this method is a bit more restrictive to developers. Here is an example from the Mozilla developer network for a better example: https://developer.mozilla.org/samples/canvas-tutorial/4_10_canvas_radialgradient.html

Answer 3

I found a strange problem in Firefox with SVG and radial gradients. If I define the filling of the CSS class and paste the CSS into the document, it works fine, however, if I translate the CSS into a separate file and use the 'link' tag to include CSS, then the radial Gradient does not work. This seems like a bug in Firefox because it works in Chrome, Safari, Opera, and even IE, but not in Firefox.