From 3c1aa4fbe4631ceae93f5d1adff2957c19b2a3b1 Mon Sep 17 00:00:00 2001
From: Zakarya <zakarya@colormatic.org>
Date: Wed, 2 Apr 2025 20:35:09 -0700
Subject: [PATCH] Use OffscreenCanvas instead of HTMLCanvasElement for buffers

---
 src/component/bg.svelte | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/component/bg.svelte b/src/component/bg.svelte
index 699cbd6..428165d 100644
--- a/src/component/bg.svelte
+++ b/src/component/bg.svelte
@@ -231,15 +231,16 @@
     radius: number;
     color: string;
     alpha: number;
-    renderingBuffer: HTMLCanvasElement;
+    renderingBuffer: OffscreenCanvas;
     constructor() {
       super();
       this.radius = Math.random() * 500 + 300;
       this.color = getRandomColor();
       this.alpha = Math.random() * 0.5 + 0.5; // Initial alpha between 0.5 and 1
-      this.renderingBuffer = document.createElement(
-        "canvas",
-      ) as HTMLCanvasElement;
+      this.renderingBuffer = new OffscreenCanvas(
+        this.radius * 2,
+        this.radius * 2,
+      );
 
       // One-shot buffer adjustment
       this.renderingBuffer.width = this.radius * 2;
@@ -254,7 +255,7 @@
     prepareBuffer() {
       let bctx = this.renderingBuffer.getContext(
         "2d",
-      ) as CanvasRenderingContext2D;
+      ) as OffscreenCanvasRenderingContext2D;
 
       bctx.clearRect(
         0,