title: Downloading canvas image using toBlob
body: <p>I am attempting to download a large canvas image (several thousand pixels height and width) on the click of a button using <code>toBlob</code> in the following code, which doesn't seem to work:</p>
  
  <pre><code>document.getElementById("download_button").onclick = function() {
  
    var link = document.createElement("a");
    link.download = "image.png";
  
    canvas.toBlob(function(blob){
      link.href = URL.createObjectURL(blob);
      console.log(blob);
    },'image/png');
  
    console.log(link.href);
    link.click();
  
  }
  </code></pre>
  
  <p><code>console.log(blob)</code> in the callback function returns: <code>Blob {size: 64452, type: "image/png"}</code></p>
  
  <p>But <code>console.log(link.href)</code> returns nothing. </p>
  
  <p>Am I not using <code>.createObjectURL</code> correctly?</p>
  
  <p>I used to work with <code>toDataURL</code>, but it stopped working above a certain canvas size. And this post <a href="https://stackoverflow.com/questions/35480112/canvas-todataurl-download-size-limit">canvas.toDataURL() download size limit</a> suggested to try <code>toBlob</code>.</p>