Fix compositing mixing with framebuffer for web and ANGLE

src/minshell.html

@@ -32,7 +32,7 @@
 
     <style>
         body { margin: 0px; }
-        canvas.emscripten { border: 0px none; background-color: black; }
+        canvas.emscripten { border: 0px none; }
     </style>
     <script type='text/javascript' src="https://cdn.jsdelivr.net/gh/eligrey/FileSaver.js/dist/FileSaver.min.js"> </script>
     <script type='text/javascript'>

src/rlgl.h

@@ -2890,6 +2890,14 @@ void rlDrawRenderBatch(rlRenderBatch *batch)
     // Change to next buffer in the list (in case of multi-buffering)
     batch->currentBuffer++;
     if (batch->currentBuffer >= batch->bufferCount) batch->currentBuffer = 0;
+
+#if defined(GRAPHICS_API_OPENGL_ES2)
+    // Fix compositing mixing with the framebuffer (that causes transparency issues) by clearing the alpha channel on the end of the frame
+    glClearColor(0, 0, 0, 1);
+    glColorMask(false, false, false, true);
+    glClear(GL_COLOR_BUFFER_BIT);
+    glColorMask(true, true, true, true);
+#endif
 #endif
 }
 

src/shell.html

@@ -75,7 +75,6 @@ jwE50AGjLCVuS8Yt4H7OgZLKK5EKOsLviEWJSL/+0uMi7gLUSBseYwqEbXvSHCec1CJvZPyHCmYQffaB
       /* NOTE: Canvas *must not* have any border or padding, or mouse coords will be wrong */
       canvas.emscripten {
         border: 0px none;
-        background: black;
         width: 100%;
       }