Избегайте пробелов при перетаскивании / прокрутке изображения в Canvas

Question

Таким образом, у меня есть изображение (1020x736) внутри холста (700x600), и я пытаюсь прокрутить / перетащить изображение вокруг, чтобы я мог видеть остальную его часть, за исключением того, что я не хочу видеть пустое пространство, когда я достигаю изображения границы, пока я перетаскиваю изображение.

Вот образец моей проблемы

Черные границы указывают границы холста.

Вот мой код до сих пор

var dragging = false;
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var lastX;
var lastY;
var translated = 0;

canvas.onmousedown = function(e){
  var evt = e || event;
  dragging = true;
  lastX = evt.offsetX;
  lastY = evt.offsetY;
}

window.onmousemove = function(e){
  var evt = e || event;
  if(dragging){
    var deltaX = evt.offsetX - lastX;
    var deltaY = evt.offsetY - lastY;
    context.translate(deltaX,deltaY);
    lastX = evt.offsetX;
    lastY = evt.offsetY;
    draw();
  }
}

function draw(){
  var image = document.getElementById('img1');

  context.drawImage(image,0,0);
}

canvas.onmouseup = function(e){
  dragging = false;
}


window.onload = draw;

Answer 1

Рисование в верхнем левом углу, чтобы изображение не уходило далеко в холст

// canvas is the canvas
// img is the image you are drawing;
// posX and posY are the location (top left) that the image has been dragged to 
x = Math.max( -(img.width - canvas.width), Math.min(0, posX));
y = Math.max( -(img.height - canvas.height), Math.min(0, posY));

ctx.drawImage(img, x, y);