如何制作大小调整的矩形动画？

Question

我想用js（vanilla）和html5做一个调整大小的画布矩形动画，但是我不知道该怎么办，该矩形具有图像背景（我不知道这是否会改变代码）。我想做这个动画，因为我想模拟卡片翻转，但是网上没有代码示例或其他东西。

我要做的就是这个：

let canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),



       x1  = 0,
        x2  = 30,
        x3  = 60,
        x4  = 90,
        x5  = 120,
        x6  = 150,
        x7  = 180,
        x8  = 210,
        x9  = 240,
        x10 = 270,
        x11 = 300,
        x12 = 330,
        x13 = 360,
        x14 = 390,
        x15 = 420,
        x16 = 450,
        x17 = 480,
        x18 = 510,
        x19 = 540,
        x20 = 570,
        x21 = 600,
        x22 = 630,
        y   =  20,

        last = performance.now();

    function draw(timestamp) {
      requestAnimationFrame(draw);
      let img = new Image();
      img.onload = function() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.beginPath();
        ctx.save();ctx.drawImage(img, x1, y);ctx.clip();ctx.restore();
      ctx.save();ctx.drawImage(img, x2, y);ctx.clip();ctx.restore();
      ctx.save();ctx.drawImage(img, x3, y);ctx.clip();ctx.restore();
      ctx.save();ctx.drawImage(img, x4, y);ctx.clip();ctx.restore();
      ctx.save();ctx.drawImage(img, x5, y);ctx.clip();ctx.restore();
      ctx.save();ctx.drawImage(img, x6, y);ctx.clip();ctx.restore();
      ctx.save();ctx.drawImage(img, x7, y);ctx.clip();ctx.restore();
      ctx.save();ctx.drawImage(img, x8, y);ctx.clip();ctx.restore();
      ctx.save();ctx.drawImage(img, x9, y);ctx.clip();ctx.restore();
      ctx.save();ctx.drawImage(img, x10, y);ctx.clip();ctx.restore();
      ctx.save();ctx.drawImage(img, x11, y);ctx.clip();ctx.restore();
      ctx.save();ctx.drawImage(img, x12, y);ctx.clip();ctx.restore();
      ctx.save();ctx.drawImage(img, x13, y);ctx.clip();ctx.restore();
      ctx.save();ctx.drawImage(img, x14, y);ctx.clip();ctx.restore();
      ctx.save();ctx.drawImage(img, x15, y);ctx.clip();ctx.restore();
      ctx.save();ctx.drawImage(img, x16, y);ctx.clip();ctx.restore();
      ctx.save();ctx.drawImage(img, x17, y);ctx.clip();ctx.restore();
      ctx.save();ctx.drawImage(img, x18, y);ctx.clip();ctx.restore();
      ctx.save();ctx.drawImage(img, x19, y);ctx.clip();ctx.restore();
      ctx.save();ctx.drawImage(img, x20, y);ctx.clip();ctx.restore();
      ctx.save();ctx.drawImage(img, x21, y);ctx.clip();ctx.restore();
      ctx.save();ctx.drawImage(img, x22, y);ctx.clip();ctx.restore();
      img.src = 'image.png';
      }

如果您知道我该怎么做，请向我解释，thx <3