From 8eac20b9cbb8c855ea394ea11edc2ae48b54ed25 Mon Sep 17 00:00:00 2001
From: Junyu Zhou <feijifeibudao@gmail.com>
Date: Sat, 23 Sep 2023 17:51:14 +0800
Subject: [PATCH] fix(Signature): fix checking if canvas is empty when
 backgoundColor is set (#12304)

* fix(Signature): fix checking if canvas is empty when set background color

* fix(Signature): delete console and uncomment code

* chore(Signature): reuse setCanvasBgColor function

---------

Co-authored-by: Junyu Zhou <junyu@vivino.cn.com>
---
 packages/vant/src/signature/Signature.tsx | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/vant/src/signature/Signature.tsx b/packages/vant/src/signature/Signature.tsx
index 0a054ee9b..a96b27725 100644
--- a/packages/vant/src/signature/Signature.tsx
+++ b/packages/vant/src/signature/Signature.tsx
@@ -97,13 +97,19 @@ export default defineComponent({
       const empty = document.createElement('canvas');
       empty.width = canvas.width;
       empty.height = canvas.height;
+      if (props.backgroundColor) {
+        const emptyCtx = empty.getContext('2d');
+        setCanvasBgColor(emptyCtx);
+      }
       return canvas.toDataURL() === empty.toDataURL();
     };
 
-    const setCanvasBgColor = () => {
-      if (state.ctx && props.backgroundColor) {
-        state.ctx.fillStyle = props.backgroundColor;
-        state.ctx.fillRect(0, 0, state.width, state.height);
+    const setCanvasBgColor = (
+      ctx: CanvasRenderingContext2D | null | undefined,
+    ) => {
+      if (ctx && props.backgroundColor) {
+        ctx.fillStyle = props.backgroundColor;
+        ctx.fillRect(0, 0, state.width, state.height);
       }
     };
 
@@ -134,7 +140,7 @@ export default defineComponent({
       if (state.ctx) {
         state.ctx.clearRect(0, 0, state.width, state.height);
         state.ctx.closePath();
-        setCanvasBgColor();
+        setCanvasBgColor(state.ctx);
       }
       emit('clear');
     };
@@ -147,7 +153,7 @@ export default defineComponent({
 
         // ensure canvas is rendered
         nextTick(() => {
-          setCanvasBgColor();
+          setCanvasBgColor(state.ctx);
         });
       }
     });