context.readPixels(0, 0, context.drawingBufferWidth, context.drawingBufferHeight, context.RGBA, context.FLOAT, pixels);
This is the code. I get this error in the console: WebGL: INVALID_ENUM: readPixels: invalid type
But this works perfectly fine:
context.readPixels(0, 0, context.drawingBufferWidth, context.drawingBufferHeight, context.RGBA, context.UNSIGNED_BYTE, pixels);
Float or int is supposed to be supported, but only unsigned_byte works. There's no resource online on how to correctly apply a type that seems to work. Everything follows a different pattern.
FLOAT is not guaranteed to be supported. The only format/type combination that is guaranteed to be supported is RGBA/UNSIGNED_BYTE. See Spec, section 4.3.1
After that one other implementation dependent format/type combo might be supported depending on the type of thing you're reading. You can query that with
const altFormat = gl.getParameter(gl.IMPLEMENTATION_COLOR_READ_FORMAT);
const altType = gl.getParameter(gl.IMPLEMENTATION_COLOR_READ_TYPE);
The code above makes a RGBA/FLOAT texture and attached it to a framebuffer then checks the alternate format/type combo to read it. On Chrome it gets RGBA/UNSIGNED_BYTE, on Firefox it gets RGBA/FLOAT. Both are valid responses since the alternate combo is implementation dependent.