аюсь реализовать функциональность для "панорамирования" внутри холста в HTML5, и я не уверен, как лучше всего это сделать.

В настоящее время - я пытаюсь определить, где находится мышь на холсте, и если она находится в пределах 10% от края, она будет двигаться в этом направлении, как показано:

Текущее обнаружение края:

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
}

Я знаю, что, вероятно, мог бы добиться этого, создавая пути в пределах холста и прикрепляя к ним события, но я не очень много с ними работал, поэтому подумал, что задам вопрос здесь. Кроме того - если бы была возможна "оберточная" кастрюля, это было бы здорово(панорамирование влево в конечном итоге дойдет до правой).

Резюме: Мне интересно, как лучше всего выполнить «панорамирование» в пределах HTML5 Canvas. Это будет не использование изображений, а фактические нарисованные объекты (если это имеет какое-либо значение). Я буду рад ответить на любые вопросы, если смогу.

Демо-версия:

демонстрация