title: Using canvas to download an image increases the file's size
body: <p>When I try to manipulate an image using a canvas, without any modifications, my image's filesize becomes significantly larger than the original.</p>
  
  <p>Can you explain why this happens and how I can avoid this, please?</p>
  
  <p><a href="https://jsfiddle.net/95rnh4yj/" rel="nofollow noreferrer">https://jsfiddle.net/95rnh4yj/</a></p>
  
  <pre><code>function one(selector) {
    return document.querySelector(selector);
  }
  
  function on(element, event, listener) {
    element.addEventListener(event, listener);
  }
  
  function blobToUrl(blob) {
    return Promise.resolve(URL.createObjectURL(blob));
  }
  
  function urlToImg(url) {
    return new Promise(function (resolve) {
      let
      img = new Image();
  
      img.src = url;
  
      on(img, 'load', function (event) {
         resolve(event.target);
      });
    });
  }
  
  function imgToBlob(img) {
    return new Promise(function (resolve) {
      let
      canvas = document.createElement('canvas'),
      context = canvas.getContext('2d');
  
      canvas.height = img.naturalHeight;
      canvas.width = img.naturalWidth;
      context.fillStyle = 'transparent';
      context.fillRect(0, 0, canvas.width, canvas.height);
      context.save();
      context.drawImage(img, 0, 0);
      canvas.toBlob(resolve, 'image/jpeg', 1);
    });
  }
  
  function writeSrc(src) {
    one('a').href = src;
  }
  
  on(one('input'), 'change', function(event) {
    blobToUrl(event.target.files[0])
    .then(urlToImg)
    .then(imgToBlob)
    .then(blobToUrl)
    .then(writeSrc);
  })
  </code></pre>