title: Merge canvas image and canvas alpha mask into dataurl generated png
body: <p>given two canvas with the same pixel size, where canvas1 contains an arbitrary image (jpg, png or such) and canvas2 contains black and non-black pixels.</p>
  
  <p>what i want to achive: using a third canvas3 i want to clone canvas1 and have every black canvas2 pixel (may including a threshold of blackness) be transparent in canvas3</p>
  
  <p>i already have a working solution like this:</p>
  
  <pre><code>canvas3context.drawImage(canvas1,0,0);
  var c3img = canvas3context.getImageData(0,0,canvas3.width,canvas3.height);
  var c2img = canvas2context.getImageData(0,0,canvas2.width,canvas2.height);
  loop(){
      if(c2img i-th,i+1-th,i+2-th pixel is lower than threshold)
        set c3img.data[i]=c3img.data[i+1]=c3img.data[i+2]=c3img.data[i+3]=0
  }
  </code></pre>
  
  <p>the problem with above (pseudo) code is, that it is slow
  so my question is: anyone can share an idea how to speed this up significantly?
  i thought about webgl but i never worked with it - so i have no idea about shaders or the tools or terms needed for this. another idea was that maybe i could convert canvas2 to black&amp;white somehow very fast (not just modifieng every pixel in a loop like above) and work with blend modes to generate the transparent pixels</p>
  
  <p>any help is highly appreciated</p>