make web canvas transparent by clearing gl buffers

src/Browser/Avalonia.Browser/webapp/modules/avalonia/canvas.ts

@@ -114,6 +114,10 @@ export class Canvas {
                 this.htmlCanvas.height = this.newHeight ?? 0;
             }
 
+            const GL = (globalThis as any).AvaloniaGL;
+            const GLctx = GL.currentContext.GLctx as WebGLRenderingContext;
+            GLctx.clearColor(0.0, 0.0, 0.0, 0.0);
+            GLctx.clear(GLctx.COLOR_BUFFER_BIT | GLctx.DEPTH_BUFFER_BIT);
             this.renderFrameCallback();
             this.renderLoopRequest = 0;
 

src/Browser/Avalonia.Browser/webapp/modules/avalonia/dom.ts

@@ -17,7 +17,6 @@ export class AvaloniaDOM {
         const canvas = document.createElement("canvas");
         canvas.id = `canvas${randomIdPart}`;
         canvas.classList.add("avalonia-canvas");
-        canvas.style.backgroundColor = "#ccc";
         canvas.style.width = "100%";
         canvas.style.position = "absolute";