title: WebGL Texture pixel unexpected color in PNG
body: <p>I am trying to load a texture into WebGl and read a pixel color from it (to eventually use in a shader).  When I read the pixel color at position 70,70 in python, I get (255,0,0,255) which is what I expected.  But when I read it in WebGL, I get (255,38,0,255).  What am I missing here?</p>
  <p>Image: <a href="https://i.imgur.com/jGA12NE.png" rel="nofollow noreferrer">https://i.imgur.com/jGA12NE.png</a></p>
  <p>JSFiddle: <a href="https://jsfiddle.net/6u7h0sj1/3/" rel="nofollow noreferrer">https://jsfiddle.net/6u7h0sj1/3/</a></p>
  <p>Python code:</p>
  <pre><code>import requests
  from io import BytesIO
  
  response = requests.get('https://i.imgur.com/jGA12NE.png')
  im = Image.open(BytesIO(response.content))
  pixels=im.load()
  print(pixels[70,70])
  </code></pre>
  <p>Javascript code to read pixel of texture:</p>
  <pre><code>const canvas = document.createElement('canvas');
  document.body.appendChild(canvas);
  
  const gl= canvas.getContext(&quot;webgl&quot;,{&quot;antialias&quot;:true});
  
  function loadTexture(){
    const texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
  
    const level = 0;
    const internalFormat = gl.RGBA;
    const width = 1;
    const height = 1;
    const border = 0;
    const srcFormat = gl.RGBA;
    const srcType = gl.UNSIGNED_BYTE;
    const pixel = new Uint8Array([0, 0, 255, 255]);  // opaque blue
    gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
                  width, height, border, srcFormat, srcType,
                  pixel);
  
    const image = new Image();
      image.crossOrigin = &quot;&quot;;  // or &quot;anonymous&quot;, will be interpreted the same
    image.onload = () =&gt; {
      gl.bindTexture(gl.TEXTURE_2D, texture);
      gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
                    srcFormat, srcType, image);
  
      let width=1;
      let height=1;
      let x=70;
      let y=70;
      var fb = gl.createFramebuffer();
      gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
      gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
      if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) == gl.FRAMEBUFFER_COMPLETE) {
        var pixels = new Uint8Array(width * height * 4);
        gl.readPixels(x, y, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
        document.getElementById(&quot;test&quot;).textContent=pixels;
  
      }
    };
    image.src = 'https://i.imgur.com/jGA12NE.png';
  }
  
  loadTexture();
  </code></pre>