title: Crop an image displayed in a Canvas
body: <p>I have a canvas tag:</p>
  
  <pre><code>&lt;canvas width="321" height="240" id="img_source"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>I want to add a crop functionality, so I made a resizeable div that can identify the borders of cropped image through dragging the corners of the div using the mouse. It looks like the image below:</p>
  
  <p><img src="https://i.stack.imgur.com/6dDEg.jpg" alt="enter image description here"></p>
  
  <p><img src="https://i.stack.imgur.com/Fx6vu.jpg" alt="enter image description here"></p>
  
  <p>I'm currently using "toDataURL()" to convert the data from the canvass to an image that can be displayed by an <code>&lt;img&gt;</code> tag. My question is, How will I convert to an image only part of the canvas that was identified by the resizeable div?</p>