diff --git a/entry/src/main/ets/common/CommonConstants.ets b/entry/src/main/ets/common/CommonConstants.ets
index c77d7b601d0afdec6fb2cb9d64f35667d2fcf200..c292d844cc13d67a7e5d4c77b9810e2beb17e4a9 100644
--- a/entry/src/main/ets/common/CommonConstants.ets
+++ b/entry/src/main/ets/common/CommonConstants.ets
@@ -44,6 +44,11 @@ export class CommonConstants {
    */
   static readonly TWENTY_ONE: number = 21;
 
+  /**
+   * Canvas width.
+   */
+  static readonly CANVAS_WIDTH: number = 750;
+
   /**
    * One hundred.
    */
diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets
index 7a492d614ed6c124b4d36d7f1f78969c8fcf0d1b..a2c295c26b6b8709a1b427a11244fdb98dcf56c6 100644
--- a/entry/src/main/ets/pages/Index.ets
+++ b/entry/src/main/ets/pages/Index.ets
@@ -13,6 +13,7 @@
  * limitations under the License.
  */
 
+import { display } from '@kit.ArkUI';
 import DrawInvoker from '../viewmodel/DrawInvoker';
 import DrawPath from '../viewmodel/IDraw';
 import { IBrush } from '../viewmodel/IBrush';
@@ -30,8 +31,10 @@ struct DrawCanvas {
   @State isPaint: boolean = true;
   @State isShow: boolean = false;
   @State isMarker: boolean = false;
-  @State scaleValue: number = 1;
-  @State pinchValue: number = 1;
+  @State scaleValueX: number = 1;
+  @State scaleValueY: number = 1;
+  @State pinchValueX: number = 1;
+  @State pinchValueY: number = 1;
   @State strokeWidth: number = 3;
   @State alpha: number = 1;
   @State color: string = '#000000';
@@ -54,6 +57,23 @@ struct DrawCanvas {
     this.mPaint.setColor(CommonConstants.BLACK);
     this.mPaint.setGlobalAlpha(CommonConstants.ONE);
     this.mBrush = new NormalBrush();
+    display.on('foldStatusChange', (data: display.FoldStatus) => {
+      if (data === 2) {
+        this.scaleValueX = 0.5;
+        this.pinchValueX = 0.5;
+        this.scaleValueY = 1;
+        this.pinchValueY = 1;
+        this.context.clearRect(0, 0, this.context.width, this.context.height);
+        this.drawInvoker.execute(this.context);
+      } else if (data === 1) {
+        this.scaleValueX = 1;
+        this.scaleValueY = 1;
+        this.pinchValueX = 1;
+        this.pinchValueY = 1;
+        this.context.clearRect(0, 0, this.context.width, this.context.height);
+        this.drawInvoker.execute(this.context);
+      }
+    })
   }
 
   createDraw() {
@@ -134,8 +154,8 @@ struct DrawCanvas {
   build() {
     Stack({ alignContent: Alignment.Bottom }) {
       Canvas(this.context)
-        .width(CommonConstants.ONE_HUNDRED_PERCENT)
-        .height(CommonConstants.ONE_HUNDRED_PERCENT)
+        .width(CommonConstants.CANVAS_WIDTH)
+        .height(CommonConstants.CANVAS_WIDTH)
         .backgroundColor($r('sys.color.white'))
         .onTouch((event: TouchEvent) => {
           this.clean = false;
@@ -168,8 +188,8 @@ struct DrawCanvas {
           }
         })
         .scale({
-          x: this.scaleValue,
-          y: this.scaleValue,
+          x: this.scaleValueX,
+          y: this.scaleValueY,
           z: CommonConstants.ONE
         })
         .gesture(
@@ -181,11 +201,13 @@ struct DrawCanvas {
               this.context.clearRect(0, 0, this.context.width, this.context.height);
               this.drawInvoker.execute(this.context);
               if (event) {
-                this.scaleValue = this.pinchValue * event.scale;
+                this.scaleValueX = this.pinchValueX * event.scale;
+                this.scaleValueY = this.pinchValueY * event.scale;
               }
             })
             .onActionEnd(() => {
-              this.pinchValue = this.scaleValue;
+              this.pinchValueX = this.scaleValueX;
+              this.pinchValueY = this.scaleValueY;
               this.context.clearRect(0, 0, this.context.width, this.context.height);
               this.drawInvoker.execute(this.context);
             })
@@ -204,13 +226,15 @@ struct DrawCanvas {
               this.context.clearRect(0, 0, this.context.width, this.context.height);
               this.drawInvoker.execute(this.context);
               if (event) {
-                this.scaleValue = this.pinchValue * event.scale;
+                this.scaleValueX = this.pinchValueX * event.scale;
+                this.scaleValueY = this.pinchValueY * event.scale;
               }
             })
             .onActionEnd(() => {
               this.context.clearRect(0, 0, this.context.width, this.context.height);
               this.drawInvoker.execute(this.context);
-              this.pinchValue = this.scaleValue;
+              this.pinchValueX = this.scaleValueX;
+              this.pinchValueY = this.scaleValueY;
             })
         )
       Row() {