diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md
index 807122809834e844ae1f2ded1c70f49141b7514a..ff5adb501d0d7e1e3b8b4e7ced3e74c05ec9a3dc 100644
--- a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md
@@ -35,9 +35,9 @@ export default {
     const el =this.$refs.canvas;
     const ctx = el.getContext('2d');
     const gradient = ctx.createLinearGradient(50,0,300,100);
-    gradient.addColorStop(0.0, 'red')
-    gradient.addColorStop(0.5, 'white')
-    gradient.addColorStop(1.0, 'green')
+    gradient.addColorStop(0.0, '#ff0000')
+    gradient.addColorStop(0.5, '#ffffff')
+    gradient.addColorStop(1.0, '#00ff00')
     ctx.fillStyle = gradient
     ctx.fillRect(0, 0, 300, 300)
   }
diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
index ecae9a9fba09726ebf36874ae86605c0c9eea964..04af8c3d1d9d1ed06e2d2059f66b8207ad230c35 100644
--- a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
@@ -1681,9 +1681,9 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): Object
       // Linear gradient: start(50,0) end(300,100)
       var gradient = ctx.createLinearGradient(50,0, 300,100);
       // Add three color stops
-      gradient.addColorStop(0.0, 'red');
-      gradient.addColorStop(0.5, 'white');
-      gradient.addColorStop(1.0, 'green');
+      gradient.addColorStop(0.0, '#ff0000');
+      gradient.addColorStop(0.5, '#ffffff');
+      gradient.addColorStop(1.0, '#00ff00');
       // Set the fill style and draw a rectangle
       ctx.fillStyle = gradient;
       ctx.fillRect(0, 0, 500, 500);
@@ -1734,9 +1734,9 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
       // Radial gradient: inner circle(200,200,r:50) outer circle(200,200,r:200)
       var gradient = ctx.createRadialGradient(200,200,50, 200,200,200);
       // Add three color stops
-      gradient.addColorStop(0.0, 'red');
-      gradient.addColorStop(0.5, 'white');
-      gradient.addColorStop(1.0, 'green');
+      gradient.addColorStop(0.0, '#ff0000');
+      gradient.addColorStop(0.5, '#ffffff');
+      gradient.addColorStop(1.0, '#00ff00');
       // Set the fill style and draw a rectangle
       ctx.fillStyle = gradient;
       ctx.fillRect(0, 0, 500, 500);
diff --git a/zh-cn/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md
index f6807fbb67924a99dbe3103c5e762587c2fd3b7f..755be53275e2a0526d803d679db177e1e1cfe71a 100644
--- a/zh-cn/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md
@@ -198,13 +198,13 @@ export default {
    var offscreenCanvasCtx = offscreen.getContext("2d");
 
    offscreenCanvasCtx.transform(1, 0, 1.7, 1, 0, 0);
-   offscreenCanvasCtx.fillStyle = 'gray';
+   offscreenCanvasCtx.fillStyle = '#a9a9a9';
    offscreenCanvasCtx.fillRect(40, 40, 50, 20);
    offscreenCanvasCtx.fillRect(40, 90, 50, 20);
 
    // Non-skewed rectangles
    offscreenCanvasCtx.resetTransform();
-   offscreenCanvasCtx.fillStyle = 'red';
+   offscreenCanvasCtx.fillStyle = '#ff0000';
    offscreenCanvasCtx.fillRect(40, 40, 50, 20);
    offscreenCanvasCtx.fillRect(40, 90, 50, 20);
 
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
index 07953a5d7f6e1bc9e7ee8dbefec000be6c398b45..01ceb1f4b659454800f2aa014ad56ba90f784ab5 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
@@ -1579,7 +1579,7 @@ struct Fill {
           region.lineTo(270, 90)
           region.closePath()
           // Fill path
-          this.context.fillStyle = 'green'
+          this.context.fillStyle = '#00ff00'
           this.context.fill(region, "evenodd")
         })
     }
