Jump to content
Search Community

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

subh test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 comment
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 comment
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.
  • Create New...