Making a photo scanner with transforming picture

[lin.liangchen]

Hi everyone,

I am new here.
I am trying to program a code which is making a photo scanner, to scan the photo pixels with mouse moving.
However, I change the photo size by ratio to make smaller, but the scanner only upload the part of the photo (looks like only upper part)
Could anyone tell me how could I do ?^^

var s = 300;
var center;
var img;
var draw_position_x = 0;

function preload() {
  img = loadImage("holland.jpg");
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  imageMode(CENTER);
  img.loadPixels();
  background(0);
  stroke(255,255,0);
  strokeWeight(2);
  center = width/2;
}

function draw() {
  background(0);
  var mx = constrain(mouseX,center-s/2,center+s/2);
  var aspect = img.height / img.width;
  var imageWidth = s;
  var imageHeight = imageWidth*aspect;  
  
  var x = map(mx,center-s/2,center+s/2,s,0);
  x = floor(x);
  
  // noprotect
  for(var y = 0; y<imageHeight; y++) {
    var c = img.get(x,y);
    set(draw_position_x,y,c);
  }
updatePixels();
  
  
  //show the pic downside
  image(img, mx, height-imageHeight/2, imageWidth, imageHeight);
  line(width/2, height-imageHeight, width/2, height);
  
  //connetct
  line(draw_position_x,imageHeight,width/2,height-imageHeight);
  
  //looop
  draw_position_x++;
  if(draw_position_x >= width) {
  draw_position_x=0;
  }
}

It supposed to look like this.