Повторная загрузка анимации холста в окне просмотра

Question

Как сделать так, чтобы эта анимация холста загружалась только в окне просмотра? поэтому он по существу перезагружается каждый раз, когда его видят или прокручивают.

Также хотите знать, возможно ли сделать этот прогресс в качестве прокрутки, чтобы линия прогрессировала при прокрутке вниз, но если вы прокрутите назад, линия регрессирует, и она завершается только в середине области просмотра?

var canvas = document.querySelector('canvas')
    ;
var c = canvas.getContext('2d');
c.fillStyle = "white";
c.fillRect(50, 50, 20, 570);
c.fillRect(50, 610, 1000, 20);

// line

c.beginPath();
c.lineCap = "round";
c.lineJoin = "round";
c.moveTo(60, 615);
c.lineTo(250, 500);
c.lineTo(450, 460);
c.lineTo(650, 300);
c.lineTo(850, 250);
c.lineTo(1000, 120);


// define the path to plot

var vertices=[];
vertices.push({x:60,y:615});
vertices.push({x:250,y:500});
vertices.push({x:450,y:460});
vertices.push({x:650,y:300});
vertices.push({x:850,y:250});
vertices.push({x:1000,y:120});

// calc waypoints traveling along vertices

function calcWaypoints(vertices){
    var waypoints=[];
    for(var i=1;i<vertices.length;i++){
        var pt0=vertices[i-1];
        var pt1=vertices[i];
        var dx=pt1.x-pt0.x;
        var dy=pt1.y-pt0.y;
        for(var j=0;j<100;j++){
            var x=pt0.x+dx*j/100;
            var y=pt0.y+dy*j/100;
            waypoints.push({x:x,y:y});
        }
    }
    return(waypoints);
}

// calculate incremental points along the path
var points=calcWaypoints(vertices);

// variable to hold how many frames have elapsed in the animation
// t represents each waypoint along the path and is incremented in the animation loop
var t=1;

// start the animation
animate();

// incrementally draw additional line segments along the path
function animate(){
    if(t<points.length-1){ requestAnimationFrame(animate); }

    // draw a line segment from the last waypoint
    // to the current waypoint

    c.beginPath();
    c.lineJoin = "round";
    c.strokeStyle = "white";
    c.moveTo(points[t-1].x,points[t-1].y);
    c.lineTo(points[t].x,points[t].y);
    c.lineWidth = 20;
    c.stroke();

    // increment "t" to get the next waypoint
    t++;
}

Исправлен первый вопрос, добавив:

// start the animation
var fps = 100;
var endPercent = 100;

// incrementally draw additional line segments along the path

function animate(current){
    // draw a line segment from the last waypoint
    // to the current waypoint
    c.beginPath();
    c.lineJoin = "round";
    c.strokeStyle = "white";
    c.moveTo(points[t-1].x,points[t-1].y);
    c.lineTo(points[t].x,points[t].y);
    c.lineWidth = 20;
    c.stroke();
    // increment "t" to get the next waypoint
    t++;
    setTimeout(function() {
        requestAnimationFrame(animate);
    }, 1000 / fps);
}
var run = false;
// My altered code to the original
   $(window).scroll(function() {
    if (!run && isScrolledIntoView('#myCanvas')) {
        animate();
        run=true;
    }
});

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

Все равно было бы интересно узнать, как я могу заставить его перерисовывать каждый раз, когда он виден, но работает только при первом появлении.