How would I animate the process of a transformed canvas image going back into its original state?

Question

I am at a transform of (1, 0, 0, -0.7, 0.4, 320, 70) and I want to gradually end up at (1, 0, 0, 1, 0, 0), how do I do this?

This is the code that transforms the image

Answer 1

I used some of your code and added an animation loop. You could use setTimeout in place of requestAnimationFrame. setTimeout(animationLoop, milliseconds);

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");

    var i = 0;
    function animationLoop() {
      
      if (i > height / 2) {
        alert('done!');
        return;
      }
      
      //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(image2,
        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(image3,
        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(image4,
        0, height2 / 2 + i, width2, 2,
        0, height2 / 2 + i, width2, 2);
      
      i++;
      requestAnimationFrame(animationLoop);
    }
    animationLoop();

  };
  
  var can = document.createElement('canvas');
  var w = can.width=300;
  var h = can.height=300;
  var ctx = can.getContext('2d');
  
  ctx.fillStyle="red";
  ctx.fillRect(0,0,w,h);
  image.src = can.toDataURL("image/png");//"bottom.png";
  
  ctx.fillStyle="blue";
  ctx.fillRect(0,0,w,h);
  image2.src = can.toDataURL("image/png");//"top.png";
  
  ctx.fillStyle="green";
  ctx.fillRect(0,0,w,h);
  image3.src = can.toDataURL("image/png");//"bottom.png";
  
  ctx.fillStyle="black";
  ctx.fillRect(0,0,w,h);
  image4.src = can.toDataURL("image/png");//"top.png";
});