Using JS to animate a circle stroke when in view

Question

I am trying to generate a site with interactive elements and animations. I have came across this Fiddle which is perfect for what I need.

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).

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 Fiddle):

// 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 < endPercent) {
         requestAnimationFrame(function () {
             animate(curPerc / 100)
         });
     }
 }


// My altered code to the original
   $(window).scroll(function() {
    if ($('#myCanvas').is(':visible')) {
        .animate();
    }
});

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!

Look forward to your answers, apologies if I have missed anything!

Answer 1

You need to include Jquery in your fiddle. That was giving you an error if your going to try and use it for scroll() Also you dont need the . in front of animate(). Also give your body a height that you can scroll on your else youll never activate it. See my fiddle for the changes

http://jsfiddle.net/uhVj6/220/

Answer 2

call your animate(); in this code

$(document).ready(function () {
    called = false;
    $(window).scroll(function (e) {
        if ($(window).scrollTop() > $("canvas").position().top && !called){
            animate();
            called = true;
        }
    });

});

http://jsfiddle.net/uhVj6/223/