Stop animation with requestAnimationFrame on canvas

Question

I’m using the Canvas to do this https://jsfiddle.net/m42hu8zg/ , only that I would like to stop the animation by clicking on div using some functionality of requestAnimationFrame. I used the setInterval but the animation is not cool, so I decided to use the requestAnimationFrame but I don’t know how to stop the animation after one click and continue after another click.

The code simply works with a circle over a line using the method clip(), and when you click on div, the circumference moves on the x-axis passing over the line showing it, only I want to stop the animation after a click and then continue (like a play and stop button, giving the intention that the line stopped growing).

Would it also be possible for me to define a path for the circumference to go through after the click ? Example: http://prntscr.com/7y1wpw

*In my example it follows a path, but is straight, I wanted the circumference moves by a path already pre-defined as in the example above.

Answer 1

Got it, what I did was just put:

ctx.clearRect(cx, 0, canvas.width, canvas.heigth) 

With cx moving left or right, then he gave the impression that the line grew or decreased!