Because that's the way WebGL works.
WebGL swaps/copies automatically. Anytime you do anything that effects the WebGL drawingBuffer (think "backbuffer) it gets marked to swap/copy. The next time the browser composites the web page it will do either a swap or a copy. You can tell it to always copy. You can not tell it to always swap
Specifically, creating the WebGL context with {preserveDrawingBuffer: true} as in
gl = someCanvas.getContext("webgl", {preserveDrawingBuffer: true});
Tells WebGL you always want it to do a copy.
The default is WebGL chooses swap or copy depending on various factors. For example if anti-aliasing is on it's always effectively a copy (a resolve) where as if anti-aliasing is off it might be a swap. Also, in this default case, when preserveDrawingBuffer is false after it does a copy or swap it will clear the backbuffer. This is to try to make it appear consistent regardless of whether it chooses to copy or swap.
If preserveDrawingBuffer = true then it never clears the backbuffer.
If you want to do a bunch of work over multiple JavaScript events and not let the user see the results until all your work is done you'll need to render to a framebuffer with an attached texture or renderbuffer and then when all your work is done render than attachment to the canvas (the backbuffer).
as for gl.finish that's a no-op in WebGL. It has no point.
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
