gradient backgrounds now work

1 files changed, 15 insertions, 1 deletions

diff --git a/apps/web/src/lib/timeline-renderer.ts b/apps/web/src/lib/timeline-renderer.ts
index ddc361b5..4d00129c 100644
--- a/apps/web/src/lib/timeline-renderer.ts
+++ b/apps/web/src/lib/timeline-renderer.ts
@@ -2,6 +2,7 @@ import type { TimelineTrack } from "@/types/timeline";
 import type { MediaFile } from "@/types/media";
 import type { BlurIntensity } from "@/types/project";
 import { videoCache } from "./video-cache";
+import { drawCssBackground } from "./canvas-gradients";
 
 export interface RenderContext {
   ctx: CanvasRenderingContext2D;
@@ -48,11 +49,24 @@ export async function renderTimelineFrame({
 }: RenderContext): Promise<void> {
   // Background
   ctx.clearRect(0, 0, canvasWidth, canvasHeight);
-  if (backgroundColor && backgroundColor !== "transparent") {
+  if (
+    backgroundColor &&
+    backgroundColor !== "transparent" &&
+    !backgroundColor.includes("gradient")
+  ) {
     ctx.fillStyle = backgroundColor;
     ctx.fillRect(0, 0, canvasWidth, canvasHeight);
   }
 
+  // If backgroundColor is a CSS gradient string, draw it using JS (no foreignObject) to avoid CORS tainting
+  if (backgroundColor && backgroundColor.includes("gradient")) {
+    try {
+      drawCssBackground(ctx, canvasWidth, canvasHeight, backgroundColor);
+    } catch {
+      // best-effort; ignore failures
+    }
+  }
+
   const scaleX = projectCanvasSize ? canvasWidth / projectCanvasSize.width : 1;
   const scaleY = projectCanvasSize
     ? canvasHeight / projectCanvasSize.height