javascript - CSS パースペクティブ: 台形をコンテナー境界内に合わせる

Question

<canvas>CSS を使用してフルページ要素を 45 度の視点に配置するこのスニペットがあります。ただし、変換されたキャンバスはページの境界を超えており、クリップされています。

window.onload = window.onresize = function() {
  // draw a gradient on the canvas
  var canvas = document.querySelector('canvas');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  var ctx = canvas.getContext('2d');
  var grad = ctx.createLinearGradient(0, 0, 0, canvas.height);
  grad.addColorStop(0, '#ff0000');
  grad.addColorStop(0.5, '#ffff00');
  grad.addColorStop(1, '#00ff00');
  ctx.fillStyle = grad;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
};

body {
  margin: 0;
  overflow: hidden;
}

canvas {
  transform-style: preserve-3d;
  transform: rotateX(45deg);
}

.container {
  width: 100%;
  height: 100%;
  perspective: 50vw;
  perspective-origin: 50% 0%;
}

<div class="container">
  <canvas></canvas>
</div>

遠近効果を維持しながら、キャンバス全体がページの境界内に留まるようにするにはどうすればよいですか (台形の下側はページとまったく同じ幅にする必要があります)。どのページ サイズでも動作する限り、CSS または JavaScript ソリューションは問題ありません。