Pause, resume and restart Canvas animations with JS

Question

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

I've added a working fiddle here: http://jsfiddle.net/4txsqeoh/2/

I would like to make separate functions so can call when needed from the click events etc.

Update

I've added calls in the click events and empty functions but not sure where to go from here, I'm new to JS.

JS:

function init() {
    var c = document.getElementById('draw');
    return c.getContext('2d');
}

function clear(ctx) {
    ctx.clearRect(0, 0, 200, 200);
}

function PercentProgress(ctx, percent) {
    this.ctx = ctx;
    this.speed = 4;
    this.x = 100;
    this.y = 100;
    this.radius = 50;

    this.setPercent = function (percent) {
        this.degrees = 360 * (percent / 100);
        this._animationOffset = this.degrees;
        this.percent = percent;
    };

    // Part of initialization
    this.setPercent(percent);

    this.startProgress = function () {
        var self = this;
        clear(this.ctx);
        this._interval = setInterval(function () {
            self.drawProgress();
        }, 10);
    };

    this.pauseProgress = function () {

    };

    this.resumeProgress = function () {

    };

    this.restartProgress = function () {

    };

    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 arc
        this.setLineStyles();
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, startAngle, endAngle, false);
        ctx.stroke();
    };

    this.setLineStyles = function () {
        ctx.strokeStyle = '#FF1251';
        ctx.lineWidth = 10;
        ctx.lineCap = 'round';
    };

    this.drawProgress = function () {
        if (this._animationOffset < 0) {
            this._animationOffset = 0;
        }
        clear(this.ctx);
        this.drawArc();
        this._animationOffset -= this.speed;
        if (this._animationOffset < 0) {
            clearInterval(this._interval);
        }
    };

}

$(document).ready(function () {

    // lets start the progress
    var ctx = init();
    var percentage = 100;
    var progress = new PercentProgress(ctx, percentage);
    //progress.startProgress();

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

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

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

});

Answer 1

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();
    };

Answer 2

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();
    });