Animation is not very smooth when making a image slide effect using HTML canvas -

i want make image slide effect using html5 canvas. able "slide" image translating canvas , redrawing image. however, during slide process, canvas cleared , left of image redrawn causes flickering along left side if image. here demo link: http://codepen.io/make2514/pen/rlqwbz. below script canvas:

var img = new image(); var imgloaded = false; img.src = "http://in5d.com/wp-content/uploads/2014/11/shmntymetm.jpg" img.onload = function(){     imgloaded = true; };  var canvas = document.queryselector('canvas');  function play() {      push(canvas, img, function () {         console.log('done');     }); }  function push (canvas, canvasin) {     var ctx = canvas.getcontext('2d');       ctx.clearrect(0, 0, canvas.width, canvas.height);     if (imgloaded) {       ctx.translate(5, 0);     }     ctx.drawimage(img, 0, 0, canvas.width, canvas.height);      window.requestanimationframe(function () {         push(canvas, img);     }); } 

i try reduce x-axis canvas translation smaller value flickering still there.

i appreciate suggestion!

you had lot of small bugs in code. defined src property of image before onload event, won't ensure fired. push function run forever, should end image off-screen, presumably. made no use of callback passing push play. added callback argument , executed when push executes final time. had canvas , canvasin argument, weren't necessary. hadn't used canvasin, went referring img instead. therefore, removed arguments. added xoff variable keep track of state of canvas know when animation finished.

var img = new image(); var imgloaded = false; img.onload = function () {     imgloaded = true; }; img.src = "http://in5d.com/wp-content/uploads/2014/11/shmntymetm.jpg"; var canvas = document.queryselector("canvas"); var xoff = 0;  function play() {     push(function () {         console.log("done");     }); }  function push (callback) {     var ctx = canvas.getcontext("2d");     ctx.clearrect(0, 0, canvas.width, canvas.height);     ctx.translate(5, 0);     if (xoff < img.width) {         if(imgloaded) {             ctx.drawimage(img, 0, 0, canvas.width, canvas.height);         }         xoff+=5;         window.requestanimationframe(function () {             push(callback);         });     } else {         callback();     } }