ボディを塗りつぶすキャンバスのサイズがウィンドウにスクロールバーを追加しています

キャンバス要素の幅/高さを、それが入っているコンテナを塗りつぶすように設定しようとしています。現在は機能しますが、ボディを塗りつぶすとき、追加されました。ボディを塗りつぶすキャンバスのサイズがウィンドウにスクロールバーを追加しています

let masterCanvas = document.querySelector('canvas'); 
let parent = masterCanvas.parentElement; 
masterCanvas.width = parent.offsetWidth; 
masterCanvas.height = parent.offsetHeight;

私は次のスタイルを持っている：

<style> 
    body, html { padding: 0; margin: 0; width: 100vw; height: 100vh; } 
    * { box-sizing: border-box; } 
</style>

そして次体：ここで

<body> 
    <canvas></canvas> 
</body>

はこれを示してフィドルです：https://jsfiddle.net/ynkcfsud/

出典

2017-02-23 Get Off My Lawn

canvas要素は、のように振る舞いますイメージであるため、インライン要素です。キャンバスにdisplay: blockを適用する必要があります。

出典

2017-02-23 18:20:33

PS：これをキャッチするには時間がかかりました:) –

それでした！そのようなことが原因だろうとは知らなかった。ありがとう！ –

ボディを塗りつぶすキャンバスのサイズがウィンドウにスクロールバーを追加しています

答えて

関連する問題