gl_PointCoord problems

Relates to: https://www.khronos.org/registry/webgl/sdk/tests/conformance/rendering/point-with-gl-pointcoord-in-fragment-shader.html

HTML

<script id="vertex-shader" type="x-vertex-shader">
    
    attribute vec2 aPosition;
    varying vec4 vTint;
    
    void main() {
        vTint = vec4( 1, 0, 1, 1 );
        gl_Position = vec4( aPosition, 1, 1 );
        gl_PointSize = 32.0;
    }
    
</script>

<script id="fragment-shader" type="x-fragment-shader">
    
    precision mediump float;
    
    uniform sampler2D uTexture;
    varying vec4 vTint;
    
    void main() {
        
        // Tinting with a color defined in the frag shader works
        //gl_FragColor = texture2D( uTexture, gl_PointCoord ) * vec4( 1, 0, 1, 1 );
    
        // The color varying worls
        //gl_FragColor = vTint;
    
        // Using the color varying with gl_PointCoord doesn't work :(
        gl_FragColor = texture2D( uTexture, gl_PointCoord ) * vTint;
    }
    
</script>

<canvas id="gl-canvas"></canvas>

CSS

html, body {
    background: #ccc;
}

JavaScript

var glCanvas = document.getElementById( 'gl-canvas' );
var gl = glCanvas.getContext( 'webgl' ) || glCanvas.getContext( 'experimental-webgl' );

var vs = gl.createShader( gl.VERTEX_SHADER );
var fs = gl.createShader( gl.FRAGMENT_SHADER );

gl.shaderSource( vs, document.getElementById( 'vertex-shader' ).textContent );
gl.shaderSource( fs, document.getElementById( 'fragment-shader' ).textContent );

gl.compileShader( vs );
gl.compileShader( fs );

var prog = gl.createProgram();
gl.attachShader( prog, vs );
gl.attachShader( prog, fs );
gl.linkProgram( prog );
gl.useProgram( prog );

prog.aPosition = gl.getAttribLocation( prog, 'aPosition' );
prog.uTexture = gl.getUniformLocation( prog, 'uTexture' );

var buffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, buffer );
gl.bufferData( gl.ARRAY_BUFFER, new Float32Array([0,0]), gl.STATIC_DRAW );
gl.enableVertexAttribArray( prog.aPosition );
gl.vertexAttribPointer( prog.aPosition, 24, gl.FLOAT, gl.FALSE, 0, 0 );

var texture = gl.createTexture();
gl.bindTexture( gl.TEXTURE_2D, texture );
gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR );
gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR );
gl.activeTexture( gl.TEXTURE0 );
gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, (function() {
    var c = document.createElement( 'canvas' ), g = c.getContext( '2d' );
    c.width = c.height = 64;
    g.fillStyle = '#fff'; g.beginPath(); g.arc( 32, 32, 32, 0, Math.PI * 2 ); g.fill();
    return c;
})());

gl.uniform1i( prog.uTexture, 0 );

gl.drawArrays( gl.POINTS, 0, 1 );