title: How to download canvas from HTML5 as a png file BUT with the transparency included?
body: <p>So I am currently using Processing to render to a canvas, and I am setting some pixels to transparent like this:</p>
  
  <pre><code>stroke(firstV, secondV, thirdV, alphaV);
  point(x, y);
  </code></pre>
  
  <p>If the pixel is transparent then <code>alphaV=0</code>.</p>
  
  <p>The code to download the image i borrowed from online:</p>
  
  <pre><code> function downloadCanvas(link, canvasId, filename) {
      link.href = document.getElementById(canvasId).toDataURL('image/png');
      link.download = filename;
  }
  
  document.getElementById('download').addEventListener('click', function() {
      downloadCanvas(this, 'mycanvas', 'test.png');
  }, false);
  </code></pre>
  
  <p>but look at the image (compare to a TRUE png transparent file):</p>
  
  <p><a href="https://i.stack.imgur.com/X7zBQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X7zBQ.png" alt="enter image description here"></a></p>
  
  <p>right is transparent but mine left is not.</p>
  
  <p>How can i preserve transparency in a png from a HTML5 canvas ?</p>
  
  <p>Any help you be great!
  Thanks!</p>