带HTML画布矩形的硬币翻转动画

Question

我是HTML Canvas的新手，正在尝试制作一个简单的正方形动画，以执行X次硬币“翻转”，如硬币翻转动画here。我很难理解如何操纵我的正方形来制作这种类型的动画。到目前为止，这就是我所拥有的。谁能告诉我如何铸造像这样的矩形？谢谢。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = 'red'
ctx.fillRect(0, 0, 20, 20);

var percent = 0
var totalFlips = 10
var flips = 0
function animate() {
  if (percent++ < 100) {
    flips += 1
    requestAnimationFrame(animate);
  }
  var width = 20 * percent / 100
  ctx.fillRect(percent, 0, width, 20);
}

animate()