title: Cropping images with html5 canvas in a non-rectangular shape and transforming
body: <p>I am new to html5 canvas but I am creating a html5 canvas based image cropper which includes next features.</p>
  
  <ul>
  <li>It should crop image in a polygon shape, but doesn't have to be a rectangular.</li>
  <li>After cropping the image, it should transform the image into rectangular shape.</li>
  </ul>
  
  <p>I tried to search any image croppers that satisfies these features, but couldn't find any.</p>
  
  <p>I think I can manage to make the resize handlers and cropping stuff, but I have no idea of transformming the cropped image. 
  Are there any nice examples or libraries to do this?</p>
  
  <hr>
  
  <p>I am adding images to make things clear.
  when you crop the first image, the result should be the second image. </p>
  
  <p><img src="https://i.stack.imgur.com/AaTtD.png" alt="selecting cropping area">
  <img src="https://i.stack.imgur.com/OxX5b.png" alt="enter image description here"></p>
  
  <hr>
  
  <p><strong>ADDED!</strong></p>
  
  <p>I thought @markE 's solution would work, but after implementing and testing some images, I found out that it won't work very well with non-parallelograms. </p>
  
  <p><img src="https://i.stack.imgur.com/x8wjj.jpg" alt="sample 1 - original">
  <img src="https://i.stack.imgur.com/bHimA.png" alt="sample 1 - cropped"></p>
  
  <p><img src="https://i.stack.imgur.com/B2vYQ.jpg" alt="sample 2 - original">
  <img src="https://i.stack.imgur.com/ZPFYN.png" alt="sample 2 - cropped"></p>
  
  <p>As you can see, since this approach splits the rectangle into two triangles, the warped angles and amount? ends up different for both triangles. Thus, cropped images are shown distorted.
  I am figuring other ways to solve it.</p>