diff --git a/packages/board/__tests__/__snapshots__/index.test.ts.snap b/packages/board/__tests__/__snapshots__/index.test.ts.snap
index 3b5e7ad..49f584a 100644
--- a/packages/board/__tests__/__snapshots__/index.test.ts.snap
+++ b/packages/board/__tests__/__snapshots__/index.test.ts.snap
@@ -168,5 +168,27 @@ Array [
     ],
     "type": "drawImage",
   },
+  Object {
+    "props": Object {
+      "dHeight": 150,
+      "dWidth": 300,
+      "dx": 0,
+      "dy": 0,
+      "img": <canvas />,
+      "sHeight": 150,
+      "sWidth": 300,
+      "sx": 0,
+      "sy": 0,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "drawImage",
+  },
 ]
 `;
diff --git a/packages/board/__tests__/__snapshots__/other-api.test.ts.snap b/packages/board/__tests__/__snapshots__/other-api.test.ts.snap
index dcf4c82..ff9ac7e 100644
--- a/packages/board/__tests__/__snapshots__/other-api.test.ts.snap
+++ b/packages/board/__tests__/__snapshots__/other-api.test.ts.snap
@@ -168,5 +168,27 @@ Array [
     ],
     "type": "drawImage",
   },
+  Object {
+    "props": Object {
+      "dHeight": 150,
+      "dWidth": 300,
+      "dx": -2400,
+      "dy": -1600,
+      "img": <canvas />,
+      "sHeight": 150,
+      "sWidth": 300,
+      "sx": 0,
+      "sy": 0,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "drawImage",
+  },
 ]
 `;
diff --git a/packages/board/__tests__/__snapshots__/scale.test.ts.snap b/packages/board/__tests__/__snapshots__/scale.test.ts.snap
index fa27093..bd59c39 100644
--- a/packages/board/__tests__/__snapshots__/scale.test.ts.snap
+++ b/packages/board/__tests__/__snapshots__/scale.test.ts.snap
@@ -168,6 +168,28 @@ Array [
     ],
     "type": "drawImage",
   },
+  Object {
+    "props": Object {
+      "dHeight": 150,
+      "dWidth": 300,
+      "dx": 200,
+      "dy": 0,
+      "img": <canvas />,
+      "sHeight": 150,
+      "sWidth": 300,
+      "sx": 0,
+      "sy": 0,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "drawImage",
+  },
 ]
 `;
 
@@ -339,6 +361,28 @@ Array [
     ],
     "type": "drawImage",
   },
+  Object {
+    "props": Object {
+      "dHeight": 150,
+      "dWidth": 300,
+      "dx": 0,
+      "dy": 200,
+      "img": <canvas />,
+      "sHeight": 150,
+      "sWidth": 300,
+      "sx": 0,
+      "sy": 0,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "drawImage",
+  },
 ]
 `;
 
@@ -510,6 +554,28 @@ Array [
     ],
     "type": "drawImage",
   },
+  Object {
+    "props": Object {
+      "dHeight": 150,
+      "dWidth": 300,
+      "dx": 0,
+      "dy": 0,
+      "img": <canvas />,
+      "sHeight": 150,
+      "sWidth": 300,
+      "sx": 0,
+      "sy": 0,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "drawImage",
+  },
 ]
 `;
 
@@ -681,5 +747,27 @@ Array [
     ],
     "type": "drawImage",
   },
+  Object {
+    "props": Object {
+      "dHeight": 150,
+      "dWidth": 300,
+      "dx": 600,
+      "dy": 400,
+      "img": <canvas />,
+      "sHeight": 150,
+      "sWidth": 300,
+      "sx": 0,
+      "sy": 0,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "drawImage",
+  },
 ]
 `;
diff --git a/packages/board/__tests__/__snapshots__/scroll.test.ts.snap b/packages/board/__tests__/__snapshots__/scroll.test.ts.snap
index d2b1942..47ad42e 100644
--- a/packages/board/__tests__/__snapshots__/scroll.test.ts.snap
+++ b/packages/board/__tests__/__snapshots__/scroll.test.ts.snap
@@ -168,5 +168,27 @@ Array [
     ],
     "type": "drawImage",
   },
