let canvasWidth;

let canvasHeight;

function preload() {

img = loadImage('image/mountain.jpeg');

}

function setup() {

// Calculate canvas size based on the image

canvasWidth = img.width;

canvasHeight = img.height;

const windowRatio = windowWidth / windowHeight;

const imageRatio = img.width / img.height;

if (windowRatio > imageRatio) {

canvasWidth = windowHeight * imageRatio;

canvasHeight = windowHeight;

} else {

canvasWidth = windowWidth;

canvasHeight = windowWidth / imageRatio;

}

createCanvas(canvasWidth, canvasHeight);

// Resize the image to fit the canvas

img.resize(canvasWidth, canvasHeight);

// Invert the image

img.filter(INVERT);

// Posterize the image by 3 levels

img.filter(POSTERIZE, 3);

// Create a save button

let saveButton = createButton('Save');

saveButton.position(10, 10);

saveButton.mousePressed(saveImage);

}

function draw() {

background(255);

image(img, 0, 0);

}

function saveImage() {

saveCanvas('posterized_image', 'jpg');}