CODEWITHSUNDEEP
javascriptfirefoxcanvas
user3011902
user3011902

Reputation:

Javascript Canvas Alpha not working on Firefox

I am attempting to draw a circle with a radial gradient on a canvas and apply an alpha to it. It works well on chrome, however it does not seem to work on firefox. Here is a fiddle: http://jsfiddle.net/1m4wbdgc/

Here is the code:

context.globalAlpha = 0.2;
var gradient = context.createRadialGradient(x, y, radius / 2, x, y,
            radius);
gradient.addColorStop(0, '#525455');
gradient.addColorStop(1, '#202d33');
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI);
context.closePath();
context.fillStyle = gradient;
context.fill();

Why is the alpha not working on firefox?

Here is a screenshot from Firefox: enter image description here

As you can see, the alpha is not working correctly. My Firefox version is: 41.0.2

Upvotes: 0

Views: 450

Answers (1)

Blindman67
Blindman67

Reputation: 54089

I am using FF Developer Edition 43.0a2 Well quite surprised at this behaviour, definitely not in the spec. After some hunting it turns out to be a bug in firefox. Bug 1164912. dated 15th, May 2015 so been around for a while.

There is a simple work around by setting the colour stops with CSS rgba function and multiplying the alpha by the global alpha rgba(R,G,B,alpha * ctx.globalAlpha) I tried that on the fiddle supplied and it worked perfectly on FF.

You will have to use that method until they fix it.

Upvotes: 2

Related Questions