How to pause and resume a HTML5 animation?

Question

I am using "smoothie charts" http://smoothiecharts.org/.
I'm trying to make the animation stop and restart, but all I can do is freeze the "viewing" image. The animation doesn't really stop. It seems to continue to run in the background?

Once I restart it, the entire chart jumps to actual time.

On "start" I need that animation to resume, from where it was paused.
How can I achieve this?

I'm new with to this and have been trying to figure it out for a week, but i'm stuck on this problem.

This is the code for animation:

 SmoothieChart.AnimateCompatibility = (function() {
    var requestAnimationFrame = function(callback, element) {
          var requestAnimationFrame =
            window.requestAnimationFrame        ||
            window.webkitRequestAnimationFrame  ||
            window.mozRequestAnimationFrame     ||
            window.oRequestAnimationFrame       ||
            window.msRequestAnimationFrame      ||
            function(callback) {
              return window.setTimeout(function() {
                callback(new Date().getTime());
              }, 16);
            };
          return requestAnimationFrame.call(window, callback, element);
        },
        cancelAnimationFrame = function(id) {
          var cancelAnimationFrame =
            window.cancelAnimationFrame ||
            function(id) {
              clearTimeout(id);
            };
          return cancelAnimationFrame.call(window, id);
        };

    return {
      requestAnimationFrame: requestAnimationFrame,
      cancelAnimationFrame: cancelAnimationFrame
    };
  })();

And here is the original stop...

SmoothieChart.prototype.stop = function() {
if (this.frame) {
  SmoothieChart.AnimateCompatibility.cancelAnimationFrame(this.frame);
    delete this.frame;
  }
};

This is the start function

 SmoothieChart.prototype.start = function() {
    if (this.frame) {
      // We're already running, so just return
      return;
    }
    // Make sure the canvas has the optimal resolution for the device's pixel ratio.
    if (this.options.enableDpiScaling && window && window.devicePixelRatio !== 1) {
      var canvasWidth = this.canvas.getAttribute('width');
      var canvasHeight = this.canvas.getAttribute('height');

      this.canvas.setAttribute('width', canvasWidth * window.devicePixelRatio);
      this.canvas.setAttribute('height', canvasHeight * window.devicePixelRatio);
      this.canvas.style.width = canvasWidth + 'px';
      this.canvas.style.height = canvasHeight + 'px';
      this.canvas.getContext('2d').scale(window.devicePixelRatio, window.devicePixelRatio);
    }

    // Renders a frame, and queues the next frame for later rendering
    var animate = function() {
      this.frame = SmoothieChart.AnimateCompatibility.requestAnimationFrame(function() {
        this.render();
        animate();
      }.bind(this));
    }.bind(this);

    animate();

  };