HTML5 Panning based on Mouse Movement

Question

I'm trying to implement functionality to "pan" inside a canvas in HTML5 and I am unsure about the best way to go about accomplishing it.

Currently - I am trying to detect where the mouse is on the canvas, and if it is within 10% of an edge, it will move in that direction, as shown:

Current Edge Detection:

canvas.onmousemove = function(e)
{
    var x = e.offsetX;
    var y = e.offsetY;
    var cx = canvas.width;
    var cy = canvas.height;
    if(x <= 0.1*cx && y <= 0.1*cy)
    {
         alert("Upper Left"); 
         //Move "viewport" to up and left (if possible)
    }
    //Additional Checks for location
}

I know I could probably accomplish this by creating paths within the canvas and attaching events to them, but I haven't worked with them much, so I thought I would ask here. Also - if a "wrapping" pan would be possible that would be awesome (panning to the left will eventually get to the right).

Summary: I am wondering what the best route is to accomplish "panning" is within the HTML5 Canvas. This won't be using images but actual drawn objects (if that makes any difference). I'll be glad to answer any questions if I can.

Demo:

Demo

Answer 1

It depends on how you want panning with mouse movement to be implemented, but today it's often 'realtime' panning in that you can drag around. I tried to update your fiddle a little: http://jsfiddle.net/pimvdb/VWn6t/3/.

var isDown = false; // whether mouse is pressed
var startCoords = []; // 'grab' coordinates when pressing mouse
var last = [0, 0]; // previous coordinates of mouse release

canvas.onmousedown = function(e) {
    isDown = true;

    startCoords = [
        e.offsetX - last[0], // set start coordinates
        e.offsetY - last[1]
   ];
};

canvas.onmouseup   = function(e) {
    isDown = false;

    last = [
        e.offsetX - startCoords[0], // set last coordinates
        e.offsetY - startCoords[1]
    ];
};

canvas.onmousemove = function(e)
{
    if(!isDown) return; // don't pan if mouse is not pressed

    var x = e.offsetX;
    var y = e.offsetY;

    // set the canvas' transformation matrix by setting the amount of movement:
    // 1  0  dx
    // 0  1  dy
    // 0  0  1

    ctx.setTransform(1, 0, 0, 1,
                     x - startCoords[0], y - startCoords[1]);

    render(); // render to show changes

}

Answer 2

pimvdb's fiddle shows the concept nicely but doesn't actually work, at least not for me.

Here's a fixed version: http://jsfiddle.net/VWn6t/173/
The meat of it is basically the same.

var startCoords = {x: 0, y: 0};
var last = {x: 0, y: 0};
var isDown = false;

canvas.onmousemove = function (e) {
    if(isDown) {
        ctx.setTransform(1, 0, 0, 1,
                         xVal - startCoords.x,
                         yVal - startCoords.y);
    }
};

canvas.onmousedown = function (e) {
    isDown = true;
    startCoords = {x: e.pageX - this.offsetLeft - last.x,
                   y: e.pageY - this.offsetTop - last.y};
};

canvas.onmouseup   = function (e) {
    isDown = false;
    last = {x: e.pageX - this.offsetLeft - startCoords.x,
            y: e.pageY - this.offsetTop - startCoords.y};
};