2 files changed, 33 insertions, 2 deletions

diff --git a/apps/web/src/services/renderer/compositor/wasm-compositor.ts b/apps/web/src/services/renderer/compositor/wasm-compositor.ts
index 10684f11..5d2ddc3f 100644
--- a/apps/web/src/services/renderer/compositor/wasm-compositor.ts
+++ b/apps/web/src/services/renderer/compositor/wasm-compositor.ts
@@ -96,6 +96,14 @@ class WasmCompositor {
 		}
 	}
 
+	repairSharedCanvas() {
+		if (!this.canvas || !this.initializedSize) return;
+		const { width, height } = this.initializedSize;
+		if (this.canvas.width === width && this.canvas.height === height) return;
+		resizeCompositor(width + 1, height);
+		resizeCompositor(width, height);
+	}
+
 	private syncExternalTexture(texture: ExternalTextureDescriptor) {
 		const previous = this.cache.get(texture.id);
 		if (
diff --git a/apps/web/src/services/renderer/gpu-renderer.ts b/apps/web/src/services/renderer/gpu-renderer.ts
index c1be3f1a..8ad11083 100644
--- a/apps/web/src/services/renderer/gpu-renderer.ts
+++ b/apps/web/src/services/renderer/gpu-renderer.ts
@@ -4,6 +4,25 @@ import {
 	initializeGpu,
 } from "opencut-wasm";
 import type { EffectPass, EffectUniformValue } from "@/effects/types";
+import { wasmCompositor } from "./compositor/wasm-compositor";
+
+const canvasRepairListeners = new Set<() => void>();
+
+export function onGpuCanvasRepaired({
+	callback,
+}: {
+	callback: () => void;
+}): () => void {
+	canvasRepairListeners.add(callback);
+	return () => canvasRepairListeners.delete(callback);
+}
+
+function repairSharedCompositorCanvas(): void {
+	wasmCompositor.repairSharedCanvas();
+	for (const listener of canvasRepairListeners) {
+		listener();
+	}
+}
 
 let gpuAvailable = false;
 let initPromise: Promise<void> | null = null;
@@ -43,12 +62,14 @@ export const gpuRenderer = {
 			return source;
 		}
 
-		return applyEffectPasses({
+		const result = applyEffectPasses({
 			source,
 			width,
 			height,
 			passes: serializeEffectPasses(passes),
 		});
+		repairSharedCompositorCanvas();
+		return result;
 	},
 
 	applyMaskFeather({
@@ -66,12 +87,14 @@ export const gpuRenderer = {
 			return maskCanvas;
 		}
 
-		return applyMaskFeatherWasm({
+		const result = applyMaskFeatherWasm({
 			mask: maskCanvas,
 			width,
 			height,
 			feather,
 		});
+		repairSharedCompositorCanvas();
+		return result;
 	},
 };