Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
subh

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

Recommended Posts

 

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. 

Screen Shot 2018-11-10 at 3.18.13 AM.png

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

Link to post
Share on other sites

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

 

  • Like 3
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×