diff --git a/code/BasicFeature/Native/NdkRenderNodeDrawing/entry/src/main/cpp/native_bridge.cpp b/code/BasicFeature/Native/NdkRenderNodeDrawing/entry/src/main/cpp/native_bridge.cpp
index 98adf86b16564fd592c444ecf83700b2814e0117..cb2a1a8b638083d155679f6eb94b50780877ccb3 100644
--- a/code/BasicFeature/Native/NdkRenderNodeDrawing/entry/src/main/cpp/native_bridge.cpp
+++ b/code/BasicFeature/Native/NdkRenderNodeDrawing/entry/src/main/cpp/native_bridge.cpp
@@ -225,10 +225,12 @@ static void NativeOnDrawPixelMap(OH_Drawing_Canvas *canvas, NativePixelMap *nati
     OH_Drawing_SamplingOptions *sampling = OH_Drawing_SamplingOptionsCreate(FILTER_MODE_NEAREST, MIPMAP_MODE_NONE);
     OH_Drawing_Rect *src = OH_Drawing_RectCreate(0, 0, 550, 564);
     OH_Drawing_Rect *dst = OH_Drawing_RectCreate(25, 300, 300, 582);
+    OH_Drawing_Brush *brush = OH_Drawing_BrushCreate();
+    OH_Drawing_CanvasAttachBrush(canvas, brush);
     OH_Drawing_CanvasDrawPixelMapRect(canvas, pixelMap, src, dst, sampling);
+    OH_Drawing_CanvasDetachBrush(canvas);
     
     // 设置样式，绘制时生效
-    OH_Drawing_Brush *brush = OH_Drawing_BrushCreate();
     const float array[] = {
         1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, -1, 0, 0, 1, 0,
     };
diff --git a/code/BasicFeature/Native/NdkRenderNodeDrawing/entry/src/main/ets/pages/Index.ets b/code/BasicFeature/Native/NdkRenderNodeDrawing/entry/src/main/ets/pages/Index.ets
index fe19dbd2124d0192d60701f591f589e4ea795d39..4f0de52eb927731cdc20ac93e93382f3723d2b58 100644
--- a/code/BasicFeature/Native/NdkRenderNodeDrawing/entry/src/main/ets/pages/Index.ets
+++ b/code/BasicFeature/Native/NdkRenderNodeDrawing/entry/src/main/ets/pages/Index.ets
@@ -90,20 +90,24 @@ struct RenderTest {
       Row() {
         NodeContainer(this.myNodeController)
           .height('100%')
+      }
+      .width('100%')
+      .height('80%')
+      Row() {
         Button("Draw Path")
-          .margin({ bottom: 100, right: 12 })
+          .margin({ bottom: 50, right: 12 })
           .onClick(() => {
             newNode.resetType(drawType.path);
             newNode.invalidate();
           })
         Button("Draw Text")
-          .margin({ bottom: 100, right: 12 })
+          .margin({ bottom: 50, right: 12 })
           .onClick(() => {
             newNode.resetType(drawType.text);
             newNode.invalidate();
           })
         Button("Draw Image")
-          .margin({ bottom: 100, right: 12 })
+          .margin({ bottom: 50, right: 12 })
           .onClick(() => {
             newNode.resetType(drawType.image);
             newNode.invalidate();
diff --git a/code/BasicFeature/Native/NdkRenderNodeDrawing/screenshots/DrawImage.jpeg b/code/BasicFeature/Native/NdkRenderNodeDrawing/screenshots/DrawImage.jpeg
index e8168e2427210bc1cee7eb8081d9e31ae3ffefdb..bec5818b7981c307ece61b0d377a243189029e0f 100644
Binary files a/code/BasicFeature/Native/NdkRenderNodeDrawing/screenshots/DrawImage.jpeg and b/code/BasicFeature/Native/NdkRenderNodeDrawing/screenshots/DrawImage.jpeg differ
diff --git a/code/BasicFeature/Native/NdkRenderNodeDrawing/screenshots/DrawPath.jpeg b/code/BasicFeature/Native/NdkRenderNodeDrawing/screenshots/DrawPath.jpeg
index f5ad0ad110b03724dcacbec446f6a4b7dbb4034d..c99ce5cb6a48ade56a5c6b37d674fa1fcd655ea4 100644
Binary files a/code/BasicFeature/Native/NdkRenderNodeDrawing/screenshots/DrawPath.jpeg and b/code/BasicFeature/Native/NdkRenderNodeDrawing/screenshots/DrawPath.jpeg differ
diff --git a/code/BasicFeature/Native/NdkRenderNodeDrawing/screenshots/DrawText.jpeg b/code/BasicFeature/Native/NdkRenderNodeDrawing/screenshots/DrawText.jpeg
index 876f56be821ed699daaaa6b0ded88596d2cc8f10..eb1f98243e30c7709775e9a3b2e6b2fc7b3a94b9 100644
Binary files a/code/BasicFeature/Native/NdkRenderNodeDrawing/screenshots/DrawText.jpeg and b/code/BasicFeature/Native/NdkRenderNodeDrawing/screenshots/DrawText.jpeg differ
diff --git a/code/BasicFeature/Native/NdkRenderNodeDrawing/screenshots/Index.jpeg b/code/BasicFeature/Native/NdkRenderNodeDrawing/screenshots/Index.jpeg
index fb62acee1a198a2aa1044241a859a49886154833..66f363238afed609798450eb162f4297bbe203b0 100644
Binary files a/code/BasicFeature/Native/NdkRenderNodeDrawing/screenshots/Index.jpeg and b/code/BasicFeature/Native/NdkRenderNodeDrawing/screenshots/Index.jpeg differ
diff --git a/code/BasicFeature/Native/NdkTsDrawing/AppScope/app.json5 b/code/BasicFeature/Native/NdkTsDrawing/AppScope/app.json5
index e2ed32b2355601330d0f00cb18da7c11867280a5..8ca3c6480967f9ab37dd28c8e1067d258c5ceb83 100644
--- a/code/BasicFeature/Native/NdkTsDrawing/AppScope/app.json5
+++ b/code/BasicFeature/Native/NdkTsDrawing/AppScope/app.json5
@@ -14,7 +14,7 @@
  */
 {
   "app": {
-    "bundleName": "com.samples.ndkjsdrawing",
+    "bundleName": "com.samples.ndktsdrawing",
     "vendor": "example",
     "versionCode": 1000000,
     "versionName": "1.0.0",
diff --git a/code/BasicFeature/Native/NdkTsDrawing/README_zh.md b/code/BasicFeature/Native/NdkTsDrawing/README_zh.md
index 75b58d922996c22f604be62bba076f2eaece58e1..bca7d9d73abd52a1b4564dc10e5d7e2cbae14811 100644
--- a/code/BasicFeature/Native/NdkTsDrawing/README_zh.md
+++ b/code/BasicFeature/Native/NdkTsDrawing/README_zh.md
@@ -35,7 +35,9 @@
 
 ### 具体实现
 
-在IDE中创建空白工程，在js侧创建`RenderNode`子类`MyRenderNode`，并在其中定义绘图函数。构建出MyRenderNode类并在其中定义绘图的主要函数后，接下来创建一个MyRenderNode对象，并设置它的像素格式。创建`NodeController`的子类`MyNodeController`，并在其中定义创建`FrameNode`的函数。`NodeController`定义了节点容器的控制器，控制着容器里在生命周期中的节点。通过控制创建的节点即可画出五角星，矩形和文字
+在IDE中创建空白工程，在js侧drawing提供两种方式实现自定义绘制：
+1. 创建`RenderNode`子类`MyRenderNode`，并在其中定义绘图函数。构建出MyRenderNode类并在其中定义绘图的主要函数后，接下来创建一个MyRenderNode对象，并设置它的像素格式。创建`NodeController`的子类`MyNodeController`，并在其中定义创建`FrameNode`的函数。`NodeController`定义了节点容器的控制器，控制着容器里在生命周期中的节点。通过控制创建的节点即可画出五角星和文字。
+2. 创建一张位图并绑定drawing的Canvas，此时Canvas的绘制内容将会绘制到绑定的位图上，在完成绘制后将绑定的位图绘制出来即可实现离屏绘制，本示例中给出了矩形的离屏绘制例子。
 
 源码参考：[pages目录](entry/src/main/ets/pages)下的文件。
 
@@ -80,7 +82,7 @@ RenderNode。
 ```
 git init
 git config core.sparsecheckout true
-echo code/BasicFeature/Native/NdkJsDrawing/ > .git/info/sparse-checkout
+echo code/BasicFeature/Native/NdkTsDrawing/ > .git/info/sparse-checkout
 git remote add origin https://gitee.com/openharmony/applications_app_samples.git
 git pull origin master
 ```
\ No newline at end of file
diff --git a/code/BasicFeature/Native/NdkTsDrawing/entry/src/main/ets/pages/Index.ets b/code/BasicFeature/Native/NdkTsDrawing/entry/src/main/ets/pages/Index.ets
index f13deffabff361cc5bd42fdba73c2a492a625afc..d7f9d21ec0455a20f39e6d774288d13f35f225ce 100644
--- a/code/BasicFeature/Native/NdkTsDrawing/entry/src/main/ets/pages/Index.ets
+++ b/code/BasicFeature/Native/NdkTsDrawing/entry/src/main/ets/pages/Index.ets
@@ -18,18 +18,24 @@ import { UIContext } from '@ohos.arkui.UIContext';
 import drawing from "@ohos.graphics.drawing";
 import common2D from "@ohos.graphics.common2D";
 import display from '@ohos.display';
+import image from '@ohos.multimedia.image';
 
+const TAG = 'DrawingTSSample';
 let screen = display.getDefaultDisplaySync();
 let screenWidth: number = screen.width;
 let screenHeight: number = screen.height;
 
+let canvas_: drawing.Canvas;
+let pixelMap_: image.PixelMap | undefined;
+
 class MyRenderNode extends RenderNode {
+  // 在RenderNode的draw中使用drawing自定义绘制
   async draw(context: DrawContext) {
     const canvas = context.canvas;
-    let height_ = 1200;
+    let height_ = 600;
     let width_ = 600;
     let len = height_ / 4;
-    let aX = width_ / 2;
+    let aX = width_ / 3;
     let aY = height_ / 6;
     let dX = aX - len * Math.sin(18.0);
     let dY = aY + len * Math.cos(18.0);
@@ -86,32 +92,17 @@ const newNode = new MyRenderNode();
 // 定义newNode的像素格式
 newNode.frame = { x: 0, y: 0, width: screenWidth, height: screenHeight };
 
-class RectRenderNode extends RenderNode {
-  async draw(context: DrawContext) {
-    const canvas = context.canvas;
-    const pen = new drawing.Pen();
-    pen.setStrokeWidth(5);
-    pen.setColor({alpha: 255, red: 255, green: 0, blue: 0});
-    canvas.attachPen(pen);
-    canvas.drawRect({ left : 150, right : 400, top : 100, bottom : 700});
-    canvas.detachPen();
-  }
-}
-// 创建一个RectRenderNode对象
-const rectNode = new RectRenderNode();
-// 定义rectNode的像素格式
-rectNode.frame = { x: 0, y: 0, width: screenWidth, height: screenHeight };
 
 class TextRenderNode extends RenderNode {
   async draw(context: DrawContext) {
     const canvas = context.canvas;
-    const brush = new drawing.Brush();
+    let brush = new drawing.Brush();
     brush.setColor({alpha: 255, red: 255, green: 0, blue: 0});
-    const font = new drawing.Font();
-    font.setSize(60);
+    let font = new drawing.Font();
+    font.setSize(50);
     const textBlob = drawing.TextBlob.makeFromString("Hello World", font, drawing.TextEncoding.TEXT_ENCODING_UTF8);
     canvas.attachBrush(brush);
-    canvas.drawTextBlob(textBlob, 120, screenHeight / 3);
+    canvas.drawTextBlob(textBlob, 60, screenHeight / 4);
     canvas.detachBrush();
   }
 }
@@ -160,27 +151,44 @@ class MyNodeController extends NodeController {
 @Entry
 @Component
 struct RenderTest {
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
   private myNodeController: MyNodeController = new MyNodeController();
 
   build() {
     Column() {
+      // 离屏绘制
+      Row() {
+        Canvas(this.context)
+          .width('100%')
+          .onReady(()=>{
+            this.CreateBitmapCanvas();
+          })
+      }
+      .height('40%')
+      Row() {
+        Button("Draw Rect")
+          .margin({ bottom: 20, right: 12 })
+          .onClick(() => {
+            if (canvas_ === null || canvas_ === undefined) {
+              return;
+            }
+            this.drawImage();
+          })
+      }
+      .height('10%')
+      // 使用RenderNode的能力进行绘制
       Row() {
         NodeContainer(this.myNodeController)
           .height('100%')
         Button("Draw Path")
-          .margin({ bottom: 200, right: 12 })
+          .margin({ bottom: 20, right: 12 })
           .onClick(() => {
             this.myNodeController.clearNodes();
             this.myNodeController.addNode(newNode);
           })
-        Button("Draw Rect")
-          .margin({ bottom: 200, right: 12 })
-          .onClick(() => {
-            this.myNodeController.clearNodes();
-            this.myNodeController.addNode(rectNode);
-          })
         Button("Draw Text")
-          .margin({ bottom: 200, right: 12 })
+          .margin({ bottom: 20, right: 12 })
           .onClick(() => {
             this.myNodeController.clearNodes();
             this.myNodeController.addNode(textNode);
@@ -193,4 +201,43 @@ struct RenderTest {
       .layoutWeight(1)
     }
   }
+
+  public async CreateBitmapCanvas() {
+    const color : ArrayBuffer = new ArrayBuffer(screenWidth * screenHeight * 4);
+    let opts : image.InitializationOptions = { editable: true, pixelFormat: 3, size: { height:screenHeight, width: screenWidth}};
+    pixelMap_ = await image.createPixelMap(color, opts);
+    if (pixelMap_ === null || pixelMap_ === undefined) {
+      console.log(TAG, 'create pixelMap error');
+      return;
+    }
+
+    // 创建离屏canvas，与pixelMap绑定
+    canvas_ = new drawing.Canvas(pixelMap_);
+    if (canvas_ === null || canvas_ === undefined) {
+      console.log(TAG, 'create canvas_ error');
+      return;
+    }
+    console.log(TAG, 'create canvas_ success');
+    // 调用自定义函数绘制
+    drawCase(canvas_);
+  }
+
+  // 将离屏绘制好的bitmap绘制到屏幕上
+  public async drawImage() {
+    if (pixelMap_ === null) {
+      console.error(TAG, 'draw image pixelMap_ is null');
+      return;
+    }
+    console.log(TAG, 'drawImage success');
+    this.context.drawImage(pixelMap_, 0, 100);
+  }
+}
+
+async function drawCase(canvas: drawing.Canvas) {
+  let pen = new drawing.Pen();
+  pen.setStrokeWidth(5);
+  pen.setColor({alpha: 255, red: 255, green: 0, blue: 0});
+  canvas.attachPen(pen);
+  canvas.drawRect({ left : 200, right : 500, top : 50, bottom : 300});
+  canvas.detachPen();
 }
\ No newline at end of file
diff --git a/code/BasicFeature/Native/NdkTsDrawing/entry/src/ohosTest/ets/test/Ability.test.ets b/code/BasicFeature/Native/NdkTsDrawing/entry/src/ohosTest/ets/test/Ability.test.ets
index 67792608218c4f34c1ae5783da2faf822f10d0ff..38e218ec7654845a199587ac57151e07f989d333 100644
--- a/code/BasicFeature/Native/NdkTsDrawing/entry/src/ohosTest/ets/test/Ability.test.ets
+++ b/code/BasicFeature/Native/NdkTsDrawing/entry/src/ohosTest/ets/test/Ability.test.ets
@@ -30,7 +30,7 @@ export default function abilityTest() {
       let abilityDelegator = AbilityDelegatorRegistry.getAbilityDelegator();
       try {
         await abilityDelegator.startAbility({
-          bundleName: 'com.samples.ndkjsdrawing',
+          bundleName: 'com.samples.ndktsdrawing',
           abilityName: 'EntryAbility'
         });
       } catch (exception) {
@@ -52,7 +52,7 @@ export default function abilityTest() {
       let abilityDelegator = AbilityDelegatorRegistry.getAbilityDelegator();
       try {
         await abilityDelegator.startAbility({
-          bundleName: 'com.samples.ndkjsdrawing',
+          bundleName: 'com.samples.ndktsdrawing',
           abilityName: 'EntryAbility'
         });
       } catch (exception) {
@@ -77,7 +77,7 @@ export default function abilityTest() {
       let abilityDelegator = AbilityDelegatorRegistry.getAbilityDelegator();
       try {
         await abilityDelegator.startAbility({
-          bundleName: 'com.samples.ndkjsdrawing',
+          bundleName: 'com.samples.ndktsdrawing',
           abilityName: 'EntryAbility'
         });
       } catch (exception) {
@@ -102,7 +102,7 @@ export default function abilityTest() {
       let abilityDelegator = AbilityDelegatorRegistry.getAbilityDelegator();
       try {
         await abilityDelegator.startAbility({
-          bundleName: 'com.samples.ndkjsdrawing',
+          bundleName: 'com.samples.ndktsdrawing',
           abilityName: 'EntryAbility'
         });
       } catch (exception) {
diff --git a/code/BasicFeature/Native/NdkTsDrawing/screenshots/DrawPath.jpeg b/code/BasicFeature/Native/NdkTsDrawing/screenshots/DrawPath.jpeg
index f7a991092e0cdc3e7d876b3b3ad4c24b3c30c3f3..76b7341edfec335649d7687468c53a9e7c3a7740 100644
Binary files a/code/BasicFeature/Native/NdkTsDrawing/screenshots/DrawPath.jpeg and b/code/BasicFeature/Native/NdkTsDrawing/screenshots/DrawPath.jpeg differ
diff --git a/code/BasicFeature/Native/NdkTsDrawing/screenshots/DrawRect.jpeg b/code/BasicFeature/Native/NdkTsDrawing/screenshots/DrawRect.jpeg
index 8259857b1ae0956f1d1827db97064580ab63147f..82c6b58b4dccfc3391c3e89c939d6c6e3e43c0c8 100644
Binary files a/code/BasicFeature/Native/NdkTsDrawing/screenshots/DrawRect.jpeg and b/code/BasicFeature/Native/NdkTsDrawing/screenshots/DrawRect.jpeg differ
diff --git a/code/BasicFeature/Native/NdkTsDrawing/screenshots/DrawText.jpeg b/code/BasicFeature/Native/NdkTsDrawing/screenshots/DrawText.jpeg
index be4581bd5a5c0449b970d60cc76979c135e49a30..e870d8c317e47bd360c13752fee5a270d6e8517d 100644
Binary files a/code/BasicFeature/Native/NdkTsDrawing/screenshots/DrawText.jpeg and b/code/BasicFeature/Native/NdkTsDrawing/screenshots/DrawText.jpeg differ
diff --git a/code/BasicFeature/Native/NdkTsDrawing/screenshots/Index.jpeg b/code/BasicFeature/Native/NdkTsDrawing/screenshots/Index.jpeg
index 78e2362f75ee7aa05dff0f8f1c2a435286fe7bca..af24dab567481f8713b9ada741e0371224c22375 100644
Binary files a/code/BasicFeature/Native/NdkTsDrawing/screenshots/Index.jpeg and b/code/BasicFeature/Native/NdkTsDrawing/screenshots/Index.jpeg differ