title: Image rotate - resize canvas based on image height and width
body: <p>I want to rotate image but resize the canvas based on image's width and height. please see my code in <a href="https://jsfiddle.net/6ZsCz/1123/" rel="nofollow noreferrer">JSFiddle</a>. I am actually rotating an image based on canvas but my canvas has fixed height and width so the image is just rotating inside. all i want something like this. Please check my attached screenshot. green border is a canvas so if i rotate 90 degree then canvas should expand the height and show the entire image.</p>
  <p>Can you please help?</p>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;canvas id=&quot;canvas&quot; &gt;&lt;/canvas&gt;&lt;br&gt;
  &lt;button id=&quot;clockwise&quot;&gt;Rotate right&lt;/button&gt;
  </code></pre>
  <p><strong>JavaScript</strong></p>
  <pre><code>var canvas=document.getElementById(&quot;canvas&quot;);
  var ctx=canvas.getContext(&quot;2d&quot;);
  var degrees=0;
  var image=document.createElement(&quot;img&quot;);
  image.onload=function(){
      ctx.drawImage(image,0,0,image.width,image.height);
  }
  image.src=&quot;http://www.ajaxblender.com/article-sources/images/plane-1.jpg&quot;;
  $(&quot;#clockwise&quot;).click(function(){
     degrees+=90
     ctx.clearRect(0,0,canvas.width,canvas.height);
     ctx.save();
     ctx.translate(image.width/2,image.height/2);
     ctx.rotate(degrees*Math.PI/180);
     ctx.drawImage(image,0,0,image.width,image.height,-image.width/2,-image.height   /2,image.width,image.height);
     ctx.restore();
  });
  </code></pre>
  <p><img src="https://i.stack.imgur.com/67ZwR.jpg" alt="enter image description here" /></p>