奇怪的空间/画布边距

Question

var canvas = document.getElementById('canvas')
canvas.width = 200
canvas.height = 200

.container {
  width: 200px;
  height: 200px;
  background-color: green;
  overflow: scroll;
}

#canvas {
  background-color: red;
}

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

容器的高度为200px，画布的高度为200，并且容器仍可垂直滚动一点。我该怎么办？多余的空间来自哪里？

请注意，我不想将溢出设置为隐藏，我希望将其设置为滚动，我希望画布填充容器而不显示滚动条。

更容易了解jsfiddle上正在发生的事情：https://jsfiddle.net/hp8gtudw/6/