setInterval clears WebGL

HTML

<script src="http://greggman.github.io/webgl-fundamentals/webgl/resources/webgl-utils.js"></script>
<!-- vertex shader -->
<script id="2d-vertex-shader" type="x-shader/x-vertex">
  attribute vec2 a_position;
  uniform vec2 u_resolution;

  void main() {
     vec2 zeroToOne = a_position / u_resolution;	// convert the rectangle from pixels to 0.0 to 1.0
     vec2 zeroToTwo = zeroToOne * 2.0;						// convert from 0->1 to 0->2
     vec2 clipSpace = zeroToTwo - 1.0;						// convert from 0->2 to -1->+1 (clipspace)
     gl_Position = vec4(clipSpace, 0, 1);
  }
</script>

<!-- fragment shader -->
<script id="2d-fragment-shader" type="x-shader/x-fragment">
  void main() {
		gl_FragColor =  vec4(0.0,1.0,0.0,1.0); //just draw green pixels
  }
</script>
<p>
Notice how the canvas clears each time the green square moves. The desired behavior is for the canvas to add new green squares each time without erasing the old ones.
</p>
<canvas id="canvas" width="128" height="128"></canvas>

CSS

canvas {
    border: 2px solid black;
    width: 128px;
    height: 128px;
}

JavaScript

function startGameLoop() {
		//first draw 10 rectangles to show that the canvas does not clear each time.
    for(var i =0; i < 10; i++) {
        setRectangle(gl, Math.random()*100, Math.random()*100, 20, 20);
        gl.drawArrays(gl.TRIANGLES, 0, 6); 
    }

    //now draw using set interval to show that it causes the canvas to clear each time.
    interval = setInterval(() => {
        setRectangle(gl, Math.random()*100, Math.random()*100, 20, 20);
        gl.drawArrays(gl.TRIANGLES, 0, 6); 
    }, 500);
}

function setRectangle(gl, x, y, width, height) {
    var x1 = x;
    var x2 = x + width;
    var y1 = y;
    var y2 = y + height;
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
     x1, y1,
     x2, y1,
     x1, y2,
     x1, y2,
     x2, y1,
     x2, y2]), gl.STATIC_DRAW);
}

function initializeShaders() {
    // Error Trapping
    if (!gl) {
        console.error('no gl')
        return;
    }
    // Create a buffer for the position of the rectangle corners.
    var buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.enableVertexAttribArray(0);
    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
    
    // setup GLSL program
    vertexShader = createShaderFromScriptElement(gl, "2d-vertex-shader");
    fragmentShader = createShaderFromScriptElement(gl, "2d-fragment-shader");
    program = createProgram(gl, [vertexShader, fragmentShader],["a_position"]);
    gl.useProgram(program);
    
    //tell the shader the resolution of the canvas (hard coded to 128 for simplicity)
    gl.uniform2f(gl.getUniformLocation(program, "u_resolution"), 128, 128);
}

var gl = getWebGLContext(document.getElementById("canvas"), {preserveDrawingBuffer: true});
var interval;

initializeShaders();
startGameLoop();