When using preserveDrawingBuffer for our context we need to take care of clearing the drawing buffer by our self. I use this technique in my app.
I read some article
As I understand, preserveDrawingBuffer=true
means WebGL has to flush the pipeline between frames. OpenGL drawing isn't synchronous, and so drawing commands can be still in the pipeline when you finish your frame.
This would be equivalent to placing a flush at the end of your render loop. https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/flush
So that is why the results can vary a lot. If your GPU has buffered a lot of commands, then it will then the program will be forced to stop while all the GPU commands are executed. However, if your GPU is fast, then there might not be much in the buffer, and so things simply continue.
I've seen cases where placing a flush call at the end of the render loop dropped the Fps by 50%.
I would avoid preserveDrawingBuffer=true
because it will hurt performance when you need it most.