title: Rezize HTML Canvas size after transformed operation
body: <p>I have a webpage that let users upload image via camera and make some drawing on it. So I use <code>html canvas</code> to achieve the free drawing part. The problem is that some images are uploaded with wrong orientation and I therefore have to provide users with a button that let them rotate the image using canvas. </p>
  
  <p>However, after a rotation of image, I do not know how to resize the canvas so that it has the same width and height just as the rotated image. Right now, I have some "blank spaces" which I mark with blue background in my code below after rotation. Please run my code below to better understand what I am trying to say here. </p>
  
  <p>So my question is how to re-resize the canvas width and height after rotation so that it has the same width and height as the rotated image?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;title&gt;Portrait&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;canvas id="myCanvas"&gt;&lt;/canvas&gt;&lt;br/&gt;
   &lt;input type="file"  onchange="fileUpload(this.files)" id="file-input" capture="camera"&gt;&lt;br/&gt;&lt;br/&gt;
   &lt;button onclick="rotate()"&gt;Rotate&lt;/button&gt;
  
   &lt;script&gt;
    var file, canvas, ctx, image, fileURL, rotation = 90;
  
      function fileUpload(files) {
         file = files[0]
         fileURL = URL.createObjectURL(file)
         canvas = document.getElementById('myCanvas')
         canvas.style.backgroundColor = "blue"
         ctx = canvas.getContext('2d')
         image = new Image()
  
         image.onload = function() {
            canvas.width = 500
            canvas.height = (500 * this.height) / this.width
            ctx.drawImage(image, 0, 0, canvas.width, canvas.height)
         }
         image.src = fileURL
      }
  
      function rotate() {
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         ctx.save(); //save canvas state
         ctx.translate(canvas.width / 2, canvas.height / 2);
         ctx.rotate(rotation * Math.PI / 180);
         ctx.translate(-canvas.width / 2, -canvas.height / 2);
         ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
         rotation += 90;
         ctx.restore(); //restore canvas state
      }
   &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>