Take the 2-minute tour ×

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 set 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?

share|improve this question

2 Answers 2

up vote 0 down vote accepted

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.

share|improve this answer

You can get the mouse position inside of a canvas.

function getCursorPosition(e) {
    var x;
    var y;
    x = e.pageX;
    y = e.pageY;
    else {
    x = e.clientX + document.body.scrollLeft +
    y = e.clientY + document.body.scrollTop +

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

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

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

share|improve this answer
Yes, obviously. But this isn't what I'm looking for. I'm exploring the possibility of being continually and indefinitely scroll the viewport in either direction. Once, however, you move the mouse outside of the canvas you lose this ability. –  Andre Backlund Mar 13 '11 at 14:24
@abloodywar Wouldn't you be shifting what you draw on the canvas, not scrolling the browser viewport? –  alex Mar 13 '11 at 14:29

Your Answer


