implement save-as-png feature

Author: apsinghdev

client/src/components/Menu.jsx

@@ -6,13 +6,12 @@ import { canvasState, canvasColors } from "../atoms";
 import { jsPDF } from "jspdf";
 
 function Menu(){
-
   const canvas = useRecoilValue(canvasState);
   const canvasColor = useRecoilValue(canvasColors);
 
   // function to save canvas as pdf
   function saveAsPdf() {
-    const canvasDataURL = canvas.toDataURL("imgae/png");
+    const canvasDataURL = canvas.toDataURL("image/png");
     const pdf = new jsPDF({
       orientation: "landscape",
       unit: "px",
@@ -24,16 +23,40 @@ function Menu(){
     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" clickHandler={saveAsPdf}></MenuItem>
-        <MenuItem feat="Save as png"></MenuItem>
-        <SponsorBtn></SponsorBtn>
-        <Socials></Socials>
-      </div>
-    );
+  // function to save canvas as pdf
+  function saveAsPng() {
+
+    // create a temporary canvas to make a png
+    const tempCanvas = document.createElement('canvas');
+    const tempCanvasCtx = tempCanvas.getContext('2d');
+
+    tempCanvas.width = canvas.width;
+    tempCanvas.height = canvas.height;
+
+    tempCanvasCtx.fillStyle = canvasColor;
+    tempCanvasCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);
+    tempCanvasCtx.drawImage(canvas, 0, 0);
+
+
+    const canvasDataURL = tempCanvas.toDataURL("image/png");
+    const link = document.createElement("a");
+    link.href = canvasDataURL;
+    link.download = "drawing.png";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+
+  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" clickHandler={saveAsPdf}></MenuItem>
+      <MenuItem feat="Save as png" clickHandler={saveAsPng}></MenuItem>
+      <SponsorBtn></SponsorBtn>
+      <Socials></Socials>
+    </div>
+  );
 }
 
 export default Menu;