Small codes

HTML5, Javascript and AS3

Tutorial: toggle fullscreen HTML5 canvas and other DOM elements

| 9 Comments

Here are some recipes I use to add a fullscreen feature to the HTML5 canvas tag in browsers.
Firstly, I think we have to differentiate two concepts : browser fullscreen and in-browser fullscreen or full window.

Browser fullscreen is activated when the user press the F11 key. The browser windows extends itself across the whole screen, and hide it’s toolbars. you can find on the web some snippets examples allowing to replicate this behavior, but they are neither compatible with all browsers, nor a good practice: the user must be able to choose it’s navigation mode. Otherwise he could encounter problems with regard to accessibility.

In-browser fullscreen is not really a full screen behavior: it’s often called full-window. It forces a DOM element’s size to conform to the browser window’s bounds. This practice is better considered. The user may complete his full screen experience by using the F11 key, if he wants to.

This is the behavior we are going to add to the canvas.

Build the HTML page and its CSS sheet


We are going to build a simple page containing a HTML5 Canvas. This canvas will show an animation created with EaselJS.
I added a wrapper around the H1 title and the canvas: in a web page, the canvas will rarely be put directly under the body of your page.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" >
		<title>Tutorial: Full-window canvas mode with CreateJS</title>

		<script src="http://code.createjs.com/easeljs-0.4.2.min.js" >  </script>
		<script src="http://code.createjs.com/tweenjs-0.2.0.min.js" >  </script>
		<link rel="stylesheet" href="css/style_start.css" >

		<script>
		var canvas,
			wrapper,
			stage,
			shape;
		
		function init(){
			var g;
			canvas = document.getElementById("canvas");
			wrapper = document.getElementById("wrapper");
			
			stage = new Stage(canvas);
			
			g = new Graphics();
			g.setStrokeStyle(1);
			g.beginStroke(Graphics.getRGB(0,0,0));
			g.beginFill(Graphics.getRGB(255,0,0));
			g.drawCircle(0,0,100);
			
			shape = new Shape(g);
			shape.x = 400;
			shape.y = 300;
			stage.addChild(shape);
			
			Ticker.setFPS(32);
			Ticker.addListener(stage);
			
			animate();
		}
		
		function animate(){
			var tween;
			tween = Tween.get(shape)
					.to({x:Math.random()*canvas.width,y:Math.random()*canvas.height},1000,Ease.cubicOut)
					.call(animate);
		}
		
		window.onload = init;
		</script>
	</head>
	 <body>
		 <div id="wrapper" class="wrapperNormal">
			<H1>Tutorial: Full-window canvas mode with CreateJS</H1>
			 <canvas id="canvas" class="canvasNormal" width="800" height="600">
				<p>Your browser is sooooo old! Update or download a modern one now!</p>
			 </canvas>
		 </div>
	</body>
</html>

And here’s the CSS sheet :

body{
	font-family: 'Arial', sans-serif;
	font-size: 0.8em;
}

.canvasNormal{
	position: relative;
	background-color: #000000;
}
.wrapperNormal{
	width: 900px;
	margin: auto;
}

You can see here what the starting page of this tutorial looks like.

Create a fullscreen function

First, we are going to write a full-window function and add a “onclick” manager on the canvas itself. So we’ll just have to click anywhere on the canvas to switch from a ste to another.
To store the actual state of the canvas, we create a boolean variable : fullWindowState.

var canvas,
	wrapper,
	stage,
	shape,
	fullWindowState;

Then we create the fullWindow function, that change the canvas size, and it’s CSS rules. Note that I change the CSS class of the wrapper too, so I avoid some over-size effects, which can make the browser scrollbars to show. We don’t want that.

function fullWindow(e) {
	if (!fullWindowState) {
		fullWindowState = true;
		// Canvas goes full Window
		canvas.className = "canvasFullWindow";
		wrapper.className = "wrapperFullWindow";
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
	} else {
		fullWindowState = false;
		//canvas goes normal
		canvas.width = 800;
		canvas.height = 600;
		canvas.className = "canvasNormal";
		wrapper.className = "wrapperNormal";
	}
}

We add the listener on the canvas element.

<canvas id="canvas" class="canvasNormal" width="800" height="600" onclick="fullWindow(this)" >
	<p>Your browser is sooooo old! Download a modern one now! </p>
</canvas>

Finally, all we have to do is to add these rules in the CSS sheet:

.canvasFullWindow{
	position: absolute;
	background-color: #000000;
	top: 0px;
	left: 0px;
}

.wrapperFullWindow{
}

The empty rule is necessary.

Please note that if we would have added a rule like “width: 100%; height= 100%;” on our canvas, we increase it’s dimensions, but also it’s render size. So we will obtain a pixelate effect. This effect could be Nous obtiendrons donc un effet de pixelisation. This effet could be desired: pixel art is still fashion these days.

You can see here the result
With a click on the canvas, it extends itself properly in the whole window. But if we resize this one, or if we switch to a real fullscreen by pressing the F11 key, we lose the effect. Scrollbars or blank zones appears
To maintain the full-window effect when resizing, we have to listen this event and manage it.

Adding a window.onresize event management

All we have to do is to add a onResizeHandler() function to resize properly the canvas if the browser’s window’s size change…

function onResizeHandler(e){
	if (fullWindowState){
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
	}
}

…then we add the listener for the onresize event on the window object, targeting our callback function.

window.onresize = onResizeHandler;

Here’s the result. The effect works as expected on all newests browsers, including in the case of window resizing, or if the user press the F11 key.

A word about the Fullscreen API


Specifications about the Full-screen API are being discussed by the W3C. Firefox, Chrome and Safari browsers already included them as an experiment. But as the specs are not finished, it’s too soon to use it.
Here’s a good tutorial (in french…).

Conclusion


We added a flexible in-browser fullscreen feature, with ease, that will work on any recent browser.
We can resize the browser window, toggle the browser itself in fullscreen mode with the F11 key and our element will gracefully adapt it’s size.
It works for a canvas, blso with any HTML element with a block type.

9 Comments

  1. I’m currently making an HTML5 game and this was a pretty smart solution to making it fullscreen. Thanks.

  2. Pingback: 30 Must-See HTML5 Tutorials to Help You Impress Your Audience | Developer Junk

  3. Pingback: 30 Must-See HTML5 Tutorials to Help You Impress Your Audience | Web Dezining

  4. Pingback: 30 Must-See HTML5 Tutorials to Help You Impress Your Audience

  5. Pingback: 30 Tutoriais HTML5 para ajudar você a impressionar o seu público | Site para Empresas – Blog sobre Internet e Criação de Site

  6. Bonjour,
    merci pour ces tutoriels très utiles,
    mais je code tout à partir de scripts externes en AS3,
    et je ne parviens pas à les implémenter à l’aide de CreateJS.
    Sauriez-vous quelle est la manipulation, s’il y en a une ?
    Bonne journée
    Max

  7. Pingback: Roundup: 50 Top Notch HTML5 Tutorials | Design Superstars

  8. Pingback: 30 Must-See HTML5 учебники, чтобы помочь вам впечатлить аудиторию | Allbloggg.ru - блог о всем. Только свежие новости со всего мира всех тем. Веб-дизайн, ди

  9. Pingback: Best HTML5 Tutorials to Help You Impress Your Audience | HueDesigner

Leave a Reply

Required fields are marked *.


Social Widgets powered by AB-WebLog.com.