HTML5 Canvas fit to window

canvas, html, size

Solution

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

Problem

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.

Original source