title: Canvas - How to rotate vertical/horizontal image correctly?
body: <p>I've looked at many of the rotate canvas/scaling canvas resolved issues, but the solutions didn't really solve this issue, so still unsure how to get it to work correctly with canvas.</p>
  
  <p>There is a vertical fixed dimensions rectangle 100w × 150h, shown as the red border below. When an image (vertical/horizontal/square) is added, and rotated, it should rotate and be scaled correctly within the vertical fixed dimensions rectangle, as shown in the example below.</p>
  
  <p>In the first example, we'll go with a <strong>vertical</strong> image (Eiffel tower original image at 240w × 400h), this is what it should look like at all four rotation angles:<a href="https://i.stack.imgur.com/UqPxC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UqPxC.png" alt="enter image description here"></a></p>
  
  <p>In the second example, we'll go with a <strong>horizontal</strong> image (Dog original image at 1280w × 720h), this is what it should look like at all four rotation angles:</p>
  
  <p><a href="https://i.stack.imgur.com/dp7PW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dp7PW.png" alt="enter image description here"></a></p>
  
  <p>What would be the most efficient way to accomplish this using canvas? </p>
  
  <p>(I know css can be used <code>transform: rotate(90deg)</code>and play around with the background size/position properties, but I'm trying to learn how to accomplish the example above using canvas for vertical/horizontal/square images).</p>
  
  <p><a href="http://jsfiddle.net/6ZsCz/6266/" rel="nofollow noreferrer">Here is a fiddle.</a></p>