background image scaling fixed, as per canvas size

src/components/AspectCanvas.jsx

@@ -48,12 +48,38 @@ export function AspectCanvas() {
     useEffect(() => {
         const updateCanvasSize = () => {
             if (canvasRef.current && canvas) {
-                canvas.setWidth(canvasRef?.current?.offsetWidth);
+                // Update canvas dimensions
-                canvas.setHeight(canvasRef?.current?.offsetHeight);
+                const newWidth = canvasRef?.current?.offsetWidth;
-                canvas.backgroundImage = null;
+                const newHeight = canvasRef?.current?.offsetHeight;
-                canvas.overlayImage = null;
+
+                canvas.setWidth(newWidth);
+                canvas.setHeight(newHeight);
+
+                // Adjust the background image to fit the updated canvas size
+                const bgImage = canvas.backgroundImage;
+                if (bgImage) {
+                    // Calculate scaling factors for width and height
+                    const scaleX = newWidth / bgImage.width;
+                    const scaleY = newHeight / bgImage.height;
+
+                    // Use the larger scale to cover the entire canvas
+                    const scale = Math.max(scaleX, scaleY);
+
+                    // Apply scale and position the image
+                    bgImage.scaleX = scale;
+                    bgImage.scaleY = scale;
+                    bgImage.left = 0; // Align left
+                    bgImage.top = 0;  // Align top
+
+                    // Update the background image
+                    canvas.setBackgroundImage(bgImage, canvas.renderAll.bind(canvas));
+                } else {
+                    // Render the canvas if no background image
                     canvas.renderAll();
                 }
+            }
+
+            // Handle responsive behavior for panels
             if (document.getElementById("root").offsetWidth <= 640) {
                 setLeftPanelOpen(false);
                 setRightPanelOpen(false);
@@ -62,7 +88,6 @@ export function AspectCanvas() {
                 }
             }
             if (document.getElementById("root").offsetWidth > 640) {
-                // setLeftPanelOpen(true);
                 if (openObjectPanel === true) {
                     setRightPanelOpen(true);
                 }
@@ -70,13 +95,26 @@ export function AspectCanvas() {
             if (document.getElementById("root").offsetWidth > 640) {
                 setOpenObjectPanel(false);
             }
-        }
+        };
 
-        updateCanvasSize()
+        // Initial setup
-        window.addEventListener('resize', updateCanvasSize)
+        updateCanvasSize();
 
-        return () => window.removeEventListener('resize', updateCanvasSize)
+        // Listen for window resize
-    }, [selectedRatio, canvasRef, canvas, openObjectPanel, setLeftPanelOpen, setOpenObjectPanel, setRightPanelOpen, rightPanelOpen])
+        window.addEventListener('resize', updateCanvasSize);
+
+        // Cleanup listener on unmount
+        return () => window.removeEventListener('resize', updateCanvasSize);
+    }, [
+        selectedRatio,
+        canvasRef,
+        canvas,
+        openObjectPanel,
+        setLeftPanelOpen,
+        setOpenObjectPanel,
+        setRightPanelOpen,
+        rightPanelOpen
+    ]);
 
     useEffect(() => {
         if (window.fabric) {
@@ -182,7 +220,7 @@ export function AspectCanvas() {
                                     </div>
                                 </TooltipTrigger>
                                 <TooltipContent side="bottom" className="max-w-xs">
-                                    <p>After changing the resolution, the canvas background image will reset.</p>
+                                    <p>Changing the canvas size.</p>
                                 </TooltipContent>
                             </Tooltip>
                         </TooltipProvider>

src/components/CanvasSetting.jsx

@@ -29,13 +29,37 @@ const CanvasSetting = () => {
             [key]: value,
         }));
 
-        // Use the value directly for canvas updates
+        // Update canvas dimensions
         if (key === 'width') {
-            canvas.setWidth(value);
+            canvas.setWidth(value); // Update canvas width
         } else if (key === 'height') {
-            canvas.setHeight(value);
+            canvas.setHeight(value); // Update canvas height
+        }
+
+        // Adjust the background image to fit the updated canvas
+        const bgImage = canvas.backgroundImage;
+        if (bgImage) {
+            const canvasWidth = canvas.width;
+            const canvasHeight = canvas.height;
+
+            // Calculate scaling factors for width and height
+            const scaleX = canvasWidth / bgImage.width;
+            const scaleY = canvasHeight / bgImage.height;
+
+            // Choose the larger scale to cover the entire canvas
+            const scale = Math.max(scaleX, scaleY);
+
+            // Apply the scale and center the image
+            bgImage.scaleX = scale;
+            bgImage.scaleY = scale;
+            bgImage.left = 0; // Align left
+            bgImage.top = 0;  // Align top
+
+            // Mark the background image as needing an update
+            canvas.setBackgroundImage(bgImage, canvas.renderAll.bind(canvas));
+        } else {
+            canvas.renderAll(); // Render if no background image
         }
-        canvas.renderAll();
     };
 
     const setBackgroundImage = (e) => {

src/components/EachComponent/Icons/AllIcons.jsx

@@ -1,6 +1,6 @@
 import { useContext, useState } from "react";
 import { FixedSizeGrid as Grid } from "react-window";
-import { Card, CardTitle } from "@/components/ui/card";
+import { Card, CardDescription, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import * as lucideIcons from "lucide-react";
 import CanvasContext from "@/components/Context/canvasContext/CanvasContext";
@@ -107,6 +107,7 @@ const AllIconsPage = () => {
     return (
         <Card className="flex flex-col px-2 py-2 gap-1 scrollbar-thin scrollbar-thumb-secondary scrollbar-track-white">
             <CardTitle className="flex items-center flex-wrap my-1">All Icons</CardTitle>
+            <CardDescription className="text-xs">All copyright (c) for Lucide are held by Lucide Contributors 2022.</CardDescription>
             <Input
                 type="text"
                 placeholder="Search icons..."

src/components/Layouts/SheetRightPanel.jsx

@@ -60,7 +60,7 @@ const SheetRightPanel = () => {
                 <div className="my-2 mb-14">
                     <Separator className="my-2" />
                     {
-                        open ? <CustomizeShape /> : <p className='text-sm font-semibold text-primary'>No active object found</p>
+                        open ? <CustomizeShape /> : <p className='text-sm font-semibold'>No active object found</p>
                     }
                 </div>
             </SheetContent>