I also don't quite understand this part
By
setting the preserveDrawingBuffer attribute of
the WebGLContextAttributes object
to true, the contents of the drawing buffer can be
preserved until the author either clears or overwrites
them. If this
flag is false attempting to perform operations using
this context as a source image after the rendering
function has returned can lead to undefined behavior.
This includes readPixels or toDataURL calls,
or using this context as the source image of another
context's texImage2D or drawImage call.
That seems counter intuitive. The browser has the pixels. It
has to be able to display them. Why do these functions have to
have undefined behavior?
readPixels is defined to read pixels from the current write buffer
(i.e. the drawing buffer). Other than for that, it's a fair
question.