all added

src/components/AspectCanvas.jsx

@@ -31,7 +31,7 @@ export function AspectCanvas() {
     const { setLeftPanelOpen, setRightPanelOpen, setOpenPanel, setCaptureOpen, setOpenSetting, openObjectPanel, setOpenObjectPanel, rightPanelOpen } = useContext(OpenContext);
     const [selectedRatio, setSelectedRatio] = useState("4:3");
 
-    const { canvasRef, canvas, setCanvas, fabricCanvasRef } = useContext(CanvasContext);
+    const { canvasRef, canvas, setCanvas, fabricCanvasRef, setCanvasHeight, setCanvasWidth } = useContext(CanvasContext);
 
     useEffect(() => {
         import('fabric').then((fabricModule) => {
@@ -53,6 +53,8 @@ export function AspectCanvas() {
 
                 canvas.setWidth(newWidth);
                 canvas.setHeight(newHeight);
+                setCanvasWidth(newWidth);
+                setCanvasHeight(newHeight);
 
                 // Adjust the background image to fit the updated canvas size
                 const bgImage = canvas.backgroundImage;
@@ -97,6 +99,8 @@ export function AspectCanvas() {
         // Cleanup listener on unmount
         return () => window.removeEventListener('resize', updateCanvasSize);
     }, [
+        setCanvasWidth,
+        setCanvasHeight,
         selectedRatio,
         canvasRef,
         canvas,

src/components/CanvasSetting.jsx

@@ -14,7 +14,7 @@ import { ScrollArea } from './ui/scroll-area';
 import RndComponent from './Layouts/RndComponent';
 
 const CanvasSetting = () => {
-    const { canvas } = useContext(CanvasContext);
+    const { canvas, canvasHeight, canvasWidth } = useContext(CanvasContext);
     const { setOpenSetting } = useContext(OpenContext);
     const bgImgRef = useRef(null);
 
@@ -248,7 +248,9 @@ const CanvasSetting = () => {
                                     type="number"
                                     value={canvasSettings.width}
                                     onChange={(e) => {
+                                        if (canvasWidth > parseInt(e.target.value)) {
                                             handleChange('width', parseInt(e.target.value, 10));
+                                        }
                                     }}
                                 />
                             </div>
@@ -262,7 +264,9 @@ const CanvasSetting = () => {
                                     type="number"
                                     value={canvasSettings.height}
                                     onChange={(e) => {
+                                        if (canvasHeight > parseInt(e.target.value)) {
                                             handleChange('height', parseInt(e.target.value, 10));
+                                        }
                                     }}
                                 />
                             </div>

src/components/Context/canvasContext/CanvasContextProvider.jsx

@@ -4,10 +4,12 @@ import CanvasContext from './CanvasContext';
 const CanvasContextProvider = ({ children }) => {
     const canvasRef = useRef(null);
     const [canvas, setCanvas] = useState(null);
+    const [canvasHeight, setCanvasHeight] = useState(0);
+    const [canvasWidth, setCanvasWidth] = useState(0);
     const fabricCanvasRef = useRef(null);
 
     return (
-        <CanvasContext.Provider value={{ canvasRef, canvas, setCanvas, fabricCanvasRef }}>
+        <CanvasContext.Provider value={{ canvasRef, canvas, setCanvas, fabricCanvasRef, canvasHeight, setCanvasHeight, canvasWidth, setCanvasWidth }}>
             {children}
         </CanvasContext.Provider>
     )