WebGL drawArrays generates white background

Question

I have a simple WebGL application. It has canvas and a pair of simple shaders:

<canvas id="render" width="320" height="240">
<div id="vertexShader" class="shader">  
    attribute vec4 position;
    void main()
    {
        gl_Position = position;
    }
</div>
<div id="fragmentShader" class="shader">
    precision mediump float;
    void main()
    {
        gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
    }
</div>

The application code looks like this:

function getContext() {
    var canvas = document.getElementById("render");
    return canvas.getContext("webgl");
}

function initContext(context) {
    context.clearColor(0.0, 0.0, 0.0, 1.0);
    context.clear(context.COLOR_BUFFER_BIT);
}

function getShader(shaderId, type, context) {
    var shaderSource = document.getElementById(shaderId).innerHTML;
    var shader = context.createShader(type);
    context.shaderSource(shader, shaderSource);
    context.compileShader(shader);
    if (!context.getShaderParameter(shader, context.COMPILE_STATUS)) {
      console.log(context.getShaderInfoLog(shader));
      return null;
    }
    return shader;
}

function initShaders(context) {
    var program = context.createProgram();
    context.attachShader(program, getShader("vertexShader", context.VERTEX_SHADER, context));
    context.attachShader(program, getShader("fragmentShader", context.FRAGMENT_SHADER, context));
    context.linkProgram(program);
    if (!context.getProgramParameter(program, context.LINK_STATUS)) {
      console.log("Could not initialise shaders");
    }
    return program;
}

function renderTile(context, program) {
    var tileBuffer = context.createBuffer();
    var tile = [
        1.0, 1.0, 0, 1.0,
        -1.0, 0, 0, 1.0,
        1.0, -1.0, 0, 1.0
    ];
    context.bindBuffer(context.ARRAY_BUFFER, tileBuffer);
    context.bufferData(context.ARRAY_BUFFER, new Float32Array(tile), context.STATIC_DRAW);
    positionLocation = context.getAttribLocation(program, "position");
    context.enableVertexAttribArray(positionLocation);
    context.vertexAttribPointer(positionLocation, 4, context.FLOAT, false, 0, 0);
    context.drawArrays(context.TRIANGLES, 0, 3);
}

var context = getContext();
initContext(context);
var program = initShaders(context);
context.useProgram(program);
setTimeout(function() {
    renderTile(context, program);
}, 100);

It renders a simple triangle on a canvas.

The problem is that it sometimes renders a triangle on a white background although clear color is set to non-transparent black. (in latest Google Chrome, Firefox is ok) While debugging I found that white background is rendered when drawArrays method is called. But I can't understand why it is not black.

Here is a jsFiddle for your convenience.

Answer 1

In your example you just have to clear your color buffer every "frame". Your background is black at first, then gets "overwritten" by your triangle (that vertices buffer), like you mentioned. You actually just do one clear in your init function at startup.

function initContext(context) {
    context.clearColor(0.0, 0.0, 0.0, 1.0);
    context.clear(context.COLOR_BUFFER_BIT);
}

Just add context.clear(context.COLOR_BUFFER_BIT); to your update function, for example:

setInterval(function() {
    context.clear(context.COLOR_BUFFER_BIT);
    renderTile(context, program);
}, 100);

See this updated jsFiddle.