How to add gradient effect on canvas circle's minor arc?

[subh]

 

I am trying to add the gradient effect of the small arc in my canvas image. Using

   

context.createLinearGradient(0, 0, 400. 400);
secondGradient.addColorStop(0, 'white');
secondGradient.addColorStop(0.2, 'black');
secondGradient.addColorStop(0.8, 'black');
secondGradient.addColorStop(1, 'white');

But unable to get the expected results, also would be great if someone can explain how createLinearGradient works with circle.
the idea is to have the edge effect of the arc's end. If I had to guess, I think I am doing something wrong with the context.createLinearGradient(0, 0, 400. 400); part.

Thanks in advance. 

See the Pen JeKwby by anon (@anon) on CodePen

[Sahil]

Your gradient goes from top-left corner to bottom right, you need to position it based on your arc. Best way to see your gradient would be use rect and fill it with gradient so you can see which areas gradient is affecting. Here is fork but there are many other issues with your demo like blur is affecting gradient color, and top left part is not getting drawn(or your are drawing rect on top of that) so I am not sure what is going on.

 

Also, please keep your questions related to GSAP API only we don't provide support for general javascript related questions and it seems you are not even using GSAP.

 

See the Pen MzeZXj by Sahil89 (@Sahil89) on CodePen