Export

client/package.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/src/components/Canvas.jsx

@@ -5,6 +5,8 @@ import { StrokeControl } from "./StrokeControl";
 import { toast } from "sonner";
 import { io } from "socket.io-client";
 import tinycolor from "tinycolor2";
+import { jsPDF } from "jspdf";
+import C2S from "canvas2svg";
 
 export const Canvas = () => {
   const canvasRef = useRef(null);
@@ -554,6 +556,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) */}
@@ -612,6 +656,7 @@ export const Canvas = () => {
         activeTool={activeTool}
         onToolChange={handleToolChange}
         onClear={handleClear}
+        onExport={handleExport}
       />
       {joined ? (
         <button

client/src/components/Toolbar.jsx

@@ -27,6 +27,10 @@ export const Toolbar = ({ activeTool, onToolChange, onClear, onExport }) => {
 
   ];
 
+  const handleExport = (format) => {
+    onExport(format);
+  }
+
   const brushTypes = [
     {
       id: "solid",
@@ -142,20 +146,20 @@ 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>
         </DropdownMenu>
       </div>
     </div>
   );
-};
+};