title: Can one easily create an HTML image element from a WebGL texture object?
body: <p>I'd like to take a WebGLTexture object that I've rendered into and use it to create an HTML image element. The goal is to display the result of an offscreen rendering pass for debugging purposes. It should be a lot easier than rendering the texture to a full screen quad, my current debugging method.</p>
  
  <p>Creating a texture from an image element is really easy in WebGL:</p>
  
  <pre><code>var image = new Image();
  image.src = "myImg.jpg";
  
  // image loads...
  
  var texture = gl.createTexture();
  gl.bindTexture(texture);
  gl.texImage2D(_gl.TEXTURE_2D, 0, _gl.RGBA, _gl.RGBA, _gl.UNSIGNED_BYTE, image);
  </code></pre>
  
  <p>Image loading and decoding is completely taken care of for you.</p>
  
  <p>Is there a similarly easy way to do the reverse? i.e.:</p>
  
  <pre><code>// This doesn't work
  var img = new Image(texture);
  
  // But maybe this could
  var img = createImageFromTexture(texture);
  
  function createImageFromTexture(texture) {
      // ... some combination of tricks ...
  }
  </code></pre>
  
  <p>If there is a way to do this, I'm sure it will be useful in contexts outside of debugging. I'll continue to see if I can find a way to do it, but I feel like someone has had to have attempted this before.</p>