HTML5 canvas gets really complex for left brain oriented organisms!

This post tries to explain how to make a canvas element to occupy an entire page and also how to go full screen with canvas.

Even though the focus is mainly on full screen and full page canvas, the sample code demonstrates simple ways to create and color canvas.

Let’s see some code, without dry theory!

Code to make canvas occupy full page:

// Get the canvas element from the page
var canvas = document.getElementById("canvas");

/* Resize the canvas to occupy the full page, 
   by getting the window width and height and setting it to canvas */
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// Done! Enjoy full page canvas!

Code to make canvas element to occupy full-screen:

// Get the canvas element from the page
var canvas = document.querySelector('canvas');

function fullscreen() {
    var el = document.getElementById('canvas');

    if (el.webkitRequestFullScreen) {
        el.webkitRequestFullScreen();
    } else {
        el.mozRequestFullScreen();
    }
}

canvas.addEventListener("click", fullscreen);

Check out the demos!

• Full page canvas
• Full screen canvas

Full screen will be very useful for games indeed! But this is the best I can do with graphics!