title: How to maintain the aspect ratio while scaling the image on HTML5 Canvas?
body: <p>In my project i'm using HTML5 Canvas and FabricJS. I have scenario to maintain the aspect ratio for the image object that i have placed in canvas. while adjusting corners or scaling the image i have to update width or height to maintain the aspect ratio for the image. 
  <img src="https://i.stack.imgur.com/cbnY1.png" alt="problem image"></p>
  
  <p>The above image will clearly show my problem. i need an algorithm or formula to maintain the aspectratio of the image. </p>
  
  <p>The image should meet the following,</p>
  
  <ol>
  <li>if i do shrinking by adjusting the width or height of the image from the actual size it will crop and display the picture in the same aspect ratio.</li>
  <li>if i do expand by adjusting the width or height of the image from the actual size it will expand the image height or width respectively and cropped for the viewport height and width to maintain the aspect ratio.</li>
  <li>the hidden parts are panned and viewed.</li>
  </ol>
  
  <p>please give me some solution, thanks.</p>