diff --git a/examples/index.tsx b/examples/index.tsx
index 39b522e..f7918cd 100644
--- a/examples/index.tsx
+++ b/examples/index.tsx
@@ -7,19 +7,19 @@ import { CropperBox, CropperBoxDataMap } from '../dist';
 import { CropperCursorMode } from '../src/types';
 
 const initialBoxes = [
-  { x: -178, y: -191, width: 120, height: 178, id: 'SJxb6YpuG', rotation: 0 },
-  { x: -87, y: -183, width: 69, height: 234, id: 'V-iSOh80u', rotation: -46 },
-  { x: -51, y: -162, width: 67, height: 269, id: '7_sRCTJdI', rotation: -116 },
-  { x: -118, y: -219, width: 78, height: 331, id: 'LkZ7r33rk', rotation: -222 },
-  { x: -193, y: -206, width: 71, height: 377, id: 'HDFMSvIDX', rotation: -241 },
-  { x: -215, y: -180, width: 77, height: 339, id: 'v-3TX_fom', rotation: -297 },
+  { x: -178, y: -191, originX: -178, originY: -191, width: 120, height: 178, id: 'SJxb6YpuG', rotation: 0 },
+  { x: -87, y: -183,  originX: -87, originY: -183, width: 69, height: 234, id: 'V-iSOh80u', rotation: -46 },
+  { x: -51, y: -162,  originX: -51, originY: -162, width: 67, height: 269, id: '7_sRCTJdI', rotation: -116 },
+  { x: -118, y: -219, width: 78, originX: -118, originY: -219, height: 331, id: 'LkZ7r33rk', rotation: -222 },
+  { x: -193, y: -206, width: 71, originX: -193, originY: -206, height: 377, id: 'HDFMSvIDX', rotation: -241 },
+  { x: -215, y: -180, width: 77, originX: -215, originY: -180, height: 339, id: 'v-3TX_fom', rotation: -297 },
 ];
 
 const App = () => {
   const [images, setImages] = useState([img1, img2]);
   const [zoom, setZoom] = useState(1.0);
   const [rotation, setRotation] = useState(0);
-  const [cursorMode, setCursorMode] = useState<CropperCursorMode>('pan');
+  const [cursorMode, setCursorMode] = useState<CropperCursorMode>('draw');
   const [boxes, setBoxes] = useState<CropperBox[]>(initialBoxes);
 
   const [imageMap, setImageMap] = useState<CropperBoxDataMap>({});
diff --git a/src/components/Crop.tsx b/src/components/Crop.tsx
index b3af39c..ae896ee 100644
--- a/src/components/Crop.tsx
+++ b/src/components/Crop.tsx
@@ -134,11 +134,10 @@ const FourDivs = (
 );
 
 const cropStyle = (box: CropperBox, style: CSSProperties): CSSProperties => {
-  const { x, y, width, height } = box;
-
+  const { x, y, width, height, originX, originY } = box;
   return {
     ...style,
-    transformOrigin: `${-box.x}px ${-box.y}px`,
+    transformOrigin: `${-originX}px ${-originY}px`,
     boxShadow: '0 0 0 2px #000',
     background: '#FFFFFF33',
     position: 'absolute',
diff --git a/src/components/MultiCrops.tsx b/src/components/MultiCrops.tsx
index b74277b..ee3b7ee 100644
--- a/src/components/MultiCrops.tsx
+++ b/src/components/MultiCrops.tsx
@@ -175,6 +175,8 @@ const MultiCrops: FC<CropperProps> = ({
       const box = {
         x: Math.min(pointA.current.x, pointB.x),
         y: Math.min(pointA.current.y, pointB.y),
+        originX: Math.min(pointA.current.x, pointB.x),
+        originY: Math.min(pointA.current.y, pointB.y),
         width: Math.abs(pointA.current.x - pointB.x),
         height: Math.abs(pointA.current.y - pointB.y),
         id: id.current,
diff --git a/src/types.ts b/src/types.ts
index e0ebd57..8fb4a19 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -10,6 +10,8 @@ export type CropperBoxId = string;
 export type CropperBox = {
   x: number;
   y: number;
+  originX: number;
+  originY: number;
   width: number;
   height: number;
   id: CropperBoxId;