diff --git a/jest.config.js b/jest.config.js
new file mode 100644
index 0000000..d37fa21
--- /dev/null
+++ b/jest.config.js
@@ -0,0 +1,32 @@
+module.exports = {
+  // "collectCoverage": true,
+  "coverageDirectory": "reports",
+  "collectCoverageFrom": [
+    "packages/**/src/**/*.ts",
+    "!packages/**/node_modules/**",
+    "!**/node_modules/**"
+  ],
+  "coverageReporters": [
+    // "clover",
+    // "html",
+    "text-summary"
+  ],
+  "coverageThreshold": {
+    "global": {
+      "branches": 80,
+      "functions": 80,
+      "lines": 80,
+      "statements": 80
+    }
+  },
+  "moduleFileExtensions": [
+    "js", "ts"
+  ],
+  "modulePaths": [
+    "<rootDir>"
+  ],
+  "testRegex": "(/packages/([^\/]{1,})/__tests__/.*|\\.test)\\.ts$",
+  "setupFiles": [
+    "jest-canvas-mock"
+  ]
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 312483f..b2b8278 100644
--- a/package.json
+++ b/package.json
@@ -21,9 +21,11 @@
     "@babel/preset-typescript": "^7.13.0",
     "@microsoft/api-extractor": "^7.13.2",
     "@rollup/plugin-node-resolve": "^11.2.1",
+    "@types/jest": "^26.0.23",
     "@typescript-eslint/eslint-plugin": "^4.25.0",
     "@typescript-eslint/parser": "^4.25.0",
     "babel-jest": "^26.6.3",
+    "canvas": "^2.8.0",
     "chalk": "^4.1.0",
     "eslint": "^7.27.0",
     "execa": "^5.0.0",
@@ -31,6 +33,7 @@
     "http-server": "^0.12.3",
     "husky": "^6.0.0",
     "jest": "^26.6.3",
+    "jest-canvas-mock": "^2.3.1",
     "jimp": "^0.16.1",
     "koa-compose": "^4.1.0",
     "lerna": "^3.22.1",
diff --git a/packages/board/__tests__/__snapshots__/index.test.ts.snap b/packages/board/__tests__/__snapshots__/index.test.ts.snap
new file mode 100644
index 0000000..1cfef36
--- /dev/null
+++ b/packages/board/__tests__/__snapshots__/index.test.ts.snap
@@ -0,0 +1,129 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`testing 1`] = `
+Array [
+  Object {
+    "props": Object {
+      "height": 1600,
+      "width": 2400,
+      "x": 0,
+      "y": 0,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "clearRect",
+  },
+  Object {
+    "props": Object {
+      "height": 1600,
+      "width": 2400,
+      "x": 0,
+      "y": 0,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "clearRect",
+  },
+  Object {
+    "props": Object {
+      "dHeight": 1600,
+      "dWidth": 2400,
+      "dx": 0,
+      "dy": 0,
+      "img": <canvas
+        height="1600"
+        width="2400"
+      />,
+      "sHeight": 1600,
+      "sWidth": 2400,
+      "sx": 0,
+      "sy": 0,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "drawImage",
+  },
+]
+`;
+
+exports[`testing 2`] = `
+Array [
+  Object {
+    "props": Object {
+      "height": 1600,
+      "width": 2400,
+      "x": 0,
+      "y": 0,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "clearRect",
+  },
+  Object {
+    "props": Object {
+      "height": 1600,
+      "width": 2400,
+      "x": 0,
+      "y": 0,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "clearRect",
+  },
+  Object {
+    "props": Object {
+      "dHeight": 1600,
+      "dWidth": 2400,
+      "dx": 0,
+      "dy": 0,
+      "img": <canvas
+        height="1600"
+        width="2400"
+      />,
+      "sHeight": 1600,
+      "sWidth": 2400,
+      "sx": 0,
+      "sy": 0,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "drawImage",
+  },
+]
+`;
diff --git a/packages/board/__tests__/index.test.ts b/packages/board/__tests__/index.test.ts
new file mode 100644
index 0000000..2485479
--- /dev/null
+++ b/packages/board/__tests__/index.test.ts
@@ -0,0 +1,81 @@
+import Board from './../src';
+
+test('testing', async () => {  
+  document.body.innerHTML = `
+    <div id="mount"></div>
+  `;
+  const opts = {
+    width: 600,
+    height: 400,
+    devicePixelRatio: 4
+  }
+  const mount = document.querySelector('#mount') as HTMLDivElement;
+  const board = new Board(mount, opts);
+
+  const ctx = board.getContext();
+  const data = {
+    elements: [
+      {
+        x: 10,
+        y: 10,
+        w: 200,
+        h: 120,
+        type: 'rect',
+        desc: {
+          color: '#f0f0f0',
+        }
+      },
+      {
+        x: 80,
+        y: 80,
+        w: 200,
+        h: 120,
+        type: 'rect',
+        desc: {
+          color: '#cccccc',
+        }
+      },
+      {
+        x: 160,
+        y: 160,
+        w: 200,
+        h: 120,
+        type: 'rect',
+        desc: {
+          color: '#c0c0c0',
+        }
+      },
+      {
+        x: 400 - 10,
+        y: 300 - 10,
+        w: 200,
+        h: 100,
+        type: 'rect',
+        desc: {
+          color: '#e0e0e0',
+        }
+      }
+    ]
+  };
+
+  board.clear();
+  ctx.clearRect(0, 0, opts.width, opts.height);
+  ctx.setFillStyle('#ffffff');
+  ctx.fillRect(0, 0, opts.width, opts.height);
+  data.elements.forEach(ele => {
+    ctx.setFillStyle(ele.desc.color);
+    ctx.fillRect(ele.x, ele.y, ele.w, ele.h);
+  });
+  board.draw();
+
+  const originCtx = board.getOriginContext();
+  // @ts-ignore;
+  const originCalls = originCtx.__getDrawCalls();
+  expect(originCalls).toMatchSnapshot();
+
+  const displayCtx = board.getDisplayContext();
+   // @ts-ignore;
+   const displayCalls = displayCtx.__getDrawCalls();
+   expect(displayCalls).toMatchSnapshot();
+
+});
\ No newline at end of file
diff --git a/packages/board/src/index.ts b/packages/board/src/index.ts
index 8a00cb3..ca968d1 100644
--- a/packages/board/src/index.ts
+++ b/packages/board/src/index.ts
@@ -22,6 +22,7 @@ class Board {
   private _hasRendered = false;
   private _ctx: Context;
   private _displayCtx: CanvasRenderingContext2D;
+  private _originCtx: CanvasRenderingContext2D;
   private _scaleRatio = 1;
   private _scrollX = 0;
   private _scrollY = 0;
@@ -33,15 +34,22 @@ class Board {
     this._displayCanvas = document.createElement('canvas');
     this._mount.appendChild(this._displayCanvas);
     this._opts = this._parsePrivateOptions(opts);
-    const ctx = this._canvas.getContext('2d') as CanvasRenderingContext2D;
-    const displayCtx = this._displayCanvas.getContext('2d') as CanvasRenderingContext2D;
-    this._ctx = new Context(ctx, this._opts);
-    this._displayCtx = displayCtx;
+    this._originCtx = this._canvas.getContext('2d') as CanvasRenderingContext2D;
+    this._displayCtx = this._displayCanvas.getContext('2d') as CanvasRenderingContext2D;
+    this._ctx = new Context(this._originCtx, this._opts);
     this._watcher = new Watcher(this._displayCanvas);
 
     this._render();
   }
 
+  getDisplayContext(): CanvasRenderingContext2D {
+    return this._displayCtx;
+  }
+
+  getOriginContext(): CanvasRenderingContext2D {
+    return this._displayCtx;
+  }
+
   getContext(): Context {
     return this._ctx;
   }