title: Custom globalCompositeOperation in html5 Canvas
body: <p>I'm looking at all of the different types of global composite operations here:</p>
  
  <p><a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation</a></p>
  
  <p>None of them do exactly what I want to do. Is there a way to define a custom globalCompositeOperation? It would be perfect if I could create a shader and then have it be used everytime I draw something with a CanvasRenderingContext2D.draw method. </p>
  
  <p>Specifically, on a per pixel basis, I want the following (psuedo code) operation to be used by the CanvasRenderingContext2D.draw methods:</p>
  
  <pre><code>if the existing canvas color alpha is 0.0, 
      then draw the new shape's color and set alpha to 0.1
  if the existing canvas color is the same as the new shape's color
      then increase the alpha, by 0.1
  if the existing canvas color is different from the the new shape's color
      then decrease the alpha by 0.1
  </code></pre>
  
  <p>Am I even thinking about this correctly? I'm sensing that I should be using WebGLRenderingContext somehow, but I'm a little shaky on how it all fits together.</p>