Установите коллизию нарисованного прямоугольника в элементе canvas, который следует за мышью

Question

Я работаю над программным обеспечением камеры, почти все в нем работает, но когда мышь отключается от экрана, она также делает снимки вне пространства.Мне нужен способ сделать окно захвата остановленным на границах холста.

Я слышал об использовании math.min / max для создания границ, но я не могу понять, как это на самом деле работает.

obligatory code tag because no one-part of my code would make any sense to refrence here.
Math.max([value1[, value2[, ...]]])
Math.min([value1[, value2[, ...]]])

https://jsfiddle.net/fzv80a5e/

Answer 1

Вам нужна простая проверка, где находится текущая позиция (X / Y) на блоке и каковы минимальные / максимальные размеры холста, а затем просто принудительно задайте позицию блока на минимальной или максимальной величине, если она собирается превысить либо.
https://jsfiddle.net/0dfs9ynk/

function update() {
  context.clearRect(0, 0, canvas.width, canvas.height); //clear previously drawn rectangles
  context.strokeStyle = '#f00'; //set stroke color
  context.lineWidth = 2;
  if(mouseX <= 0){
    mouseX = 0;
  }
  if(mouseY <= 0){
    mouseY = 0;
  }
  if(mouseX + selectionX >= canvas.width){
    mouseX = canvas.width - selectionX;
  }
  if(mouseY + selectionY >= canvas.height){
    mouseY = canvas.width - selectionY;
  }
  context.strokeRect(mouseX, mouseY, selectionX, selectionY); //set selection size

  requestAnimationFrame(update);
}