From c36025edfec3849429fe78e6612abcce0cc0d4f4 Mon Sep 17 00:00:00 2001
From: plainheart <yhen@all-my-life.cn>
Date: Mon, 12 Jul 2021 10:19:47 +0800
Subject: [PATCH 1/2] fix(canvas): fix unexpected `none` or `null` value for
 ctx.strokeStyle & ctx.fillStyle, resolves apache/echarts#15238.

---
 src/canvas/graphic.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/canvas/graphic.ts b/src/canvas/graphic.ts
index 834725cef..88502d9ae 100644
--- a/src/canvas/graphic.ts
+++ b/src/canvas/graphic.ts
@@ -20,9 +20,9 @@ import { REDARAW_BIT, SHAPE_CHANGED_BIT } from '../graphic/constants';
 const pathProxyForDraw = new PathProxy(true);
 
 // Not use el#hasStroke because style may be different.
-function styleHasStroke(style: PathStyleProps) {
+function styleHasStroke(style: PathStyleProps, excludeLineWidth?: boolean) {
     const stroke = style.stroke;
-    return !(stroke == null || stroke === 'none' || !(style.lineWidth > 0));
+    return stroke != null && stroke !== 'none' && (excludeLineWidth || style.lineWidth > 0);
 }
 
 function styleHasFill(style: PathStyleProps) {
@@ -459,14 +459,14 @@ function bindPathAndTextCommonStyle(
             flushPathDrawn(ctx, scope);
             styleChanged = true;
         }
-        ctx.fillStyle = style.fill as string;
+        ctx.fillStyle = styleHasFill(style) ? style.fill : '';
     }
     if (forceSetAll || style.stroke !== prevStyle.stroke) {
         if (!styleChanged) {
             flushPathDrawn(ctx, scope);
             styleChanged = true;
         }
-        ctx.strokeStyle = style.stroke as string;
+        ctx.strokeStyle = styleHasStroke(style, true) ? style.stroke : '';
     }
     if (forceSetAll || style.opacity !== prevStyle.opacity) {
         if (!styleChanged) {

From bb4a97814b4a55b3e2e9afc2e9997f14b5387dbf Mon Sep 17 00:00:00 2001
From: plainheart <yhen@all-my-life.cn>
Date: Thu, 15 Jul 2021 18:05:06 +0800
Subject: [PATCH 2/2] fix(canvas): check if stroke/fill color is valid before
 setting strokeStyle/fillStyle.

---
 src/canvas/graphic.ts | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/canvas/graphic.ts b/src/canvas/graphic.ts
index 88502d9ae..41c7aa2f4 100644
--- a/src/canvas/graphic.ts
+++ b/src/canvas/graphic.ts
@@ -20,9 +20,17 @@ import { REDARAW_BIT, SHAPE_CHANGED_BIT } from '../graphic/constants';
 const pathProxyForDraw = new PathProxy(true);
 
 // Not use el#hasStroke because style may be different.
-function styleHasStroke(style: PathStyleProps, excludeLineWidth?: boolean) {
+function styleHasStroke(style: PathStyleProps) {
     const stroke = style.stroke;
-    return stroke != null && stroke !== 'none' && (excludeLineWidth || style.lineWidth > 0);
+    return !(stroke == null || stroke === 'none' || !(style.lineWidth > 0));
+}
+
+// ignore lineWidth and must be string
+// Expected color but found '[' when color is gradient
+function isValidStrokeFillStyle(
+    strokeOrFill: PathStyleProps['stroke'] | PathStyleProps['fill']
+): strokeOrFill is string {
+    return strokeOrFill != null && strokeOrFill !== 'none' && typeof strokeOrFill === 'string';
 }
 
 function styleHasFill(style: PathStyleProps) {
@@ -459,14 +467,14 @@ function bindPathAndTextCommonStyle(
             flushPathDrawn(ctx, scope);
             styleChanged = true;
         }
-        ctx.fillStyle = styleHasFill(style) ? style.fill : '';
+        isValidStrokeFillStyle(style.fill) && (ctx.fillStyle = style.fill);
     }
     if (forceSetAll || style.stroke !== prevStyle.stroke) {
         if (!styleChanged) {
             flushPathDrawn(ctx, scope);
             styleChanged = true;
         }
-        ctx.strokeStyle = styleHasStroke(style, true) ? style.stroke : '';
+        isValidStrokeFillStyle(style.stroke) && (ctx.strokeStyle = style.stroke);
     }
     if (forceSetAll || style.opacity !== prevStyle.opacity) {
         if (!styleChanged) {