title: Read pixel information from a WebGL 3D canvas return all [0, 0, 0, 255]
body: <p>I'm trying to complete a goal to get a image copy of a certain WebGL Web software: ArcGIS Scene Viewer. It is using a canvas and I tried this:</p>
  
  <pre><code>    var canvas = document.getElementsByTagName("canvas")[0];
      var resultDOM = document.getElementById("result");
      resultDOM.innerText = canvas;
      var gl = canvas.getContext("webgl", {preserveDrawingBuffer: true});
      var pixels = new Uint8Array(gl.drawingBufferWidth * gl.drawingBufferHeight * 4);
      gl.readPixels(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
      console.log(pixels); // Uint8Array
  </code></pre>
  
  <p>But the Array logged in console is always full of [0, 0, 0, 255].
  So I'm not in full control of the JSAPI I use to create that canvas, so I can't set <code>preserveDrawingBuffer: true</code> when first time initializing the <code>canvas</code>, all I can do is after the canvas loaded the map then execute some JS. So how can I get the image I need?</p>
  
  <p>Am I doing something wrong here? I also tried framebuffer, it is also not working:</p>
  
  <pre><code>canvas.addEventListener('click', function(ev) {
      var gl = canvas.getContext("webgl", {
        preserveDrawingBuffer: true
      });
      var framebuffer = gl.createFramebuffer();
      //insert code to get mouse x,y position on canvas
      var top = canvas.offsetTop;
      var left = canvas.offsetLeft;
      var x = ev.clientX - left;
      var y = ev.clientY - top;
      var pixels = new Uint8Array(4);
      gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
      gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
      gl.bindFramebuffer(gl.FRAMEBUFFER, null);
      console.log(x, y, pixels);
  });
  </code></pre>
  
  <p>The pixel value returned is also [0, 0, 0, 0].</p>
  
  <p>Here's a sample you can try: <a href="https://jsfiddle.net/qvtt87ky/" rel="nofollow">https://jsfiddle.net/qvtt87ky/</a>
  It is always returning a whole black image.</p>