diff --git a/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md b/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
index 866df9034fa4f33cfe29801f5a1b691e38413029..542885a1c19801d87cb3a26899ecd6d041aebf93 100644
--- a/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
+++ b/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
@@ -7,7 +7,7 @@ Use  **RenderingContext**  to draw rectangles, text, images, and other objects o
 
 ## APIs<a name="section15647101282420"></a>
 
-CanvasRenderingContext2D\(setting: RenderingContextSetting\)
+CanvasRenderingContext2D\(setting: RenderingContextSettings\)
 
 -   Parameters
 
@@ -41,9 +41,9 @@ CanvasRenderingContext2D\(setting: RenderingContextSetting\)
 
 ### RenderingContextSettings<a name="section189411348141711"></a>
 
-RenderingContextSettings\(antialias?: bool, alpha?: bool\)
+RenderingContextSettings\(antialias?: bool\)
 
-Configures the settings of a  **CanvasRenderingContext2D**  object, including whether to enable antialiasing and whether to contain an alpha channel.
+Configures the settings of a  **CanvasRenderingContext2D**  object, including whether to enable antialiasing.
 
 -   Parameters
 
@@ -71,17 +71,6 @@ Configures the settings of a  **CanvasRenderingContext2D**  object, including wh
     <td class="cellrowborder" valign="top" width="36.22%" headers="mcps1.1.6.1.5 "><p id="p120104120547"><a name="p120104120547"></a><a name="p120104120547"></a>Whether antialiasing is enabled.</p>
     </td>
     </tr>
-    <tr id="row4105559574"><td class="cellrowborder" valign="top" width="12.540000000000001%" headers="mcps1.1.6.1.1 "><p id="p2105259577"><a name="p2105259577"></a><a name="p2105259577"></a>alpha</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="20.150000000000002%" headers="mcps1.1.6.1.2 "><p id="p1010612565713"><a name="p1010612565713"></a><a name="p1010612565713"></a>bool</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="12.49%" headers="mcps1.1.6.1.3 "><p id="p17106453572"><a name="p17106453572"></a><a name="p17106453572"></a>No</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="18.6%" headers="mcps1.1.6.1.4 "><p id="p101061659572"><a name="p101061659572"></a><a name="p101061659572"></a>false</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="36.22%" headers="mcps1.1.6.1.5 "><p id="p20106153575"><a name="p20106153575"></a><a name="p20106153575"></a>Whether the canvas contains an alpha channel.</p>
-    </td>
-    </tr>
     </tbody>
     </table>
 
