​

function setup() {

  createCanvas(400, 400);

  img = loadImage("COMPLEX_MOVEMENTS_06.JPG");

}

​

function draw() {

  background(220);

  // No scaling

  imageMode(CORNER);

  image(img, 0, 0);

  // Image warps because not scaling proportionally

  imageMode(CORNER);

  image(img, 0, 0, width, height);

  // Image scales proportionally

  imageMode(CORNER);

  image(img, 0, 0, width, img.height*width/img.width); // to fit width

  // Placing image on screen and keeping in proportion

  var scale = 0.8;

  imageMode(CENTER);

  image(img, 0.5*width, 0.5*height, scale*width, scale*img.height*width/img.width); // to fit width

}