diff --git a/package-lock.json b/package-lock.json
index 4d72d00..ec2e4f2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,7 +19,7 @@
         "@uiw/react-codemirror": "^4.20.2",
         "codemirror": "^5.65.13",
         "file-saver": "^2.0.5",
-        "html2canvas": "^1.4.1",
+        "html-to-image": "^1.11.11",
         "node-sql-parser": "^4.7.0",
         "react": "^18.2.0",
         "react-dnd": "^16.0.1",
@@ -5842,14 +5842,6 @@
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
-    "node_modules/base64-arraybuffer": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
-      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
-      "engines": {
-        "node": ">= 0.6.0"
-      }
-    },
     "node_modules/batch": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
@@ -6709,14 +6701,6 @@
         "postcss": "^8.4"
       }
     },
-    "node_modules/css-line-break": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
-      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
-      "dependencies": {
-        "utrie": "^1.0.2"
-      }
-    },
     "node_modules/css-loader": {
       "version": "6.8.1",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.8.1.tgz",
@@ -9413,6 +9397,11 @@
         "node": ">=12"
       }
     },
+    "node_modules/html-to-image": {
+      "version": "1.11.11",
+      "resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.11.tgz",
+      "integrity": "sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA=="
+    },
     "node_modules/html-webpack-plugin": {
       "version": "5.5.3",
       "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.3.tgz",
@@ -9435,18 +9424,6 @@
         "webpack": "^5.20.0"
       }
     },
-    "node_modules/html2canvas": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
-      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
-      "dependencies": {
-        "css-line-break": "^2.1.0",
-        "text-segmentation": "^1.0.3"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
     "node_modules/htmlparser2": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
@@ -16998,14 +16975,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/text-segmentation": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
-      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
-      "dependencies": {
-        "utrie": "^1.0.2"
-      }
-    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -17450,14 +17419,6 @@
         "node": ">= 0.4.0"
       }
     },
-    "node_modules/utrie": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
-      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
-      "dependencies": {
-        "base64-arraybuffer": "^1.0.2"
-      }
-    },
     "node_modules/uuid": {
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
diff --git a/package.json b/package.json
index 74374fd..6c9052a 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
     "@uiw/react-codemirror": "^4.20.2",
     "codemirror": "^5.65.13",
     "file-saver": "^2.0.5",
-    "html2canvas": "^1.4.1",
+    "html-to-image": "^1.11.11",
     "node-sql-parser": "^4.7.0",
     "react": "^18.2.0",
     "react-dnd": "^16.0.1",
diff --git a/src/components/canvas.jsx b/src/components/canvas.jsx
index b5825d0..911d8f7 100644
--- a/src/components/canvas.jsx
+++ b/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)"
diff --git a/src/components/editor_panel.jsx b/src/components/editor_panel.jsx
index 0b0b74f..a8e0220 100644
--- a/src/components/editor_panel.jsx
+++ b/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");
             });
           }}
         >