使画布可滚动显示的尺寸大于窗口尺寸

Question

当前，我使用此代码创建一些矩形：

$(document).ready(() => {
  const canvas = $('#canvas')[0];
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  const ctx = canvas.getContext('2d');

  for (let i = 0; i < 3; i++) {
    const rectWidth = 100;
    const horizontalPos = rectWidth * i + 20 * i;
    ctx.strokeRect(horizontalPos, 20, rectWidth, 50);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas"></canvas>

当循环运行的频率更高（例如50次）时，由于窗口的宽度不够大，因此无法看到右侧的矩形。

如果元素不适合当前窗口大小，如何使画布可滚动？