+  Object {
+    "props": Object {
+      "dHeight": 150,
+      "dWidth": 300,
+      "dx": -2400,
+      "dy": -1600,
+      "img": <canvas />,
+      "sHeight": 150,
+      "sWidth": 300,
+      "sx": 0,
+      "sy": 0,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "drawImage",
+  },
 ]
 `;
diff --git a/packages/board/__tests__/__snapshots__/wheel.test.ts.snap b/packages/board/__tests__/__snapshots__/wheel.test.ts.snap
index c9d2232..8da0ae8 100644
--- a/packages/board/__tests__/__snapshots__/wheel.test.ts.snap
+++ b/packages/board/__tests__/__snapshots__/wheel.test.ts.snap
@@ -168,6 +168,28 @@ Array [
     ],
     "type": "drawImage",
   },
+  Object {
+    "props": Object {
+      "dHeight": 150,
+      "dWidth": 300,
+      "dx": -2400,
+      "dy": -1600,
+      "img": <canvas />,
+      "sHeight": 150,
+      "sWidth": 300,
+      "sx": 0,
+      "sy": 0,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "drawImage",
+  },
   Object {
     "props": Object {
       "height": 80,
diff --git a/packages/board/__tests__/index.test.ts b/packages/board/__tests__/index.test.ts
index f9178c0..9a8bb4c 100644
--- a/packages/board/__tests__/index.test.ts
+++ b/packages/board/__tests__/index.test.ts
@@ -30,12 +30,12 @@ describe('@idraw/board', () => {
     });
     board.draw();
   
-    const originCtx = board.getOriginContext();
+    const originCtx = board.getOriginContext2D();
     // @ts-ignore;
     const originCalls = originCtx.__getDrawCalls();
     expect(originCalls).toMatchSnapshot();
   
-    const displayCtx = board.getDisplayContext();
+    const displayCtx = board.getDisplayContext2D();
     // @ts-ignore;
     const displayCalls = displayCtx.__getDrawCalls();
     expect(displayCalls).toMatchSnapshot();
diff --git a/packages/board/__tests__/other-api.test.ts b/packages/board/__tests__/other-api.test.ts
index 14033d5..940ebda 100644
--- a/packages/board/__tests__/other-api.test.ts
+++ b/packages/board/__tests__/other-api.test.ts
@@ -42,12 +42,12 @@ describe('@idraw/board', () => {
   
     board.draw();
   
-    const originCtx = board.getOriginContext();
+    const originCtx = board.getOriginContext2D();
     // @ts-ignore;
     const originCalls = originCtx.__getDrawCalls();
     expect(originCalls).toMatchSnapshot();
   
-    const displayCtx = board.getDisplayContext();
+    const displayCtx = board.getDisplayContext2D();
     // @ts-ignore;
     const displayCalls = displayCtx.__getDrawCalls();
     expect(displayCalls).toMatchSnapshot();
diff --git a/packages/board/__tests__/scale.test.ts b/packages/board/__tests__/scale.test.ts
index 746dd39..0a2644d 100644
--- a/packages/board/__tests__/scale.test.ts
+++ b/packages/board/__tests__/scale.test.ts
@@ -33,12 +33,12 @@ describe('@idraw/board', () => {
     expect(result).toStrictEqual({"position":{"top":100,"bottom":100,"left":150,"right":150},"size":{"x":75,"y":50,"w":300,"h":200}})
     board.draw();
   
-    const originCtx = board.getOriginContext();
+    const originCtx = board.getOriginContext2D();
     // @ts-ignore;
     const originCalls = originCtx.__getDrawCalls();
     expect(originCalls).toMatchSnapshot();
   
-    const displayCtx = board.getDisplayContext();
+    const displayCtx = board.getDisplayContext2D();
     // @ts-ignore;
     const displayCalls = displayCtx.__getDrawCalls();
     expect(displayCalls).toMatchSnapshot();
@@ -75,12 +75,12 @@ describe('@idraw/board', () => {
     expect(result).toStrictEqual({"position":{"top":0,"bottom":-50,"left":50,"right":50},"size":{"x":25,"y":0,"w":500,"h":450}})
     board.draw();
   
-    const originCtx = board.getOriginContext();
+    const originCtx = board.getOriginContext2D();
     // @ts-ignore;
     const originCalls = originCtx.__getDrawCalls();
     expect(originCalls).toMatchSnapshot();
   
-    const displayCtx = board.getDisplayContext();
+    const displayCtx = board.getDisplayContext2D();
     // @ts-ignore;
     const displayCalls = displayCtx.__getDrawCalls();
     expect(displayCalls).toMatchSnapshot();
@@ -119,12 +119,12 @@ describe('@idraw/board', () => {
     expect(result).toStrictEqual({"position":{"top":50,"bottom":50,"left":0,"right":0},"size":{"x":0,"y":25,"w":600,"h":300}})
     board.draw();
   
-    const originCtx = board.getOriginContext();
+    const originCtx = board.getOriginContext2D();
     // @ts-ignore;
     const originCalls = originCtx.__getDrawCalls();
     expect(originCalls).toMatchSnapshot();
   
-    const displayCtx = board.getDisplayContext();
+    const displayCtx = board.getDisplayContext2D();
     // @ts-ignore;
     const displayCalls = displayCtx.__getDrawCalls();
     expect(displayCalls).toMatchSnapshot();
@@ -163,12 +163,12 @@ describe('@idraw/board', () => {
     expect(result).toStrictEqual({"position":{"top":0,"bottom":-80,"left":0,"right":-200},"size":{"x":0,"y":0,"w":800,"h":480}})
     board.draw();
   
-    const originCtx = board.getOriginContext();
+    const originCtx = board.getOriginContext2D();
     // @ts-ignore;
     const originCalls = originCtx.__getDrawCalls();
     expect(originCalls).toMatchSnapshot();
   
-    const displayCtx = board.getDisplayContext();
+    const displayCtx = board.getDisplayContext2D();
     // @ts-ignore;
     const displayCalls = displayCtx.__getDrawCalls();
     expect(displayCalls).toMatchSnapshot();
diff --git a/packages/board/__tests__/scroll.test.ts b/packages/board/__tests__/scroll.test.ts
index 9443979..28b2ee8 100644
--- a/packages/board/__tests__/scroll.test.ts
+++ b/packages/board/__tests__/scroll.test.ts
@@ -42,12 +42,12 @@ describe('@idraw/board', () => {
   
     board.draw();
   
-    const originCtx = board.getOriginContext();
+    const originCtx = board.getOriginContext2D();
     // @ts-ignore;
     const originCalls = originCtx.__getDrawCalls();
     expect(originCalls).toMatchSnapshot();
   
-    const displayCtx = board.getDisplayContext();
+    const displayCtx = board.getDisplayContext2D();
     // @ts-ignore;
     const displayCalls = displayCtx.__getDrawCalls();
     expect(displayCalls).toMatchSnapshot();
diff --git a/packages/board/__tests__/wheel.test.ts b/packages/board/__tests__/wheel.test.ts
index 28cd07a..d5e49e9 100644
--- a/packages/board/__tests__/wheel.test.ts
+++ b/packages/board/__tests__/wheel.test.ts
@@ -43,12 +43,12 @@ describe('@idraw/board', () => {
   
     board.draw();
   
-    const originCtx = board.getOriginContext();
+    const originCtx = board.getOriginContext2D();
     // @ts-ignore;
     const originCalls = originCtx.__getDrawCalls();
     expect(originCalls).toMatchSnapshot();
   
-    const displayCtx = board.getDisplayContext();
+    const displayCtx = board.getDisplayContext2D();
     // @ts-ignore;
     const displayCalls = displayCtx.__getDrawCalls();
     expect(displayCalls).toMatchSnapshot();
diff --git a/packages/board/src/index.ts b/packages/board/src/index.ts
index 8cde7fd..67cadd9 100644
--- a/packages/board/src/index.ts
+++ b/packages/board/src/index.ts
@@ -1,6 +1,7 @@
 import { 
   TypeScreenPosition, TypeScreenSize, TypeScreenContext, TypePoint, TypePointCursor,
-  TypeBoardOptions, TypeBoardSizeOptions, TypePlugin, TypeContext } from '@idraw/types';
+  TypeBoardOptions, TypeBoardSizeOptions, TypePlugin, TypeContext, 
+} from '@idraw/types';
 import util from '@idraw/util';
 import { ScreenWatcher } from './lib/screen-watcher';
 import { setStyle } from './lib/style';
@@ -9,8 +10,8 @@ import { Scroller } from './lib/scroller';
 import { Screen } from './lib/screen';
 import { TempData } from './lib/temp';
 import {
-  _canvas, _displayCanvas, _mount, _opts, _hasRendered, _ctx, _displayCtx,
-  _originCtx, _watcher, _render, _parsePrivateOptions, _scroller,
+  _canvas, _displayCanvas, _mount, _opts, _hasRendered, _ctx,
+  _watcher, _render, _parsePrivateOptions, _scroller, _helperCanvas, _helperCtx,
   _initEvent, _doScrollX, _doScrollY, _doMoveScroll, _resetContext,
   _screen, _tempData
 } from './names';
@@ -23,14 +24,16 @@ type PrivateOptions = TypeBoardOptions & {
 }
 
 class Board {
+
+  private [_hasRendered] = false;
+
   private [_canvas]: HTMLCanvasElement;
+  private [_helperCanvas]: HTMLCanvasElement;
   private [_displayCanvas]: HTMLCanvasElement;
   private [_mount]: HTMLDivElement;
   private [_opts]: PrivateOptions;
-  private [_hasRendered] = false;
   private [_ctx]: TypeContext;
-  private [_displayCtx]: CanvasRenderingContext2D;
-  private [_originCtx]: CanvasRenderingContext2D;
+  private [_helperCtx]: TypeContext;
   // private [_watcher]: Watcher;
   private [_watcher]: ScreenWatcher;
   private [_scroller]: Scroller;
@@ -42,17 +45,20 @@ class Board {
 
     this[_mount] = mount;
     this[_canvas] = document.createElement('canvas');
+    this[_helperCanvas] = document.createElement('canvas');
     this[_displayCanvas] = document.createElement('canvas');
     this[_mount].appendChild(this[_displayCanvas]);
     this[_opts] = this[_parsePrivateOptions](opts);
-    this[_originCtx] = this[_canvas].getContext('2d') as CanvasRenderingContext2D;
-    this[_displayCtx] = this[_displayCanvas].getContext('2d') as CanvasRenderingContext2D;
-    this[_ctx] = new Context(this[_originCtx], this[_opts]);
+    const originCtx = this[_canvas].getContext('2d') as CanvasRenderingContext2D;
+    const displayCtx = this[_displayCanvas].getContext('2d') as CanvasRenderingContext2D;
+    const helperCtx = this[_displayCanvas].getContext('2d') as CanvasRenderingContext2D;
+    this[_ctx] = new Context(originCtx, this[_opts]);
+    this[_helperCtx] = new Context(helperCtx, this[_opts]);
     this[_screen] = new Screen(this[_ctx], this[_opts]);
     // this[_watcher] = new Watcher(this[_displayCanvas]);
     this[_watcher] = new ScreenWatcher(this[_displayCanvas], this[_ctx]);
     this[_scroller] = new Scroller(
-      this[_displayCtx], {
+      displayCtx, {
         width: opts.width,
         height: opts.height,
         devicePixelRatio: opts.devicePixelRatio || 1,
@@ -61,21 +67,30 @@ class Board {
     this[_render]();
   }
 
-  getDisplayContext(): CanvasRenderingContext2D {
-    return this[_displayCtx];
+  getDisplayContext2D(): CanvasRenderingContext2D {
+    return this[_displayCanvas].getContext('2d') as CanvasRenderingContext2D;
   }
 
-  getOriginContext(): CanvasRenderingContext2D {
-    return this[_originCtx];
+  getOriginContext2D(): CanvasRenderingContext2D {
+    return this[_ctx].getContext();
+  }
+
+  getHelperContext2D(): CanvasRenderingContext2D {
+    return this[_helperCtx].getContext();
   }
 
   getContext(): TypeContext {
     return this[_ctx];
   }
 
+  getHelperContext(): TypeContext {
+    return this[_helperCtx];
+  }
+
   scale(scaleRatio: number): TypeScreenContext {
     if (scaleRatio > 0) {
       this[_ctx].setTransform({ scale: scaleRatio });
+      this[_helperCtx].setTransform({ scale: scaleRatio });
     }
     const { position, size } = this[_screen].calcScreen();
     return { position, size};
@@ -90,6 +105,7 @@ class Board {
     })
     if (x >= 0 || x < 0) {
       this[_ctx].setTransform({ scrollX: x });
+      this[_helperCtx].setTransform({ scrollX: x })
     }
     const { position, size, canScrollXNext, canScrollYNext, canScrollXPrev, canScrollYPrev } = this[_screen].calcScreen();
     this[_watcher].setStatusMap({
@@ -110,6 +126,7 @@ class Board {
     })
     if (y >= 0 || y < 0) {
       this[_ctx].setTransform({ scrollY: y });
+      this[_helperCtx].setTransform({ scrollY: y });
     }
     const { position, size, canScrollXNext, canScrollYNext, canScrollXPrev, canScrollYPrev } = this[_screen].calcScreen();
     this[_watcher].setStatusMap({
@@ -128,9 +145,13 @@ class Board {
   draw(): TypeScreenContext {
     this.clear();
     const { position, deviceSize, size } = this[_screen].calcScreen();
-    this[_displayCtx].drawImage(
+    const displayCtx = this[_displayCanvas].getContext('2d');
+    displayCtx?.drawImage(
       this[_canvas], deviceSize.x, deviceSize.y, deviceSize.w, deviceSize.h
     );
+    displayCtx?.drawImage(
+      this[_helperCanvas], deviceSize.x, deviceSize.y, deviceSize.w, deviceSize.h
+    );
     if (this[_opts].canScroll === true) {
       this[_scroller].draw(position);
     }
@@ -142,7 +163,8 @@ class Board {
   }
 
   clear() {
-    this[_displayCtx].clearRect(0, 0, this[_displayCanvas].width, this[_displayCanvas].height);
+    const displayCtx = this[_displayCanvas].getContext('2d');
+    displayCtx?.clearRect(0, 0, this[_displayCanvas].width, this[_displayCanvas].height);
   }
 
   on<T extends keyof TypeBoardEventArgMap >(name: T, callback: (p: TypeBoardEventArgMap[T]) => void) {
@@ -172,6 +194,7 @@ class Board {
     this[_opts] = { ...this[_opts], ...opts };
     this[_resetContext]();
     this[_ctx].resetSize(opts);
+    this[_helperCtx].resetSize(opts);
     this[_screen].resetSize(opts);
     this[_scroller].resetSize({
       width: this[_opts].width,
diff --git a/packages/board/src/names.ts b/packages/board/src/names.ts
index 08ce95b..44c9383 100644
--- a/packages/board/src/names.ts
+++ b/packages/board/src/names.ts
@@ -1,14 +1,12 @@
 const _canvas = Symbol('_canvas');
 const _displayCanvas = Symbol('_displayCanvas');
-const _maskCanvas = Symbol('_maskCanvas');
+const _helperCanvas = Symbol('_helperCanvas');
 const _mount = Symbol('_mount');
 const _opts = Symbol('_opts');
 const _hasRendered = Symbol('_hasRendered');
 const _ctx = Symbol('_ctx');
-const _maskCtx = Symbol('_maskCtx');
+const _helperCtx = Symbol('_helperCtx');
 
-const _displayCtx = Symbol('_displayCtx');
-const _originCtx = Symbol('_originCtx');
 const _watcher = Symbol('_watcher');
 const _render = Symbol('_render');
 const _parsePrivateOptions = Symbol('_parsePrivateOptions');
@@ -23,8 +21,8 @@ const _screen = Symbol('_screen');
 const _tempData = Symbol('_tempData');
 
 export {
-  _canvas, _displayCanvas, _mount, _opts, _hasRendered, _ctx, _displayCtx,
-  _originCtx, _watcher, _render, _parsePrivateOptions, _scroller,
+  _canvas, _displayCanvas, _mount, _opts, _hasRendered, _ctx,
+  _watcher, _render, _parsePrivateOptions, _scroller,
   _initEvent, _doScrollX, _doScrollY, _doMoveScroll, _resetContext,
-  _screen, _tempData, _maskCtx,  _maskCanvas,
+  _screen, _tempData, _helperCtx,  _helperCanvas,
 };
\ No newline at end of file
diff --git a/packages/core/__tests__/__snapshots__/index.test.ts.snap b/packages/core/__tests__/__snapshots__/index.test.ts.snap
index c6d8653..c9ebfdb 100644
--- a/packages/core/__tests__/__snapshots__/index.test.ts.snap
+++ b/packages/core/__tests__/__snapshots__/index.test.ts.snap
@@ -589,5 +589,27 @@ Array [
     ],
     "type": "drawImage",
   },
+  Object {
+    "props": Object {
+      "dHeight": 150,
+      "dWidth": 300,
+      "dx": 0,
+      "dy": 0,
+      "img": <canvas />,
+      "sHeight": 150,
+      "sWidth": 300,
+      "sx": 0,
+      "sy": 0,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "drawImage",
+  },
 ]
 `;
