JavaScript设置时画布大小错误

Question

通过Javascript在canvas内设置div的大小时，我总是以错误的布局结束。当我用canvas替换内部div时，不会发生这种情况。

在下面的案例中

<div style="width: 100%; height: 100%;">
  <canvas class="inner"></canvas>
</div>

使用以下JS代码

canvas.style.width = `${element.clientWidth}px`;
canvas.style.height = `${element.clientHeight}px`;

内部canvas强制外部div显示滚动条。使用div替换画布时不是这种情况。

这是example on JSFiddle。它最终没有预期的滚动条。 And here is the exact same thing div而不是canvas按预期显示没有滚动条。