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