html - HTML5 キャンバスをウィンドウに合わせる

Question

私がそうするとき、私は自分のキャンバスをページに合わせようとしています:

ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;

スクロールバーを追加して、水平方向と垂直方向に移動します。オーバーするサイズは、スクロールバーが存在する前に考慮されているサイズです（推測です）、これは何が起こっているのですか、スクロールバーなしでページに合わせるにはどうすればよいですか.

Answer 1

キャンバスの位置を に設定しabsoluteます。また、含まれている要素にパディングやマージンが設定されていないことを確認してください。

これは、私が全画面キャンバス デモのすべてで使用しているものです。

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
canvas {
    position:absolute;
}

全画面デモ

Answer 2

これは私のために働いた

function resize() {

    var canvas = document.getElementById('game');
    var canvasRatio = canvas.height / canvas.width;
    var windowRatio = window.innerHeight / window.innerWidth;
    var width;
    var height;

    if (windowRatio < canvasRatio) {
        height = window.innerHeight;
        width = height / canvasRatio;
    } else {
        width = window.innerWidth;
        height = width * canvasRatio;
    }

    canvas.style.width = width + 'px';
    canvas.style.height = height + 'px';
};

window.addEventListener('resize', resize, false);