border radius

src/pages/editor/utils/exportUtils.ts

@@ -75,12 +75,32 @@ const drawMaskShape = (
     // Default: Rectangle
     const width = maskShape.width || 100;
     const height = maskShape.height || 100;
-    ctx.fillRect(0, 0, width, height);
+    const radius = Math.max(0, maskShape.borderRadius || 0);
+    drawRoundedRectPath(ctx, 0, 0, width, height, radius);
+    ctx.fill();
   }
   
   ctx.restore();
 };
 
+const drawRoundedRectPath = (
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  radius: number
+): void => {
+  const normalizedRadius = Math.max(0, Math.min(radius, width / 2, height / 2));
+  ctx.beginPath();
+  if (normalizedRadius === 0) {
+    ctx.rect(x, y, width, height);
+  } else {
+    ctx.roundRect(x, y, width, height, normalizedRadius);
+  }
+  ctx.closePath();
+};
+
 /**
  * رسم یک object روی canvas context
  * این تابع یک نسخه ساده است - در پیاده‌سازی واقعی باید
@@ -122,10 +142,12 @@ const drawObject = async (
       ctx.fill();
       if (ctx.lineWidth > 0) ctx.stroke();
     } else {
-      ctx.fillRect(0, 0, object.width || 100, object.height || 100);
-      if (ctx.lineWidth > 0) {
-        ctx.strokeRect(0, 0, object.width || 100, object.height || 100);
-      }
+      const width = object.width || 100;
+      const height = object.height || 100;
+      const radius = Math.max(0, object.borderRadius || 0);
+      drawRoundedRectPath(ctx, 0, 0, width, height, radius);
+      ctx.fill();
+      if (ctx.lineWidth > 0) ctx.stroke();
     }
   }
   // برای text objects