Ilmari Heikkinen [X](https://twitter.com/ilmarihei) [Homepage](http://fhtr.org/)

<br />

> [!NOTE]
> **Note:** As of Chrome 130 (September 2024), requesting a keyboard or pointer lock requires permission. See the article [The Keyboard Lock and the Pointer Lock APIs require permission from Chrome 130](https://developer.chrome.com/blog/keyboard-lock-pointer-lock-permission.md.txt) for more details.

The [Pointer Lock API](https://w3c.github.io/pointerlock/) recently landed in Chrome Canary and the Dev channel, all rejoice! Wait, what? You haven't heard of the Pointer Lock API? Well, in a nutshell, the Pointer Lock API makes it possible to write proper first-person shooters for the web.

The Chrome implementation lets a full-screen webpage ask your permission to capture the mouse pointer so that you can't move it outside the page. This lets web developers write 3D games and applications without having to worry about the mouse cursor moving outside of the page. When the pointer is locked, the pointer move events have `movementX` and `movementY` attributes defined that tell how much the mouse moved since the last move event. As usual with bleeding edge APIs, these attributes are vendor-prefixed, so you need to use `webkitMovementX` and suchlike.

To enable the Pointer Lock API in current Chrome builds, the easiest way is to go to `about:flags` and turn on the "Enable Pointer Lock"-flag. You can also turn it on by starting Chrome using the `--enable-pointer-lock` command line flag.

There are already a couple cool demos out taking advantage of this feature. Check out the [Quake 3 WebGL demo](http://media.tojicode.com/q3bsp/) by Brandon Jones to see how Pointer Lock API makes WebGL FPS games a viable prospect. Another cool demo is the [Webgl Street Viewer](https://www.clicktorelease.com/code/street/)

To get started with the Pointer Lock API, here's a small snippet cribbed from MDN:

```html
<button onclick="document.body.webkitRequestFullScreen();">No, you lock it up!</button>
<script>
navigator.pointer = navigator.pointer || navigator.webkitPointer;

var onError = function() {
    console.log("Mouse lock was not successful.");
};

document.addEventListener('webkitfullscreenchange', function(e) {
    if (document.webkitIsFullScreen) {
    navigator.pointer.lock(document.body, function() {
        // Locked and ready to play.
    }, onError);
    }
}, false);

document.body.addEventListener('webkitpointerlocklost', function(e) {
    console.log('Pointer lock lost!');
}, false);

document.body.addEventListener('mousemove', function(e) {
    if (navigator.pointer.isLocked) { // got a locked pointer
    var movementX = e.movementX || e.webkitMovementX;
    var movementY = e.movementY || e.webkitMovementY;
    }
}, false);
</script>
```

## Related links

- [MDN documentation](https://developer.mozilla.org/docs/Web/API/Pointer_Lock_API)
- [W3C Specification](https://w3c.github.io/pointerlock/)