title: WebGL: INVALID_OPERATION: readPixels: ArrayBufferView not large enough for dimensions
body: <p>Basically I have 200 X 200 px canvas, a voxel which is 20 X 20 X 20 px. So I have 100 voxels. When I draw on canvas, I want to see which pixel is drawn and if that pixel is inside one of the voxel then I will display that voxel. </p>
  
  <p>Below voxelWidthPixel is number of pixels in width of voxel and voxelHeightPixel is number of pixels in height of voxel. I'm using a loop so that I read pixel values from (0,0) to (20,20) then (0, 20 ) to (20, 40) then (0, 40) to (20, 60) and eventually to (180, 160) to (200, 180) and then (180, 180) to (200, 200).</p>
  
  <pre><code>for (var i =bottomleft.x, px =0 ; i &lt; topRight.x; i = i + voxelSize, px = px + pixWidthVoxel){
      for (var j = bottomleft.y, py =0 ; j &lt; topRight.y ; j = j + voxelSize, py = py + pixHeightVoxel){
  
          var pixelValues = new Uint8Array(voxelWidthPixel * voxelHeightPixel * 4);
          gl.readPixels( startPixelX, startPixelY, endPixelX, endPixelY, gl.RGBA, gl.UNSIGNED_BYTE, pixelValues);
      }
  }
  </code></pre>
  
  <p>Shouldn't pixelValues be arrayBuffer of size = 20 * 20 * 4  = 1600? And since I'm only reading from (0,0) to(20,20) and then (0, 20) to (20,40), the square from (0,0) to (20,20) will hold 400 pixels. Shouldn't pixelvalues be enough to get all RGBA values??  </p>