title: ReadPixels from WebGL canvas
body: <p>I am trying to save an animation which is created with WebGL on <a href="http://www.thevirtualheart.org/webgl/DS_SIAM/4v_minimal_model.html" rel="nofollow noreferrer">this page</a>. I'd like to store the <code>RGBA</code> values of the animation as an array on my hard drive. Therefore, I tried to use the <code>readPixels</code> method to access the data in javascript to save them. But there are always just zeros written into the array. </p>
  
  <p>I tried this code to read the data from the canvas <code>c</code></p>
  
  <pre><code>var pixels = new Uint8Array(gl.drawingBufferWidth * gl.drawingBufferHeight * 4);
  gl.readPixels(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
  </code></pre>
  
  <p>How can I solve the problem? Are there other ways to save the RGBA data of the canvas' animation on my hard drive? </p>