Full Screen Canvas

HTML

<div>The canvas is the gray background color you see here. It will resize when you resize the browser, making it always fullscreen.</div>

<canvas id="canvas"></canvas>

CSS

* { margin:0; padding:0; } /* to remove the top and left whitespace */

html, body { width:100%; height:100%; } /* just to be sure these are full screen*/

canvas { display:block; } /* To remove the scrollbars */


/* to show the canvas bounds */
canvas {
    background: #eee;
}

div {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 200px;
}

JavaScript

var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');
function resize() {
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	render();
}
window.addEventListener('resize', resize, false); resize();
function render() { // draw to screen here
}