title: Resize image and rotate canvas 90 degrees
body: <p>There's quite a few topics here about rotating images with canvas on js. I read most of them, and couldn't figure out a solution for my problem.</p>
  
  <p>I'm receiving an image (from an upload component) of whatever resolution. I'm resizing it to 1024x768 like:</p>
  
  <pre><code>var canvas = document.createElement('canvas');
  var ctx = canvas.getContext("2d");
  
  if (img.width &gt;= img.height) {
      canvas.width = 1024;
      canvas.height = 768;
  } else {
      canvas.width = 768;
      canvas.height = 1024;
  }
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);   
  </code></pre>
  
  <p>It works fine.</p>
  
  <p>But on Safari/iOs, when I take a picture and upload, the image has ALWAYS a higher width value than height, so the code above doesn't work.</p>
  
  <p>So I decided to use exif-js to detect the image's orientation. When the Orientation attribute is higher than 4, I need to rotate the image 90 degrees, and swap height and width values.</p>
  
  <p>I tried to rotate the image like this:</p>
  
  <pre><code>canvas.width = 768; // swapping values
  canvas.height = 1024;                                       
  
  ctx.translate(canvas.width/2, canvas.height/2);  // translate to center
  ctx.rotate(Math.PI/2); // rotate 90 degrees
  
  ctx.drawImage(img, -img.width/2,-img.height/2); // not sure of the dx and dy values here... 
  </code></pre>
  
  <p>The image is rotated. But it has taken just a small portion of the original image to display on the canvas, so it feels "zoomed in"... it seems that I'm using the wrong values on the drawImage method, but not sure how to fix.</p>
  
  <p>How can I fix this rotation with fixed height and width values?</p>