Downloading canvas image using toBlob : <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>
