From cf52828c22e88de5a16aae31cd7f34a56b3dd77e Mon Sep 17 00:00:00 2001
From: Hari-krishna-tech <jvenkadam@gmail.com>
Date: Tue, 7 Jan 2025 20:48:03 +0530
Subject: [PATCH] added transparent background feature

---
 src/app/(tools)/square-image/square-tool.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/app/(tools)/square-image/square-tool.tsx b/src/app/(tools)/square-image/square-tool.tsx
index 8264309..bfe0fa9 100644
--- a/src/app/(tools)/square-image/square-tool.tsx
+++ b/src/app/(tools)/square-image/square-tool.tsx
@@ -16,7 +16,7 @@ function SquareToolCore(props: { fileUploaderProps: FileUploaderResult }) {
     props.fileUploaderProps;
 
   const [backgroundColor, setBackgroundColor] = useLocalStorage<
-    "black" | "white"
+    "black" | "white" | "transparent"
   >("squareTool_backgroundColor", "white");
 
   const [squareImageContent, setSquareImageContent] = useState<string | null>(
@@ -34,8 +34,12 @@ function SquareToolCore(props: { fileUploaderProps: FileUploaderResult }) {
       if (!ctx) return;
 
       // Fill background
-      ctx.fillStyle = backgroundColor;
-      ctx.fillRect(0, 0, size, size);
+      if (backgroundColor === "transparent") {
+        ctx.clearRect(0, 0, size, size);
+      } else {
+        ctx.fillStyle = backgroundColor;
+        ctx.fillRect(0, 0, size, size);
+      }
 
       // Load and center the image
       const img = new Image();
@@ -108,7 +112,7 @@ function SquareToolCore(props: { fileUploaderProps: FileUploaderResult }) {
 
       <OptionSelector
         title="Background Color"
-        options={["white", "black"]}
+        options={["white", "black", "transparent"]}
         selected={backgroundColor}
         onChange={setBackgroundColor}
         formatOption={(option) =>