Example problem and solution for P5.js image quality issues arising from multiple calls to resize.

P5ResizeProblem.js

var exImg;

function preload() {
  exImg = loadImage("COMPUTER/FAKE.png");
}

function setup() {
  exImg.resize((windowHeight/exImg.height) * exImg.width, windowHeight);
}

function draw() {
  image(exImg, windowWidth/2 - exImg.width/2, windowHeight/2);
}

function windowResized() {
  exImg.resize((windowHeight/exImg.height) * exImg.width, windowHeight);
  resizeCanvas(windowWidth, windowHeight);
}

P5ResizeSolution.js

var exImg;

function preload() {
  exImg = loadImage("COMPUTER/FAKE.png");
}

function setup() {
  
}

function draw() {
  image(exImg, (windowWidth/2) - (((windowHeight/exImg.height) * exImg.width)/2), 0, (windowHeight/exImg.height) * exImg.width, windowHeight);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

awesome! thanks.

I think there is a better way. In the Forum it was said that this is bad for performance, because it will make the image resize for display every frame. Here is an optimized version:

var moon,       //image 
    moonCopy,        //resized image of the image (visible)
    imageRatio;     //ratio of the image h/w    

function preload() {
    moon=loadImage("assets/moonwalk.jpg", img => moonCopy = img.get());
}

function setup()   {
    createCanvas(windowWidth, windowHeight);
    imageRatio = moon.height/moon.width;
    print("imageRatio: "+imageRatio);
}

function draw() {
    background(255);
    image(moonCopy,0,0);
}

function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
  	print("resizing to: "+windowWidth+" "+windowHeight);
    if (windowWidth < moon.width){
        moonCopy = moon.get();
        moonCopy.resize(windowWidth,0);
    }
}