clearColor and background-color

Question

In the fragment shader the alpha of gl_Fragcolor is null : gl_FragColor = vec4(0.88,0.33,0.55,0.0);

When you look the color of the point (size 24) , the color is the background-color of the canvas.

Where is the clearColor ? ( gl.clearColor(0.12, 0.34, 0.56, 1.0);)

'use strict';

const gl = canvas.getContext('webgl',{premultipliedAlpha: false});


const vsGLSL = `
  void main() {
    gl_Position = vec4(0,0,0, 1);
    gl_PointSize = 24.;
    }
`;

const fsGLSL = `
  #ifdef GL_FRAGMENT_PRECISION_HIGH
      precision highp float;
  #else
      precision mediump float;
  #endif
  
  void main() {
    gl_FragColor = vec4(0.88,0.33,0.55,0.0);
    }
`;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vsGLSL);
gl.compileShader(vertexShader);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fsGLSL);
gl.compileShader(fragmentShader);

const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

gl.useProgram(program);

gl.clearColor(0.12, 0.34, 0.56, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT );

gl.viewport(0,0,canvas.width,canvas.height);
gl.drawArrays(gl.POINTS,0,1);

body {
  background-color: rgba(255,0,0,1);
}

canvas {
  background-color: rgba(66,66,0,1);
}

<canvas id="canvas"></canvas>

Answer 1

You neeed to enable and setup alpha blending using

    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

This website provides a good way to explore the various blending equations and functions.

'use strict';

const gl = canvas.getContext('webgl',{premultipliedAlpha:false});


const vsGLSL = `
  void main() {
    gl_Position = vec4(0,0,0, 1);
    gl_PointSize = 24.;
    }
`;

const fsGLSL = `
  #ifdef GL_FRAGMENT_PRECISION_HIGH
      precision highp float;
  #else
      precision mediump float;
  #endif
  
  void main() {
    gl_FragColor = vec4(0.88,0.33,0.55,0);
    }
`;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vsGLSL);
gl.compileShader(vertexShader);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fsGLSL);
gl.compileShader(fragmentShader);

const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

gl.useProgram(program);

gl.clearColor(0.12, 0.34, 0.56, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT );

gl.viewport(0,0,canvas.width,canvas.height);
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
gl.drawArrays(gl.POINTS,0,1);

body {
  background-color: rgba(255,0,0,1);
}

canvas {
  background-color: rgba(66,66,0,1);
}

<canvas id="canvas"></canvas>