javascript - Achieve somewhat stable framerate with requestAnimationFrame? -

i playing around requestanimationframe jerky animations in other browser chrome.

i create object this:

var object = function() {      var lastrender = (new date()).gettime();     var delta = 0;      return {          update: function() {              //do updates using delta value in calculations.         },          loop: function() {             var looptimestamp = (new date()).gettime();             delta = looptimestamp - lastrender;             lastrender = looptimestamp;              this.update();              window.requestanimationframe(this.loop.bind(this));         }     }; } 

right drawing single rectangle on canvas element , moving around. lightweight operation on processor. running pretty smoothly in chrome, , when console log delta value, consistant around ~17. however, if same in firefox or safari following delta values:

17-3-17-2-32-34-32-31-19-31-17-3-0-14-3-14-35-31-16-3-17-2 ... , on 

it looks if browser not syncing display nicely, , in other cases chrome, 1 smoother animations using old settimeout method 16ms target timeout.

does know, if possible smoother animations using requestanimationframe in browsers other chrome? has succeded in getting more stable delta values ones posted above in firefox?

reason smooth framerate of animation decreases because of memory of browser regards canvas. don't know real details of performance in browsers firefox has framerate drop , in chrome drop occurs time later.

the real problem of framerate drop because of memory occupied canvas element. each time draw canvas operation saved path of canvas. path occupies more memory each time draw on canvas. if don't empty path of canvas have framerate drops. canvas path can't emptied clearing canvas context.clearrect(x, y, w, h);, instead have reset canvas path beginning new path context.beginpath();. example:

// function draws content or animation function draw(){     // start new path/empty canvas path     canvas.beginpath();       // actual drawing of content or animation here  }