Estoy tratando de implementar la funcionalidad para "desplazar" dentro de un lienzo en HTML5 y no estoy seguro de cuál es la mejor manera de lograrlo.

Actualmente: estoy tratando de detectar dónde está el mouse en el lienzo, y si está dentro del 10% de un borde, se moverá en esa dirección, como se muestra:

Detección de borde actual:

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
}

Sé que probablemente podría lograr esto creando caminos dentro del lienzo y adjuntándoles eventos, pero no he trabajado mucho con ellos, así que pensé en preguntar aquí. Además, si fuera posible una bandeja de "envoltura" sería increíble (el desplazamiento hacia la izquierda eventualmente llegará a la derecha).

Resumen Me pregunto cuál es la mejor ruta para lograr la "panorámica" dentro del lienzo HTML5. Esto no usará imágenes sino objetos dibujados reales (si eso hace alguna diferencia). Estaré encantado de responder cualquier pregunta si puedo.

Manifestación

Manifestació