title: Having some problems rotating an image inside a canvas
body: <p>The problem:
  When i rotate my added image, the image does not center as i would like it to. I keep getting a white area above my picture inside the canvas.</p>
  
  <p>Try with a 16:9 ratio image, and you'll see my problem after a rotate. This will be used for mobile, so the width of the picture could be max 640.</p>
  
  <p><a href="http://jsfiddle.net/dRLwb/2/" rel="nofollow">Here is a fiddle</a>
  Current code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="files"&gt;
      &lt;input type="file" id="imageLoader" name="imageLoader" /&gt;
  &lt;/div&gt;
  &lt;canvas id="imageCanvas"&gt;&lt;/canvas&gt;
  &lt;canvas id="preview"&gt;&lt;/canvas&gt;
          &lt;input type="button" id="saveButton" value="Save" /&gt;
  &lt;div id="rotate"&gt;
          &lt;button type="button" id="rotateLeft"&gt;Rotate -90°&lt;/button&gt;
          &lt;button type="button" id="rotateRight"&gt;Rotate 90°&lt;/button&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code> var imageLoader = document.getElementById('imageLoader');
      imageLoader.addEventListener('change', handleImage, false);
      var image = "";
      var canvas = document.getElementById('imageCanvas');
      var ctx = canvas.getContext("2d");
      var fileName = "";
      var angleInDegrees = 0;
      function handleImage(e) {
          var reader = new FileReader();
          reader.onload = function(event) {
              var img = new Image();
              img.onload = function() {
                  canvas.width = img.width;
                  canvas.height = img.height;
                  ctx.drawImage(img, 0,0);
                  fileName = img.name;
                  image = img;
              };
              img.src = event.target.result;
          };
          reader.readAsDataURL(e.target.files[0]);
      }
  
      function drawRotated(degrees) {
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          ctx.save();
          ctx.translate(canvas.width / 2, canvas.height / 2);
          ctx.rotate(degrees * Math.PI / 180);
          ctx.drawImage(image, -image.width / 2, -image.width / 2);
          ctx.restore();
      }
  
      $("#rotateRight").click(function () {
          angleInDegrees += 90;
          drawRotated(angleInDegrees);
      });
  
      $("#rotateLeft").click(function () {
          angleInDegrees -= 90;
          drawRotated(angleInDegrees);
      });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/dJ5BH" rel="nofollow">jsfiddle.net/dJ5BH</a> </p>
  
  <p>Here is my new fiddle :) What if i want it to be max 640 width?</p>