Full screen canvas for Chrome?

Question

I'm trying to make a full screen canvas on 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>

This code makes the canvas full screen, but only the height is full screen.

Answer 1

Try using the CSS rule fixed for position with the canvas element:

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

You might need to set html and body with width/height: 100% as well.

If you want to avoid zoom as this will give you, you would need to set the width and height of the canvas element directly (use window.innerHeight and .innerWidth ).

Answer 2

I do full screen canvas this way:

More details can be found here .

 var canvas = document.getElementById("mycanvas"); var ctx = canvas.getContext("2d"); function refreshCanvas() {//refresh size canvas function document.body.style.width = window.innerWidth+'px'; document.body.style.height = window.innerHeight+'px'; canvas.setAttribute('width', window.innerWidth+'px'); canvas.setAttribute('height', window.innerHeight+'px'); } window.addEventListener('resize', refreshCanvas); //refresh when resize window window.addEventListener('load', refreshCanvas); //refresh when load window

 body { margin: 0px; } #mycanvas { background-image: url('https://gmer.io/resource/community/backgroundCanvas.png'); }

 <canvas id="mycanvas"></canvas>