JavaScript Canvas Feather Arc

Question

I'm currently drawing arcs with the canvas tag and I've been asked if I can feather (soften) the edges of the arcs. Is this possible? Googling and searching on here it seems like more hassle than it's worth.

I've tried looking on mdn too but resources for feathering an element seem sparse.

Could you provide a screenshot of what you're asking for? I *think* I know but I don't want to spend time on a demo and be way off. — Loktar, Nov 22 '12 at 17:21
So I am looking for an effect along these lines to use with a clearArc prototype I found on the internet. If it's possible it's not a deal breaker if it can't be done. http://www.jma.duq.edu/classes/shepherd/jma260-03-and-04/Photoshop/Toolbox/feather-ex.jpg — Dave Mackintosh, Nov 23 '12 at 11:20

Denys Séguret · Accepted Answer · 2012-11-23T15:24:47.057

4

From the image you link to in your comment, it seems you're trying to do a shadow.

If this is the case, you can do this :

enter image description here

With this code :

c.beginPath();
c.arc(33, 33, 22, 0, Math.PI, false);
c.shadowOffsetX = 2;
c.shadowOffsetY = 2;
c.shadowBlur = 5;
c.shadowColor  = 'rgba(0, 0, 0, 0.8)';
c.fillStyle = "red";
c.fill();

Demonstration

Or maybe you're trying to do this :

enter image description here

c.beginPath();
c.arc(33, 33, 22, 10, Math.PI*2, false);
c.lineWidth = 2;
var gradient = c.createLinearGradient(20, 0, 50, 40);
gradient.addColorStop(0, "white");
gradient.addColorStop(0.5, 'red');
gradient.addColorStop(1, "white");
c.strokeStyle = gradient;
c.stroke();

Demonstration

edited Nov 23 '12 at 15:24

answered Nov 23 '12 at 15:08

Denys Séguret

372,613
87
782
758

This looks like it would do the trick, Unfortunately I can't try this right now but I will have a look tomorrow and let you know how I get on. – Dave Mackintosh Nov 23 '12 at 16:36
It was close but not quite there, I really appreciate the time you put in and I've marked it as the solution since it was close enough but not perfect, didn't perform very well on an iPad with the touch events. I've ditched the idea but again, thanks. – Dave Mackintosh Nov 27 '12 at 11:31
Is this the best approach still in 2020? Thanks for your help! – Crashalot Aug 09 '20 at 08:44

score 0 · Answer 2 · edited May 23 '17 at 12:24

There is unfortunately no feather option (yet), but someone who answered this question came up a this fiddle which comes probably pretty close to what you want to achieve using RGBA gradients:

gradient.addColorStop(0,    "rgba("+r+","+g+","+b+",0)");

See his jsfiddle here: http://jsfiddle.net/chdh/MmYAt/

But it still is a bit of a hassle. I would like to submit a feature request for this but I simply have no idea where?

JavaScript Canvas Feather Arc

2 Answers2