title: Is there a way to get WebGL to render offscreen, without the webgl canvas attached to the DOM?
body: <p>I thought this would be an easy question to find an answer for, but it's turning out to be very elusive. Basically, I'm trying to use WebGL to do the heavy lifting on some image processing and generation tasks, and I want it to work offscreen. Ideally, I'd like WebGL to render a scene to a framebuffer that I can <code>gl.readPixels()</code> from, or to the webgl canvas so I can use it as a <em>source</em> for <code>context.drawImage()</code>. The thing is, I don't want to display the webgl canvas itself, I only want to copy portions of it to a visible canvas that I have a regular "2d" context for. So far, I can't seem to get it to work without the following initialization, which seems like an ugly hack to me:</p>
  
  <pre><code>glCanvas = document.createElement('canvas');
  glCanvas.width = 256;
  glCanvas.height = 256;
  document.body.appendChild(glCanvas); // seems necessary, but why?
  glCanvas.style.visibility = 'hidden'; // ugh, is this the only way?
  </code></pre>
  
  <p>Currently, I'm rendering a scene to a framebuffer I create with:<code>gl.createFramebuffer()</code>, using a single <code>gl.drawArrays()</code> call, and then using <code>gl.readPixels()</code> to get the result out to an ImageData. With the glCanvas attached to the DOM it works exactly as planned. But if I leave off those last 2 lines of code above where I attach the glCanvas and hide it, I get no image when I try to readPixels from the framebuffer I've rendered to.</p>
  
  <p>I don't understand why the glCanvas needs to be attached to the DOM, if it's not even being rendered to. I thought that rendering to a framebuffer happens entirely on the graphics card and that the buffer will persist for me to use as a texture. Is it simply the case that WebGL doesn't render at all unless there is at least one webgl-context canvas attached to the DOM? Or am I missing some other detail? Thanks!</p>