MENU


Pointer Lock

A pointer lock is different from a mouse capture in the following ways:
  1. A pointer lock does not release the mouse until an explicit API call is made or the user uses a specific release gesture.
  2. It is not limited by browser or screen boundaries.
  3. It continues to send events regardless of the mouse button state.
  4. It hides the cursor.
The mouse pointer disappears as the yellow square is clicked, reappearing at the same spot on a double click.
RESETRUNFULL
<!DOCTYPE html><html><body>
<canvas width="100" height="100" style="background:yellow"
        onclick="canvas.requestPointerLock()"
        ondblclick="document.exitPointerLock()"></canvas>
<script>
   document.addEventListener('pointerlockchange', () =>{
      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);
      }
   });
   var canvas = document.querySelector("canvas");
   function updatePosition(e){
      console.log(e.movementX, e.movementY); // eg. 10 10
      // not limited by boundaries
      // restarts from zero as the mouse stops
   }
</script></body></html>