анимация переворота монеты с прямоугольником HTML-холста

Question

Я новичок в HTML Canvas и пытаюсь анимировать простой квадрат, чтобы выполнить X количество «подбрасываний» монет, как анимация подбрасывания монет здесь .Мне трудно понять, как манипулировать своим квадратом для создания анимации такого типа.Вот что у меня так далеко.Может кто-нибудь показать мне, как пометить "перевернуть" прямоугольник, как это?Спасибо.

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()