Pause, Resume And Restart Canvas Animations With JS

Is there anyway to pause, resume and restart my canvas arc animation progress bar? I've added the click functions in place but no idea where to start in order to achieve what I'm a

Solution 1:

just add this two functions :

   this.stop = function(){
            clearInterval(this._interval);
    }

    this.resume = function(){
         var self = this;
         clearInterval(self._interval);
         this._interval = setInterval(function () {
            self.drawAnimation();
        }, 10);
    }

and set the click actions like this

 $(document).on('click', '#pause-progress', function (e) {
        // pause progress
        anim.stop();
    });

    $(document).on('click', '#resume-progress', function (e) {
        // resume progress
          anim.resume();
    });

    $(document).on('click', '#restart-progress', function (e) {
        // restart progress
       anim.stop();
       anim = new PercentAnimation(ctx, percentage);
       anim.startAnimation();
    });

Solution 2:

add this function

    this.setLineStylesCircle = function () {
        ctx.strokeStyle = '#001251'; //set the collor here
        ctx.lineWidth = 10;
        ctx.lineCap = 'round';
    };

and change drawArc to this :

this.drawArc = function () {

        var startDegrees = -90;
        var endDegrees = startDegrees + this.degrees - this._animationOffset;
        // Degrees to radians
        var startAngle = startDegrees / 180 * Math.PI;
        var endAngle = endDegrees / 180 * Math.PI;
        //Draw circle
        this.setLineStylesCircle();
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, 7, false);
        ctx.stroke();        
        // Draw arc
        this.setLineStyles();
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, startAngle, endAngle, false);
        ctx.stroke();
    };