🐛 fix(app): use canvg for png download

package.json

@@ -12,7 +12,7 @@
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@mui/material": "^6.1.4",
-    "html-to-image": "^1.11.11",
+    "canvg": "^4.0.2",
     "next": "^14.2.15",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

pages/index.tsx

@@ -16,7 +16,7 @@ import tinycolor from "tinycolor2";
 import Toolbar from "@mui/material/Toolbar";
 import type { NextPage } from "next";
 import Typography from "@mui/material/Typography";
-import { toPng } from "html-to-image";
+import { Canvg } from 'canvg';
 
 import {
   drawCross,
@@ -208,18 +208,31 @@ const Home: NextPage = () => {
   // Download PNG
   const downloadPNG = () => {
     if (!svgContainerRef.current) return;
+    const svgElement = svgContainerRef.current.querySelector("svg");
+    if (!svgElement) return;
 
-    toPng(svgContainerRef.current)
-      .then((dataUrl) => {
-        const link = document.createElement("a");
-        link.href = dataUrl;
-        link.download = "grid-art.png";
-        link.click();
-      })
-      .catch((err) => {
-        console.error("Error downloading PNG", err);
-      });
-  };
+    // Create a canvas element
+    const canvas = document.createElement('canvas');
+    canvas.width = svgElement.width.baseVal.value;
+    canvas.height = svgElement.height.baseVal.value;
+
+    // Get context and use Canvg to draw the SVG into the canvas
+    const ctx = canvas.getContext('2d');
+    if (ctx) {
+      const svgData = new XMLSerializer().serializeToString(svgElement);
+      const canvgInstance = Canvg.fromString(ctx, svgData);
+
+      canvgInstance.start()
+        // Now you can use the canvas as PNG
+        const pngData = canvas.toDataURL('image/png');
+
+        // Create a download link
+        const downloadLink = document.createElement('a');
+        downloadLink.href = pngData;
+        downloadLink.download = 'grid-art.png';
+        downloadLink.click();
+    }
+  }
 
   return (
     <>

src/blockDesign.tsx

@@ -179,8 +179,7 @@ export function drawLetterBlock(x: number, y: number, foreground: string, backgr
   group.rect(squareSize, squareSize).fill(background).move(x, y);
 
   // Draw Foreground
-  const character = diwakoStyle ? random(["D", "I", "W", "A", "K", "O"]): random(selectedCharacters);
-  //const character = selectedCharacters.splice(Math.floor(Math.random()), 1);
+  const character = random(selectedCharacters);
   const text = group.plain(character);
   text.font({
     family: "Source Code Pro",