title: Pause, resume and restart Canvas animations with JS
body: <p>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.</p>
  
  <p>I've added a working fiddle here: <a href="http://jsfiddle.net/4txsqeoh/2/" rel="nofollow noreferrer">http://jsfiddle.net/4txsqeoh/2/</a></p>
  
  <p>I would like to make separate functions so can call when needed from the click events etc.</p>
  
  <h2>Update</h2>
  
  <p>I've added calls in the click events and empty functions but not sure where to go from here, I'm new to JS.</p>
  
  <p>JS:</p>
  
  <pre><code>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 &lt; 0) {
              this._animationOffset = 0;
          }
          clear(this.ctx);
          this.drawArc();
          this._animationOffset -= this.speed;
          if (this._animationOffset &lt; 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();
      });
  
  });
  </code></pre>