@@ -285,7 +274,7 @@ Configures the settings of a  **CanvasRenderingContext2D**  object, including wh
 @Entry
 @Component
 struct FillStyleExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
   build() {
@@ -313,7 +302,7 @@ struct FillStyleExample {
 @Entry
 @Component
 struct LineWidthExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
   build() {
@@ -341,7 +330,7 @@ struct LineWidthExample {
 @Entry
 @Component
 struct StrokeStyleExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
   build() {
@@ -370,7 +359,7 @@ struct StrokeStyleExample {
 @Entry
 @Component
 struct LineCapExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
   build() {
@@ -402,7 +391,7 @@ struct LineCapExample {
 @Entry
 @Component
 struct LineJoinExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
   build() {
@@ -435,7 +424,7 @@ struct LineJoinExample {
 @Entry
 @Component
 struct MiterLimit {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
   build() {
@@ -468,7 +457,7 @@ struct MiterLimit {
 @Entry
 @Component
 struct Font {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
   build() {
@@ -495,8 +484,8 @@ struct Font {
 ```
 @Entry
 @Component
-struct TextAlign {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+struct CanvasExample {
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
   build() {
@@ -539,7 +528,7 @@ struct TextAlign {
 @Entry
 @Component
 struct TextBaseline {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
   build() {
@@ -582,7 +571,7 @@ struct TextBaseline {
 @Entry
 @Component
 struct GlobalAlpha {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
   build() {
@@ -613,7 +602,7 @@ struct GlobalAlpha {
 @Entry
 @Component
 struct LineDashOffset {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
   build() {
@@ -707,7 +696,7 @@ struct LineDashOffset {
 @Entry
 @Component
 struct GlobalCompositeOperation {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
   build() {
@@ -743,7 +732,7 @@ struct GlobalCompositeOperation {
 @Entry
 @Component
 struct ShadowBlur {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true,true);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
   
   build() {
@@ -773,7 +762,7 @@ struct ShadowBlur {
 @Entry
 @Component
 struct ShadowColor {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
   build() {
@@ -803,7 +792,7 @@ struct ShadowColor {
 @Entry
 @Component
 struct ShadowOffsetX {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
   build() {
@@ -834,7 +823,7 @@ struct ShadowOffsetX {
 @Entry
 @Component
 struct ShadowOffsetY {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -864,7 +853,7 @@ struct ShadowOffsetY {
 @Entry
 @Component
 struct ImageSmoothingEnabled {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
   
@@ -964,7 +953,7 @@ Fills a rectangle on the canvas.
     @Entry
     @Component
     struct FillRect {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       
       build() {
@@ -1061,7 +1050,7 @@ Draws a rectangle stroke on the canvas.
     @Entry
     @Component
     struct StrokeRect {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       build() {
         Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1157,7 +1146,7 @@ Clears the content in a rectangle on the canvas.
     @Entry
     @Component
     struct ClearRect {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       build() {
         Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1244,7 +1233,7 @@ Draws filled text on the canvas.
     @Entry
     @Component
     struct FillText {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       build() {
         Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1330,7 +1319,7 @@ Draws a text stroke on the canvas.
     @Entry
     @Component
     struct StrokeText {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       build() {
         Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1433,7 +1422,7 @@ Returns a  **TextMetrics**  object used to obtain the width of specified text.
     @Entry
     @Component
     struct MeasureText {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       build() {
         Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1497,8 +1486,8 @@ Strokes a path.
     ```
     @Entry
     @Component
-    struct Stroke {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+    struct CanvasExample {
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     
       build() {
@@ -1535,7 +1524,7 @@ Creates a drawing path.
     @Entry
     @Component
     struct BeginPath {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     
       build() {
@@ -1615,7 +1604,7 @@ Moves a drawing path to a target position on the canvas.
     @Entry
     @Component
     struct MoveTo {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     
       build() {
@@ -1693,7 +1682,7 @@ Connects the current point to a target position using a straight line.
     @Entry
     @Component
     struct LineTo {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     
       build() {
@@ -1730,7 +1719,7 @@ Draws a closed path.
     @Entry
     @Component
     struct ClosePath {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     
       build() {
@@ -1809,7 +1798,7 @@ Creates a pattern for image filling based on a specified source image and repeti
     @Entry
     @Component
     struct CreatePattern {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
     
@@ -1931,7 +1920,7 @@ Draws a cubic bezier curve on the canvas.
     @Entry
     @Component
     struct BezierCurveTo {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     
       build() {
@@ -2031,7 +2020,7 @@ Draws a quadratic curve on the canvas.
     @Entry
     @Component
     struct QuadraticCurveTo {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true);
+      private settings: RenderingContextSettings = new RenderingContextSettings(true);
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
       build() {
         Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -2152,7 +2141,7 @@ Draws an arc on the canvas.
     @Entry
     @Component
     struct Arc {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     
       build() {
@@ -2262,7 +2251,7 @@ Draws an arc based on the radius and points on the arc.
     @Entry
     @Component
     struct ArcTo {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     
       build() {
@@ -2405,7 +2394,7 @@ Draws an ellipse in the specified rectangular region.
     @Entry
     @Component
     struct Ellipse {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     
       build() {
@@ -2507,8 +2496,8 @@ Creates a rectangle.
     ```
     @Entry
     @Component
-    struct Rect {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+    struct CanvasExample {
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     
       build() {
@@ -2543,7 +2532,7 @@ Fills the area inside a closed path.
     @Entry
     @Component
     struct Fill {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     
       build() {
@@ -2578,7 +2567,7 @@ Sets the current path to a clipping path.
     @Entry
     @Component
     struct Clip {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     
       build() {
@@ -2650,7 +2639,7 @@ Rotates a canvas clockwise around its coordinate axes.
     @Entry
     @Component
     struct Rotate {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     
       build() {
@@ -2726,7 +2715,7 @@ Scales a canvas based on scaling factors.
     @Entry
     @Component
     struct Scale {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     
       build() {
@@ -2851,7 +2840,7 @@ Defines a transformation matrix. To transform a graph, you only need to set para
     @Entry
     @Component
     struct Transform {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       build() {
         Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -2975,7 +2964,7 @@ Resets the existing transformation matrix and creates a new transformation matri
     @Entry
     @Component
     struct SetTransform {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     
       build() {
@@ -3053,7 +3042,7 @@ Moves the origin of the coordinate system.
     @Entry
     @Component
     struct Translate {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     
       build() {
@@ -3211,7 +3200,7 @@ Draws an image.
     @Entry
     @Component
     struct ImageExample {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true);
+      private settings: RenderingContextSettings = new RenderingContextSettings(true);
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
       private img:ImageBitmap = new ImageBitmap("common/images/example.jpg");
       build() {
@@ -3492,7 +3481,7 @@ Puts the  [ImageData](ts-components-canvas-imagedata.md)  onto a rectangular are
     @Entry
     @Component
     struct PutImageData {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     
       build() {
@@ -3532,8 +3521,8 @@ Restores the saved drawing context.
     ```
     @Entry
     @Component
-    struct Restore {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+    struct CanvasExample {
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     
       build() {
@@ -3543,7 +3532,7 @@ Restores the saved drawing context.
             .height('100%')
             .backgroundColor('#ffff00')
             .onReady(() =>{
-              this.controller.restore()
+              this.context.restore()
             })
         }
         .width('100%')
@@ -3564,8 +3553,8 @@ Saves the current drawing context.
     ```
     @Entry
     @Component
-    struct Restore {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+    struct CanvasExample {
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     
       build() {
@@ -3659,9 +3648,8 @@ Creates a linear gradient.
     @Entry
     @Component
     struct CreateLinearGradient {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private gra:CanvasGradient = new CanvasGradient()
     
       build() {
         Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -3671,9 +3659,9 @@ Creates a linear gradient.
             .backgroundColor('#ffff00')
             .onReady(() =>{
               var grad = this.context.createLinearGradient(50,0, 300,100)
-              this.gra.addColorStop(0.0, 'red')
-              this.gra.addColorStop(0.5, 'white')
-              this.gra.addColorStop(1.0, 'green')
+              gra.addColorStop(0.0, 'red')
+              gra.addColorStop(0.5, 'white')
+              gra.addColorStop(1.0, 'green')
               this.context.fillStyle = grad
               this.context.fillRect(0, 0, 500, 500)
             })
@@ -3683,8 +3671,9 @@ Creates a linear gradient.
       }
     }
     ```
+    
 
-    ![](figures/en-us_image_0000001237555149.png)
+![](figures/en-us_image_0000001237555149.png)
 
 
 ### createRadialGradient<a name="section932032913385"></a>
@@ -3783,10 +3772,9 @@ Creates a linear gradient.
     @Entry
     @Component
     struct CreateRadialGradient {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private gra:CanvasGradient = new CanvasGradient()
-    
+      
       build() {
         Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
           Canvas(this.context)
@@ -3795,9 +3783,9 @@ Creates a linear gradient.
             .backgroundColor('#ffff00')
             .onReady(() =>{
               var grad = this.context.createRadialGradient(200,200,50, 200,200,200)
-              this.gra.addColorStop(0.0, 'red')
-              this.gra.addColorStop(0.5, 'white')
-              this.gra.addColorStop(1.0, 'green')
+              gra.addColorStop(0.0, 'red')
+              gra.addColorStop(0.5, 'white')
+              gra.addColorStop(1.0, 'green')
               this.context.fillStyle = grad
               this.context.fillRect(0, 0, 500, 500)
             })
@@ -3807,8 +3795,8 @@ Creates a linear gradient.
       }
     }
     ```
-
-    ![](figures/en-us_image_0000001192755188.png)
+    
+![](figures/en-us_image_0000001192755188.png)
 
 
 ## CanvasPattern<a name="section146853345417"></a>
diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md
index 2a193c594a664d6a902bc4d04648138bee1dba08..f34c7ce4e16a6aa3e97fb37d4c1f2b30de43dac3 100644
--- a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md
+++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md
@@ -80,7 +80,7 @@ In addition to  [universal events](ts-universal-events-click.md), the following
 @Entry
 @Component
 struct CanvasExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
   build() {
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 2e1895ded8a48065898a5a8c86c9523157bccce0..b601e5821a052b5d077692a6a22dfe8b34e33718 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
@@ -57,7 +57,7 @@ Adds a color stop for the  **CanvasGradient**  object based on the specified off
     @Entry
     @Component
     struct Page45 {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       private gra:CanvasGradient = new CanvasGradient()
     
@@ -69,9 +69,9 @@ Adds a color stop for the  **CanvasGradient**  object based on the specified off
             .backgroundColor('#ffff00')
             .onReady(() =>{
               var grad = this.context.createLinearGradient(50,0, 300,100)
-              this.gra.addColorStop(0.0, 'red')
-              this.gra.addColorStop(0.5, 'white')
-              this.gra.addColorStop(1.0, 'green')
+              gra.addColorStop(0.0, 'red')
+              gra.addColorStop(0.5, 'white')
+              gra.addColorStop(1.0, 'green')
               this.context.fillStyle = grad
               this.context.fillRect(0, 0, 500, 500)
             })
@@ -84,4 +84,3 @@ Adds a color stop for the  **CanvasGradient**  object based on the specified off
 
     ![](figures/en-us_image_0000001192915130.png)
 
-
diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md
index 6c7546ec9f56539adefca6e30cdd3bbbd5075cbc..ad48b3ddbedceba5f3e68743ebf8cf55fd3a76a9 100644
--- a/en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md
+++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md
@@ -85,7 +85,7 @@ Example
 @Entry
 @Component
 struct DrawImageExample {
-  private settings:RenderingContextSettings = new RenderingContextSettings(true,true)
+  private settings:RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   private img:ImageBitmap = new ImageBitmap("common/images/example.jpg")
 
diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md
index 3cf2b4df5c04552bbde5c5d5810162e272fdcd2d..d86cfb307868e8b4d2f0bf4cd4aa29891df1f7bd 100644
--- a/en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md
+++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md
@@ -46,7 +46,7 @@ Adds a path to this path.
     @Entry
     @Component
     struct AddPath {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     
       private path2Da: Path2D = new Path2D("M250 150 L150 350 L350 350 Z")
@@ -84,7 +84,7 @@ Moves the current point of the path back to the start point of the path, and dra
     @Entry
     @Component
     struct ClosePath {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       private path2Db: Path2D = new Path2D()
     
@@ -163,7 +163,7 @@ Moves the current coordinate point of the path to the target point, without draw
     @Entry
     @Component
     struct MoveTo {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       private path2Db: Path2D = new Path2D()
     
@@ -242,7 +242,7 @@ Draws a straight line from the current point to the target point.
     @Entry
     @Component
     struct LineTo {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       private path2Db: Path2D = new Path2D()
     
@@ -367,7 +367,7 @@ Draws a cubic bezier curve on the canvas.
     @Entry
     @Component
     struct BezierCurveTo {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       private path2Db: Path2D = new Path2D()
     
@@ -465,7 +465,7 @@ Draws a quadratic curve on the canvas.
     @Entry
     @Component
     struct QuadraticCurveTo {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       private path2Db: Path2D = new Path2D()
     
@@ -586,7 +586,7 @@ Draws an arc on the canvas.
     @Entry
     @Component
     struct Arc {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       private path2Db: Path2D = new Path2D()
     
@@ -694,7 +694,7 @@ Draws an arc based on the radius and points on the arc.
     @Entry
     @Component
     struct ArcTo {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       private path2Db: Path2D = new Path2D()
     
@@ -835,8 +835,8 @@ Draws an ellipse in the specified rectangular region.
     ```
     @Entry
     @Component
-    struct Ellipse {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+    struct CanvasExample {
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       private path2Db: Path2D = new Path2D()
     
@@ -933,8 +933,8 @@ Creates a rectangle.
     ```
     @Entry
     @Component
-    struct Rect {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+    struct CanvasExample {
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       private path2Db: Path2D = new Path2D()
     
@@ -956,4 +956,3 @@ Creates a rectangle.
 
     ![](figures/en-us_image_0000001192755174.png)
 
-
diff --git a/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md b/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
index 4c985bdfc4751bc968a55bed01ad6474d0d6119e..440b12f304e589a160bb91e74c7856a124b5ccd1 100644
--- a/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
+++ b/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
@@ -260,7 +260,7 @@ OffscreenCanvasRenderingContext2D\(width: number, height: number, setting: Rende
 @Entry
 @Component
 struct FillStyleExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
 
@@ -291,7 +291,7 @@ struct FillStyleExample {
 @Entry
 @Component
 struct LineWidthExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
 
@@ -322,7 +322,7 @@ struct LineWidthExample {
 @Entry
 @Component
 struct StrokeStyleExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
 
@@ -354,7 +354,7 @@ struct StrokeStyleExample {
 @Entry
 @Component
 struct LineCapExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
 
@@ -389,7 +389,7 @@ struct LineCapExample {
 @Entry
 @Component
 struct LineJoinExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
 
@@ -425,7 +425,7 @@ struct LineJoinExample {
 @Entry
 @Component
 struct MiterLimit {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
   
@@ -461,7 +461,7 @@ struct MiterLimit {
 @Entry
 @Component
 struct Font {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
   
@@ -491,8 +491,8 @@ struct Font {
 ```
 @Entry
 @Component
-struct TextAlign {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+struct CanvasExample {
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
   
@@ -538,7 +538,7 @@ struct TextAlign {
 @Entry
 @Component
 struct TextBaseline {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
   
@@ -584,7 +584,7 @@ struct TextBaseline {
 @Entry
 @Component
 struct GlobalAlpha {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
   
@@ -618,7 +618,7 @@ struct GlobalAlpha {
 @Entry
 @Component
 struct LineDashOffset {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
   
@@ -715,7 +715,7 @@ struct LineDashOffset {
 @Entry
 @Component
 struct GlobalCompositeOperation {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
   
@@ -754,7 +754,7 @@ struct GlobalCompositeOperation {
 @Entry
 @Component
 struct ShadowBlur {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
   
@@ -787,7 +787,7 @@ struct ShadowBlur {
 @Entry
 @Component
 struct ShadowColor {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
   
@@ -821,7 +821,7 @@ struct ShadowColor {
 @Entry
 @Component
 struct ShadowOffsetX {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
   
@@ -855,7 +855,7 @@ struct ShadowOffsetX {
 @Entry
 @Component
 struct ShadowOffsetY {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
 
@@ -889,7 +889,7 @@ struct ShadowOffsetY {
 @Entry
 @Component
 struct ImageSmoothingEnabled {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
   private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
@@ -991,7 +991,7 @@ Fills a rectangle on the canvas.
     @Entry
     @Component
     struct FillRect {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
       
@@ -1091,7 +1091,7 @@ Draws a rectangle stroke on the canvas.
     @Entry
     @Component
     struct StrokeRect {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
       build() {
@@ -1190,7 +1190,7 @@ Clears the content in a rectangle on the canvas.
     @Entry
     @Component
     struct ClearRect {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
       build() {
@@ -1280,7 +1280,7 @@ Draws filled text on the canvas.
     @Entry
     @Component
     struct FillText {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
       build() {
@@ -1369,7 +1369,7 @@ Draws a text stroke on the canvas.
     @Entry
     @Component
     struct StrokeText {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
       build() {
@@ -1474,7 +1474,7 @@ Returns a  **TextMetrics**  object used to obtain the width of specified text.
     @Entry
     @Component
     struct MeasureText {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
       build() {
@@ -1541,10 +1541,10 @@ Strokes a path.
     ```
     @Entry
     @Component
-    struct Stroke {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+    struct CanvasExample {
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private offContext: OffscreenCanvasRenderingContext2D = new OffscreenRenderingContext(600, 600, this.settings)
+      private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
       build() {
         Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
           Canvas(this.context)
@@ -1581,7 +1581,7 @@ Creates a drawing path.
     @Entry
     @Component
     struct BeginPath {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
       build() {
@@ -1663,7 +1663,7 @@ Moves a drawing path to a target position on the canvas.
     @Entry
     @Component
     struct MoveTo {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
       build() {
@@ -1743,7 +1743,7 @@ Connects the current point to a target position using a straight line.
     @Entry
     @Component
     struct LineTo {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
       build() {
@@ -1782,7 +1782,7 @@ Draws a closed path.
     @Entry
     @Component
     struct ClosePath {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
       build() {
@@ -1863,7 +1863,7 @@ Creates a pattern for image filling based on a specified source image and repeti
     @Entry
     @Component
     struct CreatePattern {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
       private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
@@ -1987,7 +1987,7 @@ Draws a cubic bezier curve on the canvas.
     @Entry
     @Component
     struct BezierCurveTo {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
       build() {
@@ -2089,7 +2089,7 @@ Draws a quadratic curve on the canvas.
     @Entry
     @Component
     struct QuadraticCurveTo {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
       build() {
@@ -2212,7 +2212,7 @@ Draws an arc on the canvas.
     @Entry
     @Component
     struct Arc {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
       build() {
@@ -2324,7 +2324,7 @@ Draws an arc based on the radius and points on the arc.
     @Entry
     @Component
     struct ArcTo {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
       build() {
@@ -2468,8 +2468,8 @@ Draws an ellipse in the specified rectangular region.
     ```
     @Entry
     @Component
-    struct Ellipse {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+    struct CanvasExample {
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
       build() {
@@ -2569,8 +2569,8 @@ Creates a rectangle.
     ```
     @Entry
     @Component
-    struct Rect {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+    struct CanvasExample {
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
       build() {
@@ -2607,7 +2607,7 @@ Fills the area inside a closed path.
     @Entry
     @Component
     struct Fill {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
       build() {
@@ -2644,7 +2644,7 @@ Sets the current path to a clipping path.
     @Entry
     @Component
     struct Clip {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
       build() {
@@ -2714,7 +2714,7 @@ Rotates a canvas clockwise around its coordinate axes.
     @Entry
     @Component
     struct Rotate {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
       build() {
@@ -2792,7 +2792,7 @@ Scales a canvas based on scaling factors.
     @Entry
     @Component
     struct Scale {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
       build() {
@@ -2919,7 +2919,7 @@ Defines a transformation matrix. To transform a graph, you only need to set para
     @Entry
     @Component
     struct Transform {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
       build() {
@@ -3046,7 +3046,7 @@ Resets the existing transformation matrix and creates a new transformation matri
     @Entry
     @Component
     struct SetTransform {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
       build() {
@@ -3126,7 +3126,7 @@ Moves the origin of the coordinate system.
     @Entry
     @Component
     struct Translate {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
       build() {
@@ -3286,7 +3286,7 @@ Draws an image.
     @Entry
     @Component
     struct Index {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
       private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
@@ -3570,7 +3570,7 @@ Puts the  [ImageData](ts-components-canvas-imagedata.md)  onto a rectangular are
     @Entry
     @Component
     struct PutImageData {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
       build() {
@@ -3612,8 +3612,8 @@ Restores the saved drawing context.
     ```
     @Entry
     @Component
-    struct Restore {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+    struct CanvasExample {
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
       build() {
@@ -3647,7 +3647,7 @@ Saves the current drawing context.
     @Entry
     @Component
     struct Restore {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
       build() {
@@ -3743,9 +3743,8 @@ Creates a linear gradient.
     @Entry
     @Component
     struct CreateLinearGradient {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private gra:CanvasGradient = new CanvasGradient()
       private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
       build() {
         Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -3755,9 +3754,9 @@ Creates a linear gradient.
             .backgroundColor('#ffff00')
             .onReady(() =>{
               var grad = this.offContext.createLinearGradient(50,0, 300,100)
-              this.gra.addColorStop(0.0, 'red')
-              this.gra.addColorStop(0.5, 'white')
-              this.gra.addColorStop(1.0, 'green')
+              gra.addColorStop(0.0, 'red')
+              gra.addColorStop(0.5, 'white')
+              gra.addColorStop(1.0, 'green')
               this.offContext.fillStyle = grad
               this.offContext.fillRect(0, 0, 500, 500)
               var image = this.offContext.transferToImageBitmap()
@@ -3769,8 +3768,8 @@ Creates a linear gradient.
       }
     }
     ```
-
-    ![](figures/en-us_image_0000001192915162.png)
+    
+![](figures/en-us_image_0000001192915162.png)
 
 
 ### createRadialGradient<a name="section136731637204919"></a>
@@ -3869,9 +3868,8 @@ Creates a linear gradient.
     @Entry
     @Component
     struct CreateRadialGradient {
-      private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private gra:CanvasGradient = new CanvasGradient()
       private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
       build() {
         Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -3881,9 +3879,9 @@ Creates a linear gradient.
             .backgroundColor('#ffff00')
             .onReady(() =>{
               var grad = this.offContext.createRadialGradient(200,200,50, 200,200,200)
-              this.gra.addColorStop(0.0, 'red')
-              this.gra.addColorStop(0.5, 'white')
-              this.gra.addColorStop(1.0, 'green')
+              gra.addColorStop(0.0, 'red')
+              gra.addColorStop(0.5, 'white')
+              gra.addColorStop(1.0, 'green')
               this.offContext.fillStyle = grad
               this.offContext.fillRect(0, 0, 500, 500)
               var image = this.offContext.transferToImageBitmap()
@@ -3895,8 +3893,8 @@ Creates a linear gradient.
       }
     }
     ```
-
-    ![](figures/en-us_image_0000001237555179.png)
+    
+![](figures/en-us_image_0000001237555179.png)
 
 
 ## CanvasPattern<a name="section146853345417"></a>