title: javascript - Why does this canvas image not rotate correctly?
body: <p>Why does this canvas image not rotate correctly?</p>
  
  <p>When I click the rotate button the image rotates but gets cropped weirdly. I want the image to stay intact and simply rotate.</p>
  
  <p>Important: I'm not looking to rotate the div, I'm looking to rotate the actual image. </p>
  
  <p>See fiddle:
  <a href="http://jsfiddle.net/8V4V7/2/" rel="nofollow">http://jsfiddle.net/8V4V7/2/</a></p>
  
  <p>Code:</p>
  
  <pre><code>function rotateBase64Image(base64data, callback) {
     console.log("what we get: " + base64data);
  
      var canvas = document.getElementById("dummyCanvas");
      var ctx = canvas.getContext("2d");
  
      var image = new Image();
      image.src = base64data;
      image.onload = function() {
          ctx.translate(image.width, image.height);
          ctx.rotate(Math.PI);
          ctx.drawImage(image, 0, 0);
          callback(canvas.toDataURL());
      };
  }
  </code></pre>
  
  <p><strong>EDIT:</strong>
  I need the image to rotate by 90 degrees on every click.</p>
  
  <p>I tried the following but it doesn't work:</p>
  
  <pre><code>ctx.rotate(Math.PI/2);
  </code></pre>