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

 

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

[TweenMax with componentDidMount in React]

I just found out about gsap (so cool stuff). So I wanted to try out how gsap works in react and wanted to convert https://codepen.io/davide77/pen/KeBvPY to a react component.
And I am lost in the first line
so this is what I was trying
 

import React, { PureComponent } from 'react';
import { TweenMax, Power2, TimelineLite, TweenLite } from "gsap";
class AnimatedSlides extends PureComponent {
  constructor(props) {
    super(props);
    this.__element = null;
    // reference to the animation
    this.myTween = null;
  }

  componentDidMount() {
    this.myTween = TweenMax.set(this.__element, { alpha: 1 }, 0);
  }

  render() {
    return (
      <div className="container">
        <div id="content-wrapper">
          <div
            id="foreground"
            ref={element => {
              this.__element = element;
              return element;
            }}
          >
          </div>

 

and it started throwing me error of Uncaught TypeError: Cannot read property 'offsetWidth' of undefined

What am I missing?