title: Canvas, moving object from point to point along the arc
body: <p>I am novice in work with canvas. My challenge is moving object from one static coordinate to another by the arc. I have  used code example of solar system from <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations</a> , but after press on f5 in browser my object remains at the current location.I want to return my object to the starting point afet pressing f5 and to stop moving object when it get final point.  </p>
  
  <pre><code>function draw() {
  var ctx = document.getElementById('myCanvas').getContext('2d');
  ctx.globalCompositeOperation = 'destination-over';
  ctx.clearRect(0,0,220,220); // clear canvas
  ctx.save();
  ctx.translate(110,110); //relative for canvas center;
  
  //element
  var time = new Date();
  ctx.rotate( - ((2*Math.PI)/8)*time.getSeconds() - ((2*Math.PI)/8000)*time.getMilliseconds() );
  ctx.translate(65,0);//moving radius
  ctx.beginPath();//draw the arc
  ctx.arc(10, 10, 6, 0, 2 * Math.PI, false);
  //ctx.restore();
  ctx.lineWidth = 10;
  ctx.fillStyle = '#1e88e5';
  ctx.fill();
  ctx.strokeStyle = '#ffffff';
  ctx.stroke();
  
  // ctx.lineWidth = 5;
  
  
  ctx.stroke();
  
  
  ctx.restore();
  window.requestAnimationFrame(draw);}window.requestAnimationFrame(draw);
  </code></pre>
  
  <p><a href="https://jsfiddle.net/jkm5r5uu/" rel="nofollow">https://jsfiddle.net/jkm5r5uu/</a></p>