grediant in a shape

src/pages/editor/components/EditorCanvas.tsx

@@ -17,6 +17,7 @@ import CellEditor from "@/components/CellEditor";
 import ZoomControls from "./ZoomControls";
 import EditorCanvasToolbar from "./EditorCanvasToolbar";
 import { createScopedId } from "../store/editorStore.helpers";
+import { getKonvaGradientProps } from "../utils/gradient";
 
 type EditorCanvasProps = {
   catalogSize?: string;
@@ -46,9 +47,10 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
   const currentPage = pages.find((page) => page.id === currentPageId);
 
   const bgColor =
-    currentPage?.backgroundType === 'color'
+    currentPage?.backgroundType === 'color' || currentPage?.backgroundType === 'gradient'
       ? currentPage.backgroundColor
       : '#ffffff';
+  const bgGradient = currentPage?.backgroundGradient;
 
   const [bgImage] = useImage(
     currentPage?.backgroundType === 'image'
@@ -331,6 +333,13 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
 
   const scaledW = stageSize.width * finalScale;
   const scaledH = stageSize.height * finalScale;
+  const backgroundGradientProps = getKonvaGradientProps(
+    currentPage?.backgroundType === "gradient" ? "gradient" : "solid",
+    bgGradient,
+    stageSize.width,
+    stageSize.height,
+    "rect",
+  );
 
   return (
     <div className="relative z-10 flex min-h-0 flex-1 flex-col overflow-auto pb-8 xl:pl-6">
@@ -394,6 +403,7 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
                   width={stageSize.width}
                   height={stageSize.height}
                   fill={bgColor}
+                  {...backgroundGradientProps}
                   listening={false}
                 />
                 {currentPage?.backgroundType === 'image' && bgImage && (