CODEWITHSUNDEEP
htmlcanvassize
Larry
Larry

Reputation: 1239

HTML5 Canvas fit to window

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.

Upvotes: 11

Views: 13270

Answers (4)

Zoette
Zoette

Reputation: 1291

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

Upvotes: 0

Lonelydatum
Lonelydatum

Reputation: 1236

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

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

Upvotes: 2

Petr
Petr

Reputation: 1429

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

Upvotes: 1

Loktar
Loktar

Reputation: 35319

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

Upvotes: 16

Related Questions