Я нахожусь в преобразовании (1, 0, 0, -0,7, 0,4, 320, 70), и я хочу постепенно в конечном итоге в (1, 0, 0, 1, 0, 0), как мне это сделать?

Это код, который преобразует изображения:

 document.addEventListener("DOMContentLoaded", function(event) {
        image = new Image();
        image2 = new Image();
        image3 = new Image();
        image4 = new Image();
        window.onload = function() {
            //first image
            var width = image.width,
            height = image.height;
            canvas1 = document.getElementById("num1Canvas");
            bottomSlice = canvas1.getContext("2d");
            //second image
            var width2 = image2.width,
            height2 = image2.height;
            canvas2 = document.getElementById("num2Canvas");
            topSlice = canvas2.getContext("2d");
            //third image
            newCanvas1 = document.getElementById("newNum1Canvas");
            newBottomSlice = newCanvas1.getContext("2d");
            //fourth image
            newCanvas2 = document.getElementById("newNum2Canvas");
            newTopSlice = newCanvas2.getContext("2d");

            for (var i = 0; i <= height / 2; ++i) {
                //first image transform
                bottomSlice.setTransform(1, 0, -0.7, .4, 320, 70);
                bottomSlice.drawImage(image,
                    0, height / 2 - i, width, 2,
                    0, height / 2 - i, width, 2);
                bottomSlice.setTransform(1, 0, -0.7, 0.4, 320, 70);
                bottomSlice.drawImage(image,
                    0, height / 2 + i, width, 2,
                    0, height / 2 + i, width, 2);
                //second image transform 
                topSlice.setTransform(1, 0, -0.7, .4, 320, 0.2);
                topSlice.drawImage(image2,
                    0, height2 / 2 - i, width2, 2,
                    0, height2 / 2 - i, width2, 2);
                topSlice.setTransform(1, 0, -0.7, 0.4, 320, 0.2);
                topSlice.drawImage(image2,
                    0, height2 / 2 + i, width2, 2,
                    0, height2 / 2 + i, width2, 2);
            }

        };
        image.src = "bottom.png";
        image2.src = "top.png";
        image3.src = "bottom.png";//
        image4.src ="top.png";
    });

И я в основном хочу, чтобы что-то подобное произошло:

  function b(){
      bottomSlice.clearRect(0, 0, canvas1.width, canvas1.height+60);
      bottomSlice.setTransform(1, 0, -0.6, 0.3, 200, 40);
      bottomSlice.drawImage(image, 0, 0);

      bottomSlice.clearRect(0, 0, canvas1.width, canvas1.height+60);
      bottomSlice.setTransform(1, 0, -0.4, 0.6, 150, 30);
      bottomSlice.drawImage(image, 0, 0);

      bottomSlice.clearRect(0, 0, canvas1.width, canvas1.height+60);
      bottomSlice.setTransform(1, 0, -0.1, 0.8, 100, 20);
      bottomSlice.drawImage(image, 0, 0);

      bottomSlice.clearRect(0, 0, canvas1.width, canvas1.height+60);
      bottomSlice.setTransform(1, 0, 0, 1, 0, 0);
      bottomSlice.drawImage(image, 0, 0);
    }

Однако приведенный выше код не работает и жестко запрограммирован, а это не то, чего я хочу. Я думал о том, чтобы как-то использовать setTimeout для этого, но я не уверен, как мне это сделать.