diff --git a/packages/core/src/customs/ellipse.ts b/packages/core/src/customs/ellipse.ts
index 2489f1db..7465185a 100644
--- a/packages/core/src/customs/ellipse.ts
+++ b/packages/core/src/customs/ellipse.ts
@@ -1,9 +1,20 @@
-import { Ellipse } from 'fabric';
+import { BaseFabricObject, Ellipse } from 'fabric';
 
 export class PEllipse extends Ellipse {
+  public id: string;
+
+  constructor(options: Partial<Ellipse> & { id: string }) {
+    super(options);
+    this.id = options.id;
+  }
+
   public render(ctx: CanvasRenderingContext2D): void {
     super.render(ctx);
   }
+
+  public toJSON(): BaseFabricObject {
+    return { ...super.toJSON(), id: this.id };
+  }
 }
 
 export default PEllipse;
diff --git a/packages/core/src/customs/polyline.ts b/packages/core/src/customs/polyline.ts
index 17aca8f8..ada1549a 100644
--- a/packages/core/src/customs/polyline.ts
+++ b/packages/core/src/customs/polyline.ts
@@ -1,6 +1,13 @@
-import { Control, Point, Polyline, TPointerEvent, util } from 'fabric';
+import { BaseFabricObject, Control, Point, Polyline, TPointerEvent, util, XY } from 'fabric';
 
 export class PPolyline extends Polyline {
+  public id?: string;
+
+  constructor(points?: XY[], options?: Partial<Polyline> & { id: string }) {
+    super(points, options);
+    this.id = options?.id;
+  }
+
   public onSelect(options: { e?: TPointerEvent | undefined }): boolean {
     const points = this.points ?? [];
     this.controls = points.reduce<Record<string, Control>>(
@@ -43,6 +50,10 @@ export class PPolyline extends Polyline {
   public render(ctx: CanvasRenderingContext2D): void {
     super.render(ctx);
   }
+
+  public toJSON(): BaseFabricObject {
+    return { ...super.toJSON(), id: this.id };
+  }
 }
 
 export default PPolyline;
diff --git a/packages/core/src/customs/rect.ts b/packages/core/src/customs/rect.ts
index 68a287e2..7f19592a 100644
--- a/packages/core/src/customs/rect.ts
+++ b/packages/core/src/customs/rect.ts
@@ -1,9 +1,20 @@
-import { Rect } from 'fabric';
+import { BaseFabricObject, Rect } from 'fabric';
 
 export class PRect extends Rect {
+  public id: string;
+
+  constructor(options: Partial<Rect> & { id: string }) {
+    super(options);
+    this.id = options.id;
+  }
+
   public render(ctx: CanvasRenderingContext2D): void {
     super.render(ctx);
   }
+
+  public toJSON(): BaseFabricObject {
+    return { ...super.toJSON(), id: this.id };
+  }
 }
 
 export default PRect;
diff --git a/packages/core/src/customs/triangle.ts b/packages/core/src/customs/triangle.ts
index ad901329..452b3f3f 100644
--- a/packages/core/src/customs/triangle.ts
+++ b/packages/core/src/customs/triangle.ts
@@ -1,9 +1,20 @@
-import { Triangle } from 'fabric';
+import { BaseFabricObject, Triangle } from 'fabric';
 
 export class PTriangle extends Triangle {
+  public id: string;
+
+  constructor(options: Partial<Triangle> & { id: string }) {
+    super(options);
+    this.id = options.id;
+  }
+
   public render(ctx: CanvasRenderingContext2D): void {
     super.render(ctx);
   }
+
+  public toJSON(): BaseFabricObject {
+    return { ...super.toJSON(), id: this.id };
+  }
 }
 
 export default PTriangle;
diff --git a/packages/core/src/tools/ellipse-tool.ts b/packages/core/src/tools/ellipse-tool.ts
index cd593551..5ca8901f 100644
--- a/packages/core/src/tools/ellipse-tool.ts
+++ b/packages/core/src/tools/ellipse-tool.ts
@@ -15,6 +15,7 @@ class EllipseTool implements Tool {
     app.canvas.selection = false;
     this.startPointer = app.pointer;
     this.ellipse = new PEllipse({
+      id: Date.now().toString(),
       left: this.startPointer.x,
       top: this.startPointer.y,
       rx: 0,
diff --git a/packages/core/src/tools/polyline-tool.ts b/packages/core/src/tools/polyline-tool.ts
index 0db91ac2..204daff8 100644
--- a/packages/core/src/tools/polyline-tool.ts
+++ b/packages/core/src/tools/polyline-tool.ts
@@ -21,6 +21,7 @@ class PolylineTool implements Tool {
       this.polyline.set({ points: this.points });
     } else {
       this.polyline = new PPolyline(this.points, {
+        id: Date.now().toString(),
         fill: 'transparent',
         stroke: 'black',
         strokeWidth: 2,
diff --git a/packages/core/src/tools/rect-tool.ts b/packages/core/src/tools/rect-tool.ts
index 5275f9bb..bb6ca138 100644
--- a/packages/core/src/tools/rect-tool.ts
+++ b/packages/core/src/tools/rect-tool.ts
@@ -15,6 +15,7 @@ class RectTool implements Tool {
     app.canvas.selection = false;
     this.startPointer = app.pointer;
     this.rectangle = new PRect({
+      id: Date.now().toString(),
       left: this.startPointer.x,
       top: this.startPointer.y,
       width: 10,
@@ -23,6 +24,7 @@ class RectTool implements Tool {
       stroke: 'black',
       strokeWidth: 2,
     });
+    this.rectangle.set({ id: Date.now() });
     app.canvas.add(this.rectangle);
   }
 
diff --git a/packages/core/src/tools/triangle-tool.ts b/packages/core/src/tools/triangle-tool.ts
index 2965fa96..e8c5269a 100644
--- a/packages/core/src/tools/triangle-tool.ts
+++ b/packages/core/src/tools/triangle-tool.ts
@@ -15,6 +15,7 @@ class TriangleTool implements Tool {
     app.canvas.selection = false;
     this.startPointer = app.pointer;
     this.triangle = new PTriangle({
+      id: Date.now().toString(),
       top: this.startPointer.y,
       left: this.startPointer.x,
       width: 0,