Read pixel information from a WebGL 3D canvas return all [0, 0, 0, 255]
<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>