css - Chrome の全画面キャンバス?

Question

Google Chrome で全画面キャンバスを作ろうとしています。

<style>
#canvas:-webkit-full-screen {
    height:100%;
    width: 100%;
}    
</style>
<button onclick="fullScreen()">Full Screen</button>
<canvas id="canvas"></canvas>
<script>
    function fullScreen() {
        var c = document.getElementById("canvas");
        c.webkitRequestFullScreen();
    }
</script>

このコードはキャンバスを全画面表示にしますが、高さだけが全画面表示になります。

Answer 1

canvas 要素でCSS ルールfixedを使用してみてください。position

position:fixed;
left:0;
top:0;
width:100%;
height:100%;

width/height: 100% も設定する必要がある場合がありhtmlます。body

ズームを回避したい場合は、canvas 要素の幅と高さを直接設定する必要があります (window.innerHeightと を使用.innerWidth)。