title: Using JS to animate a circle stroke when in view
body: <p>I am trying to generate a site with interactive elements and animations.  I have came across <a href="http://jsfiddle.net/loktar/uhVj6/4/" rel="nofollow">this Fiddle</a> which is perfect for what I need.</p>
  
  <p>I want the circle to start animating when the canvas element is visible in the browser, or possibly when a certain scroll point has been reached (ie: > 1000 px in the Y direction- start animation).</p>
  
  <p>I am completely new to JS, so have tried to piece together code from other sources with no luck.  I have tried (in context with the <a href="http://jsfiddle.net/loktar/uhVj6/4/" rel="nofollow">Fiddle</a>):</p>
  
  <pre><code>// requestAnimationFrame Shim
  (function() {
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                                window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    window.requestAnimationFrame = requestAnimationFrame;
  })();
  
  
  var canvas = document.getElementById('myCanvas');
   var context = canvas.getContext('2d');
   var x = canvas.width / 2;
   var y = canvas.height / 2;
   var radius = 75;
   var endPercent = 85;
   var curPerc = 0;
   var counterClockwise = false;
   var circ = Math.PI * 2;
   var quart = Math.PI / 2;
  
   context.lineWidth = 10;
   context.strokeStyle = '#ad2323';
   context.shadowOffsetX = 0;
   context.shadowOffsetY = 0;
   context.shadowBlur = 10;
   context.shadowColor = '#656565';
  
  
   function animate(current) {
       context.clearRect(0, 0, canvas.width, canvas.height);
       context.beginPath();
       context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);
       context.stroke();
       curPerc++;
       if (curPerc &lt; endPercent) {
           requestAnimationFrame(function () {
               animate(curPerc / 100)
           });
       }
   }
  
  
  // My altered code to the original
     $(window).scroll(function() {
      if ($('#myCanvas').is(':visible')) {
          .animate();
      }
  });
  </code></pre>
  
  <p>But this is doing nothing.  I would imagine this to be a relatively simple problem for those in the know.  But I haven't a clue!</p>
  
  <p>Look forward to your answers, apologies if I have missed anything!</p>