I want to upload an Img to a HTML-Canvas and want to see it immediately after uploading finished. How can I maintain the proper aspect ratio for the images?

1. Huge images have to be resized to a given canvas size because they shouldn't be allowed to fill the entire viewport.

2. Small images should get a resizing, too, to fill the canvas.

3. Only making use of HTML + CSS + vanilla JS

What I did so far:

var fileUpload = document.getElementById('fileUpload');
var canvas  = document.getElementById("renderCanvas");
var ctx = canvas.getContext("2d");

var img = new Image()

function scaleImage() {
    const windowWidth = window.screen.width
    const windowHeight = window.screen.height

    ctx.canvas.width = window.innerWidth;
    ctx.canvas.height = window.innerHeight;

    var scaledWidth, scaledHeight;
    
    if(img.width > img.height){
        scaledWidth = ctx.canvas.width;
        scaledHeight = (ctx.canvas.width / img.width) * img.height
    }else if(img.width < img.height){
        scaledWidth = (ctx.canvas.height / img.height) * img.width
        scaledHeight = ctx.canvas.height;
    }else{
        scaledWidth = ctx.canvas.width;
        scaledHeight = ctx.canvas.height;
    }
    ctx.drawImage(
        img, 
        (ctx.canvas.width / 2) - (scaledWidth / 2), 
        (ctx.canvas.height / 2) - (scaledHeight / 2), 
        scaledWidth, 
        scaledHeight
    );
};

// readImage ersetzt das Bild
function readImage() {
    if ( this.files && this.files[0] ) {
        var fileReader = new FileReader();
        fileReader.onload = function(e) {
            this.img = img
            this.img.src = e.target.result;
            img.onload = scaleImage
        };       
        fileReader.readAsDataURL( this.files[0] );
    }
}

fileUpload.onchange = readImage;

window.onresize = scaleImage;

I can upload an Img-File and display it. It's not really fitting the canvas size and if I resize my browser window it keeps resizing and getting bigger beyond the borders of my canvas.