title: Change Image() object dimensions (width and height)
body: <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>