I am attempting to resize an image's dimensions, whilst retaining it's aspect ratio. This seems like a very simple task, but I cannot find a rellevent answer anywhere.. (relating to JavaScript's Image() object). I'm probably missing something very obvious. Below is what I am trying to achieve:

var img = new window.Image();

img.src = imageDataUrl;

img.onload = function(){

    if (img.width > 200){

        img.width = 200;

        img.height = (img.height*img.width)/img.width;

    }

    if (img.height > 200){

        img.height = 200;

        img.width = (img.width*img.height)/img.height;

    }

};

This is to proportionally resize an image before being drawn onto a canvas like so: context.drawImage(img,0,0,canvas.width,canvas.height);.However it would appear I cannot directly change Image()dimensions, so how is it done? Thanks.

Edit: I haven't correctly solved the image proportions using cross-multiplication. @markE provides a neat method of obtaining the correct ratio. Below is my new (working) implementation:

var scale = Math.min((200/img.width),(200/img.height));

img.width = img.width*scale;

img.height = img.height*scale;

clearCanvas(); //clear canvas

context.drawImage(img,0,0,img.width,img.height);