diff --git a/packages/core/__tests__/__snapshots__/move.test.ts.snap b/packages/core/__tests__/__snapshots__/move.test.ts.snap
index 78db278..f4e1987 100644
--- a/packages/core/__tests__/__snapshots__/move.test.ts.snap
+++ b/packages/core/__tests__/__snapshots__/move.test.ts.snap
@@ -589,6 +589,28 @@ Array [
     ],
     "type": "drawImage",
   },
+  Object {
+    "props": Object {
+      "dHeight": 150,
+      "dWidth": 300,
+      "dx": 0,
+      "dy": 0,
+      "img": <canvas />,
+      "sHeight": 150,
+      "sWidth": 300,
+      "sx": 0,
+      "sy": 0,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "drawImage",
+  },
 ]
 `;
 
@@ -1181,5 +1203,27 @@ Array [
     ],
     "type": "drawImage",
   },
+  Object {
+    "props": Object {
+      "dHeight": 150,
+      "dWidth": 300,
+      "dx": 0,
+      "dy": 0,
+      "img": <canvas />,
+      "sHeight": 150,
+      "sWidth": 300,
+      "sx": 0,
+      "sy": 0,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "drawImage",
+  },
 ]
 `;
diff --git a/packages/core/__tests__/index.test.ts b/packages/core/__tests__/index.test.ts
index d8bb18f..39a0a88 100644
--- a/packages/core/__tests__/index.test.ts
+++ b/packages/core/__tests__/index.test.ts
@@ -29,12 +29,12 @@ describe("@idraw/core", () => {
 
     requestAnimationFrameMock.triggerNextAnimationFrame();
   
-    const originCtx = core.__getOriginContext();
+    const originCtx = core.__getOriginContext2D();
     // @ts-ignore;
     const originCalls = originCtx.__getDrawCalls();
     expect(originCalls).toMatchSnapshot();
   
-    const displayCtx = core.__getDisplayContext();
+    const displayCtx = core.__getDisplayContext2D();
     // @ts-ignore;
     const displayCalls = displayCtx.__getDrawCalls();
     expect(displayCalls).toMatchSnapshot();
diff --git a/packages/core/__tests__/move.test.ts b/packages/core/__tests__/move.test.ts
index 7e6556c..9affd56 100644
--- a/packages/core/__tests__/move.test.ts
+++ b/packages/core/__tests__/move.test.ts
@@ -37,12 +37,12 @@ describe("@idraw/core", () => {
 
     requestAnimationFrameMock.triggerNextAnimationFrame();
   
-    const originCtx = idraw.__getOriginContext();
+    const originCtx = idraw.__getOriginContext2D();
     // @ts-ignore;
     const originCalls = originCtx.__getDrawCalls();
     expect(originCalls).toMatchSnapshot();
   
-    const displayCtx = idraw.__getDisplayContext();
+    const displayCtx = idraw.__getDisplayContext2D();
     // @ts-ignore;
     const displayCalls = displayCtx.__getDrawCalls();
     expect(displayCalls).toMatchSnapshot();
@@ -67,12 +67,12 @@ describe("@idraw/core", () => {
 
     requestAnimationFrameMock.triggerNextAnimationFrame();
   
-    const originCtx = idraw.__getOriginContext();
+    const originCtx = idraw.__getOriginContext2D();
     // @ts-ignore;
     const originCalls = originCtx.__getDrawCalls();
     expect(originCalls).toMatchSnapshot();
   
-    const displayCtx = idraw.__getDisplayContext();
+    const displayCtx = idraw.__getDisplayContext2D();
     // @ts-ignore;
     const displayCalls = displayCtx.__getDrawCalls();
     expect(displayCalls).toMatchSnapshot();
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index be153b3..9e8bc2a 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -230,12 +230,12 @@ class Core {
     return this[_board].getContext();
   }
 
-  __getDisplayContext(): CanvasRenderingContext2D {
-    return this[_board].getDisplayContext();
+  __getDisplayContext2D(): CanvasRenderingContext2D {
+    return this[_board].getDisplayContext2D();
   }
 
-  __getOriginContext(): CanvasRenderingContext2D {
-    return this[_board].getOriginContext();
+  __getOriginContext2D(): CanvasRenderingContext2D {
+    return this[_board].getOriginContext2D();
   }
 
 
diff --git a/packages/idraw/__tests__/__snapshots__/index.test.ts.snap b/packages/idraw/__tests__/__snapshots__/index.test.ts.snap
index 90c61c3..d80b4ad 100644
--- a/packages/idraw/__tests__/__snapshots__/index.test.ts.snap
+++ b/packages/idraw/__tests__/__snapshots__/index.test.ts.snap
@@ -589,6 +589,28 @@ Array [
     ],
     "type": "drawImage",
   },
+  Object {
+    "props": Object {
+      "dHeight": 150,
+      "dWidth": 300,
+      "dx": 0,
+      "dy": 0,
+      "img": <canvas />,
+      "sHeight": 150,
+      "sWidth": 300,
+      "sx": 0,
+      "sy": 0,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "drawImage",
+  },
 ]
 `;
 
@@ -1181,5 +1203,27 @@ Array [
     ],
     "type": "drawImage",
   },
+  Object {
+    "props": Object {
+      "dHeight": 150,
+      "dWidth": 300,
+      "dx": 0,
+      "dy": 0,
+      "img": <canvas />,
+      "sHeight": 150,
+      "sWidth": 300,
+      "sx": 0,
+      "sy": 0,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "drawImage",
+  },
 ]
 `;
diff --git a/packages/idraw/__tests__/index.test.ts b/packages/idraw/__tests__/index.test.ts
index 616be2b..435e296 100644
--- a/packages/idraw/__tests__/index.test.ts
+++ b/packages/idraw/__tests__/index.test.ts
@@ -36,12 +36,12 @@ describe("idraw", () => {
 
     requestAnimationFrameMock.triggerNextAnimationFrame();
   
-    const originCtx = idraw.__getOriginContext();
+    const originCtx = idraw.__getOriginContext2D();
     // @ts-ignore;
     const originCalls = originCtx.__getDrawCalls();
     expect(originCalls).toMatchSnapshot();
   
-    const displayCtx = idraw.__getDisplayContext();
+    const displayCtx = idraw.__getDisplayContext2D();
     // @ts-ignore;
     const displayCalls = displayCtx.__getDrawCalls();
     expect(displayCalls).toMatchSnapshot();
@@ -87,12 +87,12 @@ describe("idraw", () => {
 
     requestAnimationFrameMock.triggerNextAnimationFrame();
   
-    const originCtx = idraw.__getOriginContext();
+    const originCtx = idraw.__getOriginContext2D();
     // @ts-ignore;
     const originCalls = originCtx.__getDrawCalls();
     expect(originCalls).toMatchSnapshot();
   
-    const displayCtx = idraw.__getDisplayContext();
+    const displayCtx = idraw.__getDisplayContext2D();
     // @ts-ignore;
     const displayCalls = displayCtx.__getDrawCalls();
     expect(displayCalls).toMatchSnapshot();
diff --git a/packages/idraw/src/mixins/file.ts b/packages/idraw/src/mixins/file.ts
index b05a3ac..2c22274 100644
--- a/packages/idraw/src/mixins/file.ts
+++ b/packages/idraw/src/mixins/file.ts
@@ -16,7 +16,7 @@ export async function exportDataURL(
     function listenRenderFrameComplete() {
       idraw.off('drawFrameComplete', listenRenderFrameComplete);
       idraw[_tempData].set('isDownloading', false);
-      const ctx = idraw.__getOriginContext();
+      const ctx = idraw.__getOriginContext2D();
       const canvas = ctx.canvas;
       dataURL = canvas.toDataURL(type, quality);
       resolve(dataURL);