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.

Answer 1

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 :

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 :

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