Preserve original quality of image on canvas
<p>I am using <code>fabric.js</code>. I am uploading multiple image in canvas. After uploading the image. Then canvas is converting into image by <code>toDataURL()</code>. I want to paste this converted image on a T-Shirt having size of <code>2000x2000</code>. But this image is of small size and when I try to increase its size it is getting blurred due to stretching</p>

<p>I need image of same size what user has uploaded, instead of a scaled up version from a scaled down image. E.g, if user uploaded an image of size <code>1500x1500</code> then from canvas I need image of size <code>2000x2500</code> only instead of <code>400x400</code>.</p>

<p>I have seen 99Thsirts.com website but I don't have any idea how to handle passport size image. </p>

<p><a href="https://i.stack.imgur.com/ognfg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ognfg.png" alt="enter image description here"></a></p>

<p>I want only clean Uploaded customize image (not blurred) because I'm implementing customize T-shirt.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var canvas = new fabric.Canvas('canvas');
document.getElementById('file').addEventListener("change", function (e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  reader.onload = function (f) {  
    var data = f.target.result;  
    var img = document.createElement('img');
    img.src = data;
    img.onload = function () {
      if (img.width &lt; 1000 || img.height &lt; 1000)
      {
        alert("upload image should be greater then 1000px*1000px");
        canvas.getActiveObject().remove();
      }
    };

    fabric.Image.fromURL(data, function (img) {
      var oImg = img.set({left: 50, top: 100,width:100, height:100, angle: 00}).scale(0.9);
      canvas.add(oImg).renderAll();
      var a = canvas.setActiveObject(oImg);
      var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
      console.log("aaaaaaaaaaa" + dataURL);

      //                        console.log("Canvas Image " + dataURL);
      //                        document.getElementById('txt').href = dataURL;

    });
  };
  reader.readAsDataURL(file);
});
document.querySelector('#txt').onclick = function (e) {
  e.preventDefault();
  canvas.deactivateAll().renderAll();
  document.querySelector('#preview').src = canvas.toDataURL();
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>canvas{
  border: 1px solid black;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"&gt;&lt;/script&gt;
&lt;input type="file" id="file"&gt;
&lt;canvas id="canvas" width="400" height="400"&gt;&lt;/canvas&gt;
&lt;a href='' id='txt' target="_blank"&gt;Click Me!!&lt;/a&gt;
&lt;br /&gt;
&lt;img id="preview" /&gt;</code></pre>
</div>
</div>
</p>

<p><a href="https://jsfiddle.net/varunPes/8gt6d7op/21/" rel="nofollow noreferrer">https://jsfiddle.net/varunPes/8gt6d7op/21/</a></p>

<p>Please share your ideas.</p>