Canvas: pointer based viewport / contain mouse pointer

There doesn't seem to be a good way to base the <canvas> viewport on the location of the mouse pointer and being able to move around freely. Basically, like every other first-person game on the market.

1. There is no way to capture the mouse inside a <canvas> element.
2. There is no way to se开发者_如何学Got the position of the mouse pointer.
3. It is not possible to go full screen with <canvas>, and even if, once the edge has been reached, functionality will be broken.

For good reasons, too. Imagine what possible scenarios could (and definitely would) be employed by malicious persons.

Perhaps it's too early to be thinking of something that is almost only of any use in a 3D environment, something that there isn't yet a spec for.

What's your take or solution?

You can get the mouse position inside of a canvas.

function getCursorPosition(e) {
    var x;
    var y;
    if (e.pageX != undefined && e.pageY != undefined) {
    x = e.pageX;
    y = e.pageY;
    }
    else {
    x = e.clientX + document.body.scrollLeft +
            document.documentElement.scrollLeft;
    y = e.clientY + document.body.scrollTop +
            document.documentElement.scrollTop;
    }

    x -= gCanvasElement.offsetLeft;
    y -= gCanvasElement.offsetTop;

    var cell = new Cell(Math.floor(y/kPieceHeight),
                    Math.floor(x/kPieceWidth));
    return cell;
}

From Dive Into HTML5: Let's Call it a Draw(ing Surface)

I don't think there is a good solution for this -- at least, not until we get mouse locking. No matter how elegant your solution, if you make a twitchy mouselook driven game, the user is going to twitch outside the canvas area at some point. Even if they don't accidentally click a link, their immersion will be broken when the view stops responding to their mouse.

For slower paced games, you could:

• Use click and drag to turn. Once user starts dragging within the canvas, you use the mouse delta from the point where they started dragging to determine how far to turn. Because the user is holding down the button, they won't accidentally click things.
• Hover cursor near the edges of the canvas to turn, similar to an RTS. This would turn more slowly, but is probably the most intuitive, and easiest for a user to accidentally discover.
• Use the keyboard to look, like pre-mouse FPS games (such as Doom).

It's worth noting that there is an open feature request in Firefox for mouse locking. But, unfortunately, neither this, nor mouse hiding or fullscreen are part of the WebGL spec.

All of these features are supported by Unity, so that may be a path to look at if you really need FPS controls.