キャンバスの一部に描画できません。

Question

キャンバスの下部にある空白行に注意してください。その行に描画できないのは です。

どのようにキャンバス全体を（フル解像度で）描画に使用できますか？

ブラウザ：フルページで54.0.2840.99（公式ビルド）メートル（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>

それを作るためにclear：上記のJavaScriptコードは、キャンバス要素のピクセルサイズとキャンバス要素のピクセルサイズを一致させるためにキャンバスのピクセルサイズを調整します。この質問は、描くことができないキャンバスの領域に関するものです。

Answer 1

デフォルトのキャンバスのスタイルはdisplay:inlineです（いずれかの方法では、display:blockではありません）。結果として、ブラウザはテキストの下にあるように、その下に少量のスペースを追加します。キャンバスのスタイルにdisplay:blockを追加することで、これを解決できるはずです。