javascript - canvas Flip image and change with other -

i'm trying implement flip image canvas, animation weird middle

update

1. this part of image, final result is

from

transition

to

but having trouble, creating small buffer each animation , replaced them time interval

// globals animations = []; handler; // main canvas, user see context; canvas;  function flip(x, y, width, height) {             // getbuffer returns {cv: canvas, cx, context }     var buffer = getbuffer(canvas.width, canvas.height),          // getnextimage return image object ready use         img = getnextimage(),         ready = false,         interval;      buffer.cx.drawimage(img, x, x);      newimage = buffer.cx.getimagedata(x, y, width, height);      (var = 5; > 0; i--) {         smallbuff = getbuffer(width, height);         scale = -(1/i);         smallbuff.cx.translate(width / 2, 0);         smallbuff.cx.scale(scale, 1);         smallbuff.cx.putimagedata(newimage, x, y);          animations.push(smallbuff);         ready = (1 === i);     };      interval = setinterval(function() {         console.log("are ready: ", ready);         if (ready) {             clearinterval(interval);              handler = setinterval(function() {                 animation(x, y, width, height);             }, 200);         }     }, 100); }  function animation(x, y, width, height) {     if(animations.length > 0) {         var anim = animations.pop();         anim.cx.fillstyle = '#000';         anim.cx.clearrect(x, y, width, height);         context.drawimage(anim.cv, x, y);         console.log("left:", animations.length);     } else {         clearinterval(handler);     } }