title: Rotate image by 90 degrees on HTML5 Canvas
body: <p>I am having trouble rotating an image using an HTML5 canvas. I suppose that I just have the math wrong, and would appreciate any help in getting this right.</p>
  
  <p>On a mobile device I am capturing a user signature on a 150px by 558px canvas. I am than attempting to create a 558px by 150px image that is just the captured signature rotated 90 degrees. Below is a snippet of the code I've currently come up with. As you can likely surmise, I do not have a good grip on the math going into this. I believe I have the procedure correct, just not the numbers.</p>
  
  <p>What I'm trying to do is:
  1) set the center of the canvas to the middle, offsetting by the height and width of my image
  2) rotate the canvas by 90 degrees 
  3) draw the image 
  4) translate the canvas back.</p>
  
  <p><strong>EDIT: Here's a JSFiddle: <a href="http://jsfiddle.net/x9FyK/" rel="noreferrer">http://jsfiddle.net/x9FyK/</a></strong></p>
  
  <pre><code>    var $signature = $("#signature");
      var signatureData = $signature.jSignature("getData");
  
      console.log(signatureData);
  
      var img= new Image();
      img.onload = function() {
          var rotationCanvas = document.createElement('canvas');
          rotationCanvas.width = img.height;
          rotationCanvas.height = img.width;
  
          var context = rotationCanvas.getContext("2d");
          context.translate((rotationCanvas.width/2) - (img.width/2), -(rotationCanvas.height/2) - img.height/4);
  
          context.rotate(Math.PI/2);
          context.drawImage(img,0,0);
          context.translate(-((rotationCanvas.width/2) - (img.width/2)), -(-(rotationCanvas.height/2) - img.height/4));
          var rotatedData = rotationCanvas.toDataURL();
  
          ...Handling rotated data here
  
      };
      img.src = signatureData;
  </code></pre>
  
  <p>If I can provide any more information, please let me know.</p>
  
  <p>Thanks in advance for your help,</p>