@@ -2412,7 +2412,7 @@ restore(): void
           .backgroundColor('#ffff00')
           .onReady(() =>{
             this.context.save() // save the default state
-            this.context.fillStyle = "green"
+            this.context.fillStyle = "#00ff00"
             this.context.fillRect(20, 20, 100, 100)
             this.context.restore() // restore to the default state
             this.context.fillRect(150, 75, 100, 100)
@@ -2450,7 +2450,7 @@ save(): void
           .backgroundColor('#ffff00')
           .onReady(() =>{
             this.context.save() // save the default state
-            this.context.fillStyle = "green"
+            this.context.fillStyle = "#00ff00"
             this.context.fillRect(20, 20, 100, 100)
             this.context.restore() // restore to the default state
             this.context.fillRect(150, 75, 100, 100)
@@ -2497,9 +2497,9 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
           .backgroundColor('#ffff00')
           .onReady(() =>{
             var grad = this.context.createLinearGradient(50,0, 300,100)
-            grad.addColorStop(0.0, 'red')
-            grad.addColorStop(0.5, 'white')
-            grad.addColorStop(1.0, 'green')
+            grad.addColorStop(0.0, '#ff0000')
+            grad.addColorStop(0.5, '#ffffff')
+            grad.addColorStop(1.0, '#00ff00')
             this.context.fillStyle = grad
             this.context.fillRect(0, 0, 500, 500)
           })
@@ -2548,9 +2548,9 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
           .backgroundColor('#ffff00')
           .onReady(() =>{
             var grad = this.context.createRadialGradient(200,200,50, 200,200,200)
-            grad.addColorStop(0.0, 'red')
-            grad.addColorStop(0.5, 'white')
-            grad.addColorStop(1.0, 'green')
+            grad.addColorStop(0.0, '#ff0000')
+            grad.addColorStop(0.5, '#ffffff')
+            grad.addColorStop(1.0, '#00ff00')
             this.context.fillStyle = grad
             this.context.fillRect(0, 0, 500, 500)
           })
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
index 165735247a627b14db1e3f5b33575d59beb61038..c6efa1ddbbbc323d26afd22179f0ed1cada1e640 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
@@ -41,9 +41,9 @@ struct Page45 {
         .backgroundColor('#ffff00')
         .onReady(() => {
           var grad = this.context.createLinearGradient(50, 0, 300, 100)
-          grad.addColorStop(0.0, 'red')
-          grad.addColorStop(0.5, 'white')
-          grad.addColorStop(1.0, 'green')
+          grad.addColorStop(0.0, '#ff0000')
+          grad.addColorStop(0.5, '#ffffff')
+          grad.addColorStop(1.0, '#00ff00')
           this.context.fillStyle = grad
           this.context.fillRect(0, 0, 500, 500)
         })
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
index 98b0c8b8401cce5c27349dd8baedc249f007cc70..c2c1a3af88193b593a9cc61671dc2b0c4a0600da 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
@@ -1673,7 +1673,7 @@ struct Fill {
           region.lineTo(270, 90)
           region.closePath()
           // Fill path
-          this.offContext.fillStyle = 'green'
+          this.offContext.fillStyle = '#00ff00'
           this.offContext.fill(region, "evenodd")
           var image = this.offContext.transferToImageBitmap()
           this.context.transferFromImageBitmap(image)
@@ -2535,7 +2535,7 @@ struct CanvasExample {
         .backgroundColor('#ffff00')
         .onReady(() =>{
           this.offContext.save() // save the default state
-          this.offContext.fillStyle = "green"
+          this.offContext.fillStyle = "#00ff00"
           this.offContext.fillRect(20, 20, 100, 100)
           this.offContext.restore() // restore to the default state
           this.offContext.fillRect(150, 75, 100, 100)
@@ -2576,7 +2576,7 @@ struct CanvasExample {
         .backgroundColor('#ffff00')
         .onReady(() =>{
           this.offContext.save() // save the default state
-          this.offContext.fillStyle = "green"
+          this.offContext.fillStyle = "#00ff00"
           this.offContext.fillRect(20, 20, 100, 100)
           this.offContext.restore() // restore to the default state
           this.offContext.fillRect(150, 75, 100, 100)
@@ -2626,9 +2626,9 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
           .backgroundColor('#ffff00')
           .onReady(() =>{
             var grad = this.offContext.createLinearGradient(50,0, 300,100)
-            grad.addColorStop(0.0, 'red')
-            grad.addColorStop(0.5, 'white')
-            grad.addColorStop(1.0, 'green')
+            grad.addColorStop(0.0, '#ff0000')
+            grad.addColorStop(0.5, '#ffffff')
+            grad.addColorStop(1.0, '#00ff00')
             this.offContext.fillStyle = grad
             this.offContext.fillRect(0, 0, 500, 500)
             var image = this.offContext.transferToImageBitmap()
@@ -2680,9 +2680,9 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
           .backgroundColor('#ffff00')
           .onReady(() =>{
             var grad = this.offContext.createRadialGradient(200,200,50, 200,200,200)
-            grad.addColorStop(0.0, 'red')
-            grad.addColorStop(0.5, 'white')
-            grad.addColorStop(1.0, 'green')
+            grad.addColorStop(0.0, '#ff0000')
+            grad.addColorStop(0.5, '#ffffff')
+            grad.addColorStop(1.0, '#00ff00')
             this.offContext.fillStyle = grad
             this.offContext.fillRect(0, 0, 500, 500)
             var image = this.offContext.transferToImageBitmap()