Change Image() object dimensions (width and height)
<p>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 <code>Image()</code> object). I'm probably missing something very obvious. Below is what I am trying to achieve:</p>

<pre><code>var img = new window.Image();
img.src = imageDataUrl;
img.onload = function(){
    if (img.width &gt; 200){
        img.width = 200;
        img.height = (img.height*img.width)/img.width;
    }
    if (img.height &gt; 200){
        img.height = 200;
        img.width = (img.width*img.height)/img.height;
    }
};
</code></pre>

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

<p><strong>Edit:</strong> I haven't correctly solved the image <a href="http://www.purplemath.com/modules/ratio4.htm" rel="nofollow">proportions</a> using cross-multiplication. @markE provides a neat method of obtaining the correct ratio. Below is my new (working) implementation:</p>

<pre><code>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);
</code></pre>