title: How can I apply a pixel shader to a canvas element?
body: <p>I have a <code>&lt;canvas&gt;</code> element which is written to by an external library. I wish to apply a "post-production" effect to this canvas: I want to map a function <code>(r,g,b,a) -&gt; (r,g,b,a)</code> over every pixel before it is finally displayed.</p>
  
  <p>I know that the external library writes to a 2D context obtained from the <code>&lt;canvas&gt;</code> element. I also know that the transformation I'm asking for is a "pixel shader" or "fragment shader". I know I will need a <code>webgl</code> context to apply such a shader. I am told by <a href="https://stackoverflow.com/a/8466639/229792">this answer</a> that a canvas cannot have multiple contexts at the same time, so I am not sure this approach is possible.</p>
  
  <p>Another approach I considered is to capture the output of the canvas as a stream, and write it to a new canvas with my transformation applied. However, <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasCaptureMediaStream/canvas" rel="nofollow noreferrer">this feature only exists in bleeding-edge Firefox</a>.</p>
  
  <p><strong>Is it possible to apply a fragment shader to canvas output? If so, how?</strong></p>