​

let magDisplaySize = 200;

let magRetrieveSize = 50;

​

function preload() {

  img = loadImage("dog.jpeg");

}

​

function setup() {

  createCanvas(400, 400);

  imageMode(CENTER);

  rectMode(CENTER);

}

​

function draw() {

  background(220);

  image(img, width/2, height/2, width, height);

  magnify(mouseX, mouseY);

}

​

function magnify(x, y) {

  // constrain retrival coordinates

  const rx = constrain(x, magRetrieveSize/2, width - magRetrieveSize/2) - magRetrieveSize/2;

  const ry = constrain(y, magRetrieveSize/2, height - magRetrieveSize/2) - magRetrieveSize/2;

  // retrieve section of image from canvas

  const imgSection = get(rx, ry, magRetrieveSize, magRetrieveSize);

  // constrain display coordinates

  const dx = constrain(x, magDisplaySize/2, width - magDisplaySize/2);

  const dy = constrain(y, magDisplaySize/2, height - magDisplaySize/2);

  // display retrieve image at larger size

  image(imgSection, dx, dy, magDisplaySize, magDisplaySize);

  // put a border around the image

  noFill();

  strokeWeight(3);

  stroke(255);

  rect(dx, dy, magDisplaySize, magDisplaySize);

}

​

function mouseWheel(event) {

  magRetrieveSize += event.delta;

  magRetrieveSize = constrain(magRetrieveSize, 10, magDisplaySize);

}