diff --git a/en/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md b/en/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md
index 125067139d62be03f2a19995e9181df6010a1f77..f580a31338e6e8d145d963c1b2f7662f1113e06c 100644
--- a/en/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md
+++ b/en/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md
@@ -17,7 +17,7 @@ Adds a color stop for the **CanvasGradient** object based on the specified offse
 | Name   | Type   | Description                                                  |
 | ------ | ------ | ------------------------------------------------------------ |
 | offset | number | Proportion of the distance between the color stop and the start point to the total length. The value ranges from 0 to 1. |
-| color   | string | Gradient color to set.                                       |
+| color  | string | Gradient color to set.                                       |
 
 **Example** 
 
@@ -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/en/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md b/en/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
index 0ebefab7d190de7f8ca8bd76b570444c0a2aa70b..8df65d142a4129699c45f44b69c1c5f1fbe96829 100644
--- a/en/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
+++ b/en/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
@@ -1682,9 +1682,9 @@ Creates a linear gradient and returns a **CanvasGradient** object. For details,
       // 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);
diff --git a/en/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md b/en/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md
index c97b123b4bc071d0209bbf6c3e8aad9984f7e914..8eebde2cacb7dc2e2409a8c1f6a8274ac4e38390 100644
--- a/en/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md
+++ b/en/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md
@@ -14,7 +14,7 @@ In addition to the attributes that are supported by **CanvasRenderingContext2D**
 
 | Name    | Type    | Description                                      |
 | ------ | ------ | ---------------------------------------- |
-| filter | string | Image filter.<br>Available options are as follows:<br>- **blur**: applies the Gaussian blur for the image.<br>- **brightness**: applies a linear multiplication to the image to make it look brighter or darker.<br>- **contrast**: adjusts the image contrast.<br>- **drop-shadow**: sets a shadow effect for the image.<br>- **grayscale**: converts the image to a grayscale image.<br>- **hue-rotate**: applies hue rotation to the image.<br>- **invert**: inverts the input image.<br>- **opacity**: sets the opacity of the image.<br>- **saturate**: sets the saturation of the image.<br>- **sepia**: converts the image to dark brown. |
+| filter | string | Image filter.<br>Available options are as follows:<br>- **blur**: applies the Gaussian blur for the image.<br>- **brightness**: applies a linear multiplication to the image to make it look brighter or darker.<br>- **contrast**: adjusts the image contrast.<br>- **drop-shadow**: sets a shadow effect for the image.<br>- **grayscale**: converts the image to a grayscale image.<br>- **hue-rotate**: applies hue rotation to the image.<br>- **invert**: inverts the image.<br>- **opacity**: sets the image opacity.<br>- **saturate**: sets the image saturation.<br>- **sepia**: converts the image to sepia.|
 
 **Example**
 ```html
@@ -199,13 +199,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/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
index d0c3c2e1860d77390c679134eefc540ddcae238d..7c8b95655a9470ea7fd1951132f7b2c7974a45da 100644
--- a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
+++ b/en/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/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md b/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
index 4c6a674c969dcbbfdacdafbf39ccc008bdeb178d..22e6077c68daf2b9cc835c9af1b514ed7670e57e 100644
--- a/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
+++ b/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
@@ -1674,7 +1674,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)
@@ -2534,7 +2534,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)
@@ -2575,7 +2575,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)
@@ -2625,9 +2625,9 @@ Creates a linear gradient.
           .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()
@@ -2679,9 +2679,9 @@ Creates a linear gradient.
           .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()