From 34a19ae48d3256d0b8d0692d5826b56febb87a07 Mon Sep 17 00:00:00 2001
From: Dan Walmsley <dan@walms.co.uk>
Date: Thu, 8 Dec 2022 08:14:05 +0000
Subject: [PATCH] make web canvas transparent by clearing gl buffers

---
 .../Avalonia.Browser/webapp/modules/avalonia/canvas.ts        | 4 ++++
 src/Browser/Avalonia.Browser/webapp/modules/avalonia/dom.ts   | 1 -
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/Browser/Avalonia.Browser/webapp/modules/avalonia/canvas.ts b/src/Browser/Avalonia.Browser/webapp/modules/avalonia/canvas.ts
index 47c501cbb7..c11493a68d 100644
--- a/src/Browser/Avalonia.Browser/webapp/modules/avalonia/canvas.ts
+++ b/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;
 
diff --git a/src/Browser/Avalonia.Browser/webapp/modules/avalonia/dom.ts b/src/Browser/Avalonia.Browser/webapp/modules/avalonia/dom.ts
index 385cdd4c41..e8e37faf58 100644
--- a/src/Browser/Avalonia.Browser/webapp/modules/avalonia/dom.ts
+++ b/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";