resize-observer-pixi/how-to-keep-ratio.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>How to keep 1:1 aspect ratio for the child canvas element?</title>
    <link type="text/css" rel="stylesheet" href="src/main.css" />
  </head>
  <body>
    <div class="flexRoot">
      <div class="status">Game #1 Score1:Score2</div>
      <div class="parent" id="parent">
        <canvas id="child"></canvas>
      </div>
      <div class="hint">A game hint to do this and that...</div>
    </div>
    <script>
      const parentElement = document.getElementById("parent");
      const childElement = document.getElementById("child");

      const resizeObserver = new ResizeObserver((entries) => {
        for (let entry of entries) {
          const { width, height } = entry.contentRect;
          const minDimension = Math.min(width, height);
          const maxDimension = Math.max(width, height);

          const diff = Math.floor((maxDimension - minDimension) / 2);
          const paddingLeft = width > height ? diff : 0;
          const paddingTop = width < height ? diff : 0;

          childElement.style.width = `${minDimension}px`;
          childElement.style.height = `${minDimension}px`;
          childElement.style.transform = `translate(${paddingLeft}px, ${paddingTop}px)`;

          console.log(
            `parent ${width} x ${height} -> child ${childElement.style.width} x ${childElement.style.height} @ ${childElement.style.transform}`
          );
        }
      });

      resizeObserver.observe(parentElement);
    </script>
  </body>
</html>