无法在画布的一部分上绘制

Question

请注意画布底部的空白行。它的 不可能在那条线上画画。

如何使用整个画布进行绘制（全分辨率）？

浏览器：54.0.2840.99（官方构建）m（32位）/ Windows 7

在整页中运行：

var el = document.getElementsByTagName("canvas")[0];
var ctx = el.getContext("2d");
el.width = el.clientWidth;
el.height = el.clientHeight;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(el.width, el.height);
ctx.lineTo(0, el.height);
ctx.fill();
ctx.closePath();

html {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 667.19px; /* = `80vh` in viewport of 834 px height */
}
.bar {
  flex: auto;
  background: black;
  height: 20px;
}
#display {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}
canvas {
  position: absolute;
  width: 100%;
  height: 100%;
}

 <div class="bar"></div>
 <div id="display">
   <canvas></canvas>
 </div>
 <div class="bar"></div>

要说清楚：上面的JavaScript代码会调整画布的像素尺寸，使其与canvas元素的像素尺寸相匹配。这个问题是关于画布的一个区域，不能用于它。

Answer 1

画布的默认样式是display:block（或者某种东西;无论哪种方式，它都不是display:block）。因此，浏览器会在其下方添加少量空间，就像在文本下方一样。您应该可以通过将{{1}}添加到画布的样式来解决此问题。