HTML5 Canvas fit to window

Question

I'm trying to get my canvas to fit the page, when i do:

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

It goes just over horizontally and vertically which is adding scroll bars. the size its going over is about the size of the scroll bars are being accounted for before they're even there (just a guess) is this whats happening, how would I go about getting it to fit the page with no scrollbars.

Answer 1

Set the the canvas position to absolute. Also make sure there is no padding, or margins set in the containing element.

This is what I use on all of my full screen canvas demos.

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

Full Screen Demo

Answer 2

The canvas by default is set to display: inline-block. Change it to display: block

body {
    margin: 0;
    padding: 0;
}
canvas {
    display: block;
}

Answer 3

This worked for me

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);

Answer 4

I had the same problem, and I solved it by removing the border.