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 = newPercentAnimation(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 radiansvar startAngle = startDegrees / 180 * Math.PI;
        var endAngle = endDegrees / 180 * Math.PI;
        //Draw circlethis.setLineStylesCircle();
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, 7, false);
        ctx.stroke();        
        // Draw arcthis.setLineStyles();
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, startAngle, endAngle, false);
        ctx.stroke();
    };