add save-as-pdf functionality

Author: apsinghdev

client/src/components/Menu.jsx

@@ -1,18 +1,34 @@
 import MenuItem from "./MenuItem";
 import Socials from "./Socials";
 import SponsorBtn from "./SponsorBtn";
+import { useRecoilValue } from "recoil";
+import { canvasState, canvasColors } from "../atoms";
+import { jsPDF } from "jspdf";
 
 function Menu(){
 
-  function clickHandlerPdf(){
-    
+  const canvas = useRecoilValue(canvasState);
+  const canvasColor = useRecoilValue(canvasColors);
+
+  // function to save canvas as pdf
+  function saveAsPdf() {
+    const canvasDataURL = canvas.toDataURL("imgae/png");
+    const pdf = new jsPDF({
+      orientation: "landscape",
+      unit: "px",
+      format: [canvas.width, canvas.height],
+    });
+    pdf.setFillColor(canvasColor);
+    pdf.rect(0, 0, canvas.width, canvas.height, "F");
+    pdf.addImage(canvasDataURL, "PNG", 0, 0, canvas.width, canvas.height);
+    pdf.save("drawing.pdf");
   }
 
     return (
       <div className="w-52 h-71 rounded-xl bg-gradient-to-r from-slate-900 to-slate-700 absolute left-52 top-8 rounded-lg shadow-xl">
         <MenuItem feat="Start Collaboration"></MenuItem>
         <MenuItem feat="Start Chat"></MenuItem>
-        <MenuItem feat="Save as pdf" onClick={clickHandlerPdf}></MenuItem>
+        <MenuItem feat="Save as pdf" clickHandler={saveAsPdf}></MenuItem>
         <MenuItem feat="Save as png"></MenuItem>
         <SponsorBtn></SponsorBtn>
         <Socials></Socials>

client/src/components/MenuItem.jsx

@@ -1,12 +1,15 @@
 /* eslint-disable react/prop-types */
-function MenuItem(props){
-    return (
-      <div className="h-11 w-15 border-b border-dotted cursor-pointer content-center">
-        <h1 className="font-sans text-white justify-center flex">
-          {props.feat}
-        </h1>
-      </div>
-    );
+function MenuItem(props) {
+  return (
+    <div className="h-11 w-15 border-b border-dotted cursor-pointer content-center">
+      <h1
+        className="font-sans text-white hover:text-emerald-300 justify-center flex"
+        onClick={props.clickHandler}
+      >
+        {props.feat}
+      </h1>
+    </div>
+  );
 }
 
-export default MenuItem;
+export default MenuItem;