brr

src/components/canvas.jsx

@@ -241,7 +241,8 @@ export default function Canvas(props) {
           onMouseMove={handleMouseMove}
           onMouseDown={handleMouseDown}
           onMouseUp={handleMouseUp}
-          style={{ width: "100%", height: "100%", cursor: cursor }}
+          style={{ width: "100%", height: "100%", cursor: cursor, backgroundColor:"white" }}
+          
         >
           <defs>
             <pattern
@@ -264,7 +265,7 @@ export default function Canvas(props) {
           </defs>
           <rect
             x="0"
-            y="0"
+            y="0" 
             width="100%"
             height="100%"
             fill="url(#pattern-circles)"

src/components/editor_panel.jsx

@@ -6,7 +6,7 @@ import { sql } from "@codemirror/lang-sql";
 import { tags as t } from "@lezer/highlight";
 import Shape from "./shape";
 import { saveAs } from "file-saver";
-import html2canvas from "html2canvas";
+import { toPng } from "html-to-image";
 import { Parser } from "node-sql-parser";
 import { Tabs } from "@douyinfe/semi-ui";
 import "react-resizable/css/styles.css";
@@ -165,10 +165,8 @@ const EditorPanel = (props) => {
         <br />
         <button
           onClick={() => {
-            html2canvas(document.getElementById("canvas")).then((canvas) => {
-              canvas.toBlob((blob) => {
-                saveAs(blob, "image.png");
-              });
+            toPng(document.getElementById("canvas")).then(function (dataUrl) {
+              saveAs(dataUrl, "canvas.png");
             });
           }}
         >