javascript - キャンバス 画像を反転して他のものと変更する

Question

このようにキャンバスでフリップ画像を実装しようとしているのですが途中からアニメーションがおかしくなっています

アップデート

1. これは画像の一部であり、最終的な結果は次のとおりです。

から

遷移

に

アニメーションごとに小さなバッファを作成してから、それらを時間間隔に置き換えているため、問題があります

// globals
animations = [];
handler;
// Main canvas, the user see this
context;
canvas;

function flip(x, y, width, height) {        
    // getBuffer returns {cv: canvas, cx, context }
    var buffer = getBuffer(canvas.width, canvas.height),

        // getNextImage return a Image object ready for use
        img = getNextImage(),
        ready = false,
        interval;

    buffer.cx.drawImage(img, x, x);

    newImage = buffer.cx.getImageData(x, y, width, height);

    for (var i = 5; i > 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 you 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);
    }
}