diff --git a/src/core/service/api/context/canvas.js b/src/core/service/api/context/canvas.js
index 9fdb55f2c49e20a255636c4e0db5a9162b095e07..6224ab38513effa4151cc2b5b68326c5cb1298b8 100644
--- a/src/core/service/api/context/canvas.js
+++ b/src/core/service/api/context/canvas.js
@@ -671,10 +671,17 @@ methods3.forEach(function (method) {
       case 'setFillStyle':
       case 'setStrokeStyle':
         return function (color) {
-          this.actions.push({
-            method,
-            data: ['normal', checkColor(color)]
-          })
+          if (typeof color !== 'object') {
+            this.actions.push({
+              method,
+              data: ['normal', checkColor(color)]
+            })
+          } else {
+            this.actions.push({
+              method,
+              data: [color.type, color.data, color.colorStop]
+            })
+          }
         }
       case 'setGlobalAlpha':
         return function (alpha) {
diff --git a/src/core/view/components/canvas/index.vue b/src/core/view/components/canvas/index.vue
index 80d1b227f6a4e1cf483cf0b04f59c9d06215a629..525a8b52f7c21c5eac1db1e40d2766161a8e6917 100644
--- a/src/core/view/components/canvas/index.vue
+++ b/src/core/view/components/canvas/index.vue
@@ -163,6 +163,7 @@ export default {
                 let color = resolveColor(data2[1])
                 LinearGradient.addColorStop(offset, color)
               })
+              color = LinearGradient
             } else if (data[0] === 'radial') {
               let x = data[1][0]
               let y = data[1][1]
@@ -173,6 +174,7 @@ export default {
                 let color = resolveColor(data2[1])
                 LinearGradient.addColorStop(offset, color)
               })
+              color = LinearGradient
             } else if (data[0] === 'pattern') {
               let loaded = this.checkImageLoaded(data[1], actions.slice(index + 1), callbackId,
                 function (image) {