title: Rotate canvas 90 degrees clockwise and update width height
body: <p>Say we have a canvas:</p>
  
  <pre><code>&lt;canvas id="one" width="100" height="200"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>And on a button click the canvas gets rotated 90 degrees clockwise (around the center) and the dimensions of the canvas get also updated, so in a sense it looks like this afterwards:</p>
  
  <pre><code>&lt;canvas id="one" width="200" height="100"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>Note that the id of the canvas is the same.</p>
  
  <p>Imagine simply rotating an image clockwise without it being cropped or being padded.</p>
  
  <p>Any suggestions before I do it the long way of creating a new canvas and rotating and copying pixel by pixel?</p>
  
  <p><strong>UPDATE</strong> sample code with suggestion from comments still not working:</p>
  
  <pre><code>function imageRotatecw90(){
  
      var canvas = document.getElementById("one");
      var context = canvas.getContext("2d");
  
      var cw=canvas.width;
      var ch=canvas.height;
  
      var myImageData = context.getImageData(0,0, cw,ch);
  
      context.save();
  
      context.translate(cw / 2, ch / 2);
      context.rotate(Math.PI/2);
  
      context.putImageData(myImageData, 0, 0);
  
      context.restore();
  
      canvas.width=ch;
      canvas.height=cw;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/ziqbal/wmyUS/1/" rel="nofollow">FiddleJS</a></p>