html5 canvas - WebGL Clears Between Each setInterval -

this question has answer here:

• webgl: prevent color buffer being cleared 1 answer

when gl.drawarrays called sequentially, draws on top of previous graphics on canvas. however, when put inside setinterval() clears canvas before redrawing.

code draws rectangles on top of each other:

for(var =0; < 10; i++) {     setrectangle(gl, math.random()*100, math.random()*100, 20, 20);     gl.drawarrays(gl.triangles, 0, 6);  } 

code erases canvas each time new rectangle drawn:

interval = setinterval(() => {     setrectangle(gl, math.random()*100, math.random()*100, 20, 20);     gl.drawarrays(gl.triangles, 0, 6);  }, 500); 

here's complete fiddle containing above code.

i'm making game involves real time manipulation of large image (using phaser.js library game loop if makes difference). able redraw needed portions of image rather redraw entire image every animation cycle.

why webgl canvas clear this? can keep clearing?

change line 51 var gl = getwebglcontext(document.getelementbyid("canvas"), {preservedrawingbuffer: true}); fiddle.

warning: last time checked turning on firefox cause slow down considerably.