How to synchronize the movement of elements on a canvas canvas?

Question

JavaScript

There is a circle drawn in gray, along this circle the second circle moves with a gradient from one point to another, thereby filling the first circle. Also, a "point" moves along these circles, which, in a certain time, overcomes the entire circle, while the circle with the gradient is drawn.
https://jsfiddle.net/yanyshevvd/z5d9er3e/281/
1. How can "point" move in sync with a gradient circle?

big picture

2. How to set the same start point for animation (movement of elements)?

big picture

Answer 1

https://jsfiddle.net/2195myfv/