0

An Introduction to the HTML5 Pointer Lock and FullScreen APIs

Posted in Javascript

Preface: These APIs are still quite new and subject to change. As of the time of writing, the following tutorial works in Chrome 18.0.1025.168. Firefox 12 supports full screen but not mouse lock.

I’ve been having a little play with some HTML5 features and worked up an example of Pointer Lock and Full Screen APIs. As it stands at the moment, pointer lock is tightly coupled with full screen, so you won’t be able to use it without first loading up full screen mode.

You’ll need to enable Enable Pointer Lock in about:flags in Chrome then restart the browser for mouse lock to work.

You may request full screen mode like so:

1
2
3
4
5
6
element.requestFullScreen =
	element.requestFullScreen    ||
	element.mozRequestFullScreen ||
	element.webkitRequestFullScreen;
 
element.requestFullScreen(element.ALLOW_KEYBOARD_INPUT);

Once in full screen mode, pointer lock should become available:

1
2
3
4
5
6
7
8
9
navigator.pointer = navigator.pointer || navigator.webkitPointer;
navigator.pointer.lock(element,
	function() {
		console.log('Pointer lock');
	},
	function() {
		console.log('No pointer lock');
	}
);

Note in the above two scripts, element is a DOM element

Check out the working demo here. I’ve also added some JS to determine the direction the locked pointer is travelling and output the data to the screen. View page source for details.