title: HTML5 Canvas image crop, resize, and save without losing quality
body: <p><img src="https://i.stack.imgur.com/A3p9c.png" alt="http://i.stack.imgur.com/A3p9c.png"></p>
  
  <ul>
  <li>I have canvas with width equal to window width.</li>
  <li>I am drawing an image(1920x1080) to canvas.</li>
  <li>Then I selected area to crop image inside canvas which will be 492x369.</li>
  <li>After cropping image I want to scale that  cropped image to 1024x768.</li>
  </ul>
  
  <p>But when I scale that image it loses its quality.. </p>
  
  <p>How can I scale image without losing its quality?</p>
  
  <p>The steps which I performed are</p>
  
  <ol>
  <li>Added Image to Main Canvas</li>
  <li>Selected Crop area on Canvas</li>
  <li>using getImageData() stored croped image data in temp variable.</li>
  <li>created new canvas in memory</li>
  <li>using putImageData() added image data to new in memory canvas</li>
  <li>then getting base64 image data using newcanvas.toDataURL()</li>
  </ol>