1 files changed, 9 insertions, 32 deletions

diff --git a/apps/web/src/services/renderer/canvas-renderer.ts b/apps/web/src/services/renderer/canvas-renderer.ts
index 4a002675..58294e9c 100644
--- a/apps/web/src/services/renderer/canvas-renderer.ts
+++ b/apps/web/src/services/renderer/canvas-renderer.ts
@@ -1,5 +1,6 @@
 import type { FrameRate } from "opencut-wasm";
 import type { AnyBaseNode } from "./nodes/base-node";
+import { createCanvasSurface } from "./canvas-utils";
 import { buildFrameDescriptor } from "./compositor/frame-descriptor";
 import { wasmCompositor } from "./compositor/wasm-compositor";
 import { resolveRenderTree } from "./resolve";
@@ -16,8 +17,8 @@ export type CanvasRendererParams = {
 };
 
 export class CanvasRenderer {
-	canvas: OffscreenCanvas | HTMLCanvasElement;
-	context: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D;
+	canvas: OffscreenCanvas;
+	context: OffscreenCanvasRenderingContext2D;
 	width: number;
 	height: number;
 	fps: FrameRate;
@@ -27,22 +28,9 @@ export class CanvasRenderer {
 		this.height = height;
 		this.fps = fps;
 
-		try {
-			this.canvas = new OffscreenCanvas(width, height);
-		} catch {
-			this.canvas = document.createElement("canvas");
-			this.canvas.width = width;
-			this.canvas.height = height;
-		}
-
-		const context = this.canvas.getContext("2d");
-		if (!context) {
-			throw new Error("Failed to get canvas context");
-		}
-
-		this.context = context as
-			| OffscreenCanvasRenderingContext2D
-			| CanvasRenderingContext2D;
+		const surface = createCanvasSurface({ width, height });
+		this.canvas = surface.canvas;
+		this.context = surface.context;
 	}
 
 	getOutputCanvas(): HTMLCanvasElement {
@@ -57,20 +45,9 @@ export class CanvasRenderer {
 		this.width = width;
 		this.height = height;
 
-		if (this.canvas instanceof OffscreenCanvas) {
-			this.canvas = new OffscreenCanvas(width, height);
-		} else {
-			this.canvas.width = width;
-			this.canvas.height = height;
-		}
-
-		const context = this.canvas.getContext("2d");
-		if (!context) {
-			throw new Error("Failed to get canvas context");
-		}
-		this.context = context as
-			| OffscreenCanvasRenderingContext2D
-			| CanvasRenderingContext2D;
+		const surface = createCanvasSurface({ width, height });
+		this.canvas = surface.canvas;
+		this.context = surface.context;
 	}
 
 	async render({ node, time }: { node: AnyBaseNode; time: number }) {