Washed-out colors with canvas createConicGradient() in Firefox

120 Views Asked by At

I'm experiencing an issue with the ctx.createConicGradient() method in Firefox where the colors appear to be desaturated and washed out. This issue seems to be specific to Firefox as the same code works fine in Chrome, and other gradient methods like ctx.createLinearGradient() and ctx.createRadialGradient() also work correctly in both browsers.

This is how example conic gradient from MDN example looks like for me in Firefox:

enter image description here

Same example in Chrome:

enter image description here

I have observed this issue in both Firefox Developer Edition and Firefox Nightly. Adjusting Firefox's color management settings (gfx.color_management.mode and gfx.color_management.enablev4) and restarting the browser did not resolve the issue.

Interestingly, applying the same gradient multiple times intensifies the colors but only up to a point, suggesting that the issue might be related to how Firefox handles alpha or opacity in conic gradients.

Can anyone confirm if they're experiencing the same issue, or suggest any potential solutions? I'm interested in getting native createConicGradient() method to work and would like to avoid polyfills and hacks.

0

There are 0 best solutions below