HTML and CSS Reference
In-Depth Information
Table I.8. The Pointer Lock API
Property/event name
Type
Description
requestPointerLock()
Method
Ask for the pointer to be locked.
If the pointer is locked, this property will be set to the element
that requested it.
pointerLockElement
Read-only element
pointerlockchange
Event
The pointer lock status has changed.
pointerlockerror
Event
There was an error requesting pointer lock.
The Pointer Lock API has experimental implementations in Chrome (with the
--
enable-pointer-lock
command-line switch) and Firefox.
Pointer Lock API
18
14
N/A
N/A
N/A
To experiment with the Pointer Lock API, you're going to need a world to explore. Al-
though ideally you'd create your own 3D world, that would take quite some time (please
refer to
chapter 9
if you'd like to give it a go). In the meantime, you can fake a world with
a panoramic photograph. A suitable large image is included in the code download. The fol-
lowing listing shows where you can add the image.
Listing I.32. Add a background image to canvas
<canvas id
=
"canvas"
onclick
=
"go()"
>
<img src
=
"panorama.jpg"
id
=
"panorama"
>
</canvas>
You'll take this image and add it as a background to the
<canvas>
element. Because the
image is 9073 pixels wide, it should stretch across more than a single screen on all but the
largest of displays.
Figure I.18
shows the initial screen in Firefox 14.
