background-color vs COLOR_BUFFER_BIT

Question

If I put a clearcolor with zero alpha, I don't understand why we then see the color given in CSS of the canvas rather than the CSS color of the body. On canvas, what is the difference between WebGLRenderingContext.clearColor() and background-color?

const gl = document.getElementById("c").getContext("webgl", {
  premultipliedAlpha: false,
});
gl.clearColor(0, 1, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);

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

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

Answer 1

i found !

WebGL: How to correctly blend alpha channel png

Do you or do you not want your WebGL image blended with the webpage? If no, you don't want to blend with the webpage then do one of the following :

• turn off alpha in the canvas var gl = someCanvas.getContext("webgl", { alpha: false });

const gl = document.getElementById("c").getContext("webgl", {
  premultipliedAlpha: false,
  alpha:false
});
gl.clearColor(0, 1, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);

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

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