Search code examples
javascriptcanvaswebkitradial-gradients

Canvas – createRadialGradient() not working as expected in Chrome v65

When using context.createRadialGradient() on a 2d context, the gradient is not rendering as expected in Chrome v65.

Screen shot

The example above is from MDN, but it's also happening in some of my own code.

The gradient works fine in Firefox v59, Safari v11. It fails in Opera v52, so maybe it's a new bug in webkit? I've tested this on two different computers, so shouldn't be anything in my local setup causing it.

Anybody else experiencing this bug or better yet know how to fix it?

EDIT: Found an open issue on Chromium here. Apparently this is not a consistent bug, and should be fixed in v66 if I'm reading the comments correctly.

Solution

  • As mentioned in the post above, there's an issue in Chromium v65. It should all be fixed in v66.

    If you do need to fix it right now, the hacky way is to make sure that the gradient doesn't receive identical x and y arguments for the first and the second circle:

    var gradient = ctx.createRadialGradient(100,100,100,100,100,0); // Doesn't work
var gradient = ctx.createRadialGradient(100,100,100,100.001,100,0); // Works

    You can see the fix in effect here. Happy hacking!