HTML5 canvas full-screen and full-page

Submitted by hemanth on Tue, 07/03/2012 - 11:33

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 form the page
var canvas = document.getElementById("canvas");
 
/* Rresize the canvas to occupy the full page, 
   by getting the widow 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 form 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 screen will be very useful for games indeed! But this is best /me can do with graphics!

Share this