title: Drawing a shape in Canvas on repeat
body: <p>I'm new here and trying to get canvas to work for me. I wanted to make a canvasanimation where a circle was redrawn every 2 seconds with a canvas reset in between. The circle should appear randomly within(which i managed to get to work) but i cant figure out how to get the animation to repeat itself every 2 seconds. I used the requestAnimationFrame callback, but this refreshes like 60 times a second. </p>
  
  <pre><code>var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  
  var requestAnimationFrame = window.requestAnimationFrame ||
                          window.mozRequestAnimationFrame ||
                          window.webkitRequestAnimationFrame ||
                          window.msRequestAnimationFrame;
  
  
  function reset(){
  
  
  draw();
  requestAnimationFrame(reset);
  
   }
  
  
  function draw(){
  
    var X = Math.floor(Math.random()*canvas.width);
    var Y = Math.floor(Math.random()*canvas.height);
    var radius = 70;
  
   context.clearRect(0,0, canvas.width, canvas.height);
    context.beginPath();
    context.arc(X, Y, radius, 0, 2 * Math.PI, false);
    context.fillStyle = 'red';
    context.fill();
  }
  function main(){
  
  requestAnimationFrame(reset);
  }
  
  main();
  </code></pre>
  
  <p>I updated the code like you said, but now i get circles every two seconds, but the canvas is not resetting in between.</p>
  
  <pre><code>function main(){
  setInterval(function(){
  draw();
  context.clearRect(0,0, 640,480)    ;
  }
  
  ,2000);
  
  };
  </code></pre>
  
  <p>I think I found it, or at least a way to do it. I combined your answer with a setTimeout function.</p>
  
  <pre><code>var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  
  
  function draw() {
  var X = Math.floor(Math.random() * canvas.width);
  var Y = Math.floor(Math.random() * canvas.height);
  var radius = 70;
  
  
  context.beginPath();
  context.arc(X, Y, radius, 0, 2 * Math.PI, false);
  context.fillStyle = 'red';
  context.fill();
  
  }
  ;
  
  
  function reset() {
  canvas.width = canvas.width;
  
  }
  
  function action() {
  
  draw();
  setTimeout(function() {
      reset()
  }, 2000);
  
  }
  ;
  
  function main() {
  setInterval(function() {
      action();
  
  }, 2200);
  }
  
  
  
  
  
  main();
  </code></pre>