revision:
The exitPointerLock() method asynchronously releases a pointer lock previously requested through Element.requestPointerLock. To track the success or failure of the request, it is necessary to listen for the "pointerlockchange" and "pointerlockerror" events.
exitPointerLock()
Parameters: none
This demo demonstrates usage of the pointer lock API. Click on the canvas area and your mouse will directly control the ball inside the canvas, not your mouse pointer. You can press escape to return to the standard expected state.
<div>
<div class="information">
<h4>Pointer lock demo</h4>
<p>This demo demonstrates usage of the pointer lock API. Click on the canvas area and your mouse
will directly control the ball inside the canvas, not your mouse pointer. You can press escape
to return to the standard expected state.</p>
</div>
<canvas width="640" height="360">
Your browser does not support HTML5 canvas
</canvas>
<div id="tracker"></div>
</div>
<style>
canvas {display: block; margin: 0 auto; border: 0.1vw solid black;}
.information { width: 40vw; margin: 0 auto 3vw;}
#tracker { position: absolute; top: 0; right: 1vw; background-color: white; }
h4 {font-size: 100%;}
</style>
<script>
// helper function
const RADIUS = 20;
function degToRad(degrees) {
const result = (Math.PI / 180) * degrees;
return result;
}
// setup of the canvas
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
let x = 50;
let y = 50;
function canvasDraw() {
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#f00";
ctx.beginPath();
ctx.arc(x, y, RADIUS, 0, degToRad(360), true);
ctx.fill();
}
canvasDraw();
canvas.addEventListener("click", async () => {
if(!document.pointerLockElement) {
await canvas.requestPointerLock({
unadjustedMovement: true,
});
}
});
// pointer lock event listeners
document.addEventListener("pointerlockchange", lockChangeAlert, false);
function lockChangeAlert() {
if (document.pointerLockElement === canvas) {
console.log("The pointer lock status is now locked");
document.addEventListener("mousemove", updatePosition, false);
} else {
console.log("The pointer lock status is now unlocked");
document.removeEventListener("mousemove", updatePosition, false);
}
}
const tracker = document.getElementById("tracker");
let animation;
function updatePosition(e) {
x += e.movementX;
y += e.movementY;
if (x > canvas.width + RADIUS) {
x = -RADIUS;
}
if (y > canvas.height + RADIUS) {
y = -RADIUS;
}
if (x < -RADIUS) {
x = canvas.width + RADIUS;
}
if (y < -RADIUS) {
y = canvas.height + RADIUS;
}
tracker.textContent = `X position: ${x}, Y position: ${y}`;
if (!animation) {
animation = requestAnimationFrame(function () {
animation = null;
canvasDraw();
});
}
}
</script>
example: