Make canvas fill the whole page

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

maybe that easy?


Well I have it working here: Are Google's Bouncing Balls HTML5? by using the following CSS:

* { margin: 0; padding: 0;}

body, html { height:100%; }

#c {
    position:absolute;
    width:100%;
    height:100%;
}

Where #c is the id of the canvas element.


you can use these codes without jquery

var dimension = [document.documentElement.clientWidth, document.documentElement.clientHeight];
var c = document.getElementById("canvas");
c.width = dimension[0];
c.height = dimension[1];

This has something to do with <canvas> tag.

when create fullscreen canvas, <canvas> will cause scrollbar if not set to display:block.

detail: http://browser.colla.me/show/canvas_cannot_have_exact_size_to_fullscreen