javascript - How to pause and resume a HTML5 animation? -

i using "smoothie charts" http://smoothiecharts.org/.
i'm trying make animation stop , restart, can freeze "viewing" image. animation doesn't stop. seems continue run in background?

once restart it, entire chart jumps actual time.

on "start" need animation resume, paused.
how can achieve this?

i'm new , have been trying figure out week, i'm stuck on problem.

this code 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 original stop...

smoothiechart.prototype.stop = function() { if (this.frame) {   smoothiechart.animatecompatibility.cancelanimationframe(this.frame);     delete this.frame;   } }; 

this start function

 smoothiechart.prototype.start = function() {     if (this.frame) {       // we're running, return       return;     }     // make sure canvas has optimal resolution 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 frame, , queues next frame later rendering     var animate = function() {       this.frame = smoothiechart.animatecompatibility.requestanimationframe(function() {         this.render();         animate();       }.bind(this));     }.bind(this);      animate();    };