Question

i am trying to apply a blur shadow to a circle, but the thing is i just want the outer edge to have this blur/shadow affect, how can i do that? currently, the shadow is applied to all the borders
oh by the way, i am trying to animate…so the endingAngle below is supposed to keep changing to go from 0% circle to full circle..anyway that question is how i can specify just one side of the circle to have blur applied to…thanks

context.shadowBlur = 20; 
    context.shadowColor = "rgb(0, 255   , 0)";
context.beginPath();
context.arc(295, 295, 175, 1.5 * Math.PI, endingAngle, false);
context.lineWidth = 20;
context.strokeStyle = 'red';
context.stroke();
context.restore();

Answer 1

This isn’t usually something you’d use a shadow for. You’re better off with a radial gradient.

For example:

http://jsfiddle.net/NEntS/

The code:

var rg = context.createRadialGradient(295, 295, 175, 295, 295, 175+20);
rg.addColorStop(0, 'rgba(0,255,0,1)');
rg.addColorStop(0.8, 'rgba(0,255,0,.2)');
rg.addColorStop(1, 'rgba(255,255,255,0)');

// draw gradient behind
context.strokeStyle = rg;
context.beginPath();
context.arc(295, 295, 185, 1.5 * Math.PI, 2, false);
context.lineWidth = 25;
context.stroke();
context.restore();

// now stroke the red
context.beginPath();
context.arc(295, 295, 175, 1.5 * Math.PI, 2, false);
context.lineWidth = 20;
context.strokeStyle = 'red';
context.stroke();
context.restore();​

I’m drawing an arc with a larger radius and line width that has a green-to-transparent gradient (from center to outer). That gives the same effect you want but only on the outside.