How to stop or pause this program?

Question

I try to use clearTimeout, but failed, can anyone show me how to stop or pause this animation? Below is my javascript code:

window.requestAnimFrame = (function(callback) {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
    function(callback) {
      window.setTimeout(callback, 1000 / 60);
    };
})();

function drawRectangle(myRectangle, context) {
    context.beginPath();
    context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
    context.fillStyle = 'green';
    context.fill();
    context.lineWidth = myRectangle.borderWidth;
    context.strokeStyle = 'black';
    context.stroke();
}

function myFunction() {
   var m = document.getElementById("myRange").value;
   document.getElementById("demo").innerHTML = m;
}

function animate(myRectangle, canvas, context, startTime) {

    var time = (new Date()).getTime() - startTime;
    var m = document.getElementById("myRange").value;
    myRectangle.y = 380 - m * Math.cos(time * Math.PI / 2000);
    context.clearRect(0, 0, canvas.width, canvas.height); 
    drawRectangle(myRectangle, context);

   requestAnimFrame(function() {
      animate(myRectangle, canvas, context, startTime);
    });
}

var myRectangle = {
    x: 150,
    y: 150,
    width: 50,
    height: 50,
    borderWidth: 4
};

drawRectangle(myRectangle, context);

setTimeout(function() {
    var startTime = (new Date()).getTime();
    animate(myRectangle, canvas, context, startTime);
}, 0);

Answer 1

Your callback should stop calling requestAnimationFrame

var stop = false;
function stopAnimation() {
    stop = true;
}

function animate(myRectangle, canvas, context, startTime) {

    // ...

    if (stop) {
        stop = false;
    }
    else {
        requestAnimFrame(function() {
            animate(myRectangle, canvas, context, startTime);
        });
    }
}