feat(export): add export functionality for canvas as PNG, SVG, and PDF

Author: Shreyanshi210205

client/package-lock.json

@@ -14,6 +14,7 @@
     "@radix-ui/react-slider": "^1.3.6",
     "@tailwindcss/vite": "^4.1.14",
     "axios": "^1.12.2",
+    "canvas2svg": "^1.0.16",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "jspdf": "^3.0.3",

client/package.json

@@ -4,6 +4,12 @@ import { ColorPicker } from "./ColorPicker";
 import { StrokeControl } from "./StrokeControl";
 import { toast } from "sonner";
 import { io } from "socket.io-client";
+<<<<<<< Updated upstream
+=======
+import tinycolor from "tinycolor2";
+import { jsPDF } from "jspdf";
+import C2S from "canvas2svg";
+>>>>>>> Stashed changes
 
 export const Canvas = () => {
   const canvasRef = useRef(null);
@@ -453,6 +459,48 @@ export const Canvas = () => {
     return "cursor-crosshair";
   };
 
+ const handleExport = (format) => {
+  const canvas = canvasRef.current;
+  if (!canvas) return;
+
+  switch (format) {
+    case "png": {
+      const link = document.createElement("a");
+      link.download = "canvas.png";
+      link.href = canvas.toDataURL("image/png");
+      link.click();
+      break;
+    }
+
+    case "pdf": {
+      const pdf = new jsPDF({
+        orientation: "landscape",
+        unit: "px",
+        format: [canvas.width, canvas.height],
+      });
+      const imgData = canvas.toDataURL("image/png");
+      pdf.addImage(imgData, "PNG", 0, 0, canvas.width, canvas.height);
+      pdf.save("canvas.pdf");
+      break;
+    }
+
+    case "svg": {
+       const svgCtx = new C2S(canvas.width, canvas.height);
+    const svgData = svgCtx.getSerializedSvg();
+    const blob = new Blob([svgData], { type: "image/svg+xml" });
+    const link = document.createElement("a");
+    link.download = "canvas.svg";
+    link.href = URL.createObjectURL(blob);
+    link.click();
+      break;
+    }
+
+    default:
+      console.warn("Unsupported format:", format);
+  }
+};
+
+
   return (
     <div className="relative w-full h-screen overflow-hidden bg-canvas">
       {/* 🔹 Login / Logout buttons (Unchanged) */}
@@ -511,6 +559,7 @@ export const Canvas = () => {
         activeTool={activeTool}
         onToolChange={handleToolChange}
         onClear={handleClear}
+        onExport={handleExport}
       />
       {joined ? (
         <button

client/src/components/Canvas.jsx

@@ -23,6 +23,50 @@ export const Toolbar = ({ activeTool, onToolChange, onClear, onExport }) => {
     { type: "rectangle", icon: Square },
     { type: "circle", icon: Circle },
     { type: "line", icon: Minus },
+<<<<<<< Updated upstream
+=======
+    
+  ];
+
+  const handleExport = (format) => {
+    onExport(format);
+  }
+
+  const brushTypes = [
+    {
+      id: "solid",
+      label: "Solid",
+      preview: <div className="w-10 h-1 bg-black rounded-full"></div>,
+    },
+    {
+      id: "dashed",
+      label: "Dashed",
+      preview: (
+        <div className="w-10 h-1 border-b-2 border-dashed border-black"></div>
+      ),
+    },
+    {
+      id: "paint",
+      label: "Paint",
+      preview: (
+        <div className="w-10 h-2 bg-gradient-to-r from-blue-500 to-pink-500 rounded-full opacity-80 blur-[1px]"></div>
+      ),
+    },
+    {
+      id: "crayon",
+      label: "Crayon",
+      preview: (
+        <div className="w-10 h-1 bg-black/70 rounded-sm shadow-[0_0_3px_1px_rgba(0,0,0,0.3)]"></div>
+      ),
+    },
+    {
+      id: "oil-pastel",
+      label: "Oil Pastel",
+      preview: (
+        <div className="w-10 h-2 bg-gradient-to-r from-yellow-400 via-red-400 to-purple-400 rounded-full blur-[0.5px] opacity-90"></div>
+      ),
+    },
+>>>>>>> Stashed changes
   ];
 
   return (
@@ -75,15 +119,15 @@ export const Toolbar = ({ activeTool, onToolChange, onClear, onExport }) => {
             </Button>
           }
         >
-          <DropdownMenuItem onClick={() => onExport("png")}>
+          <DropdownMenuItem onClick={() => handleExport("png")}>
             <FileImage className="h-4 w-4" />
             Export as PNG
           </DropdownMenuItem>
-          <DropdownMenuItem onClick={() => onExport("svg")}>
+          <DropdownMenuItem onClick={() => handleExport("svg")}>
             <FileType className="h-4 w-4" />
             Export as SVG
           </DropdownMenuItem>
-          <DropdownMenuItem onClick={() => onExport("pdf")}>
+          <DropdownMenuItem onClick={() => handleExport("pdf")}>
             <FileType className="h-4 w-4" />
             Export as PDF
           </DropdownMenuItem>