diff --git a/__tests__/snapshot/board/examples/test/scale-001.html.jpg b/__tests__/snapshot/board/examples/test/scale-001.html.jpg
deleted file mode 100644
index 5c5b0e0..0000000
Binary files a/__tests__/snapshot/board/examples/test/scale-001.html.jpg and /dev/null differ
diff --git a/__tests__/snapshot/board/examples/test/scale-002.html.jpg b/__tests__/snapshot/board/examples/test/scale-002.html.jpg
deleted file mode 100644
index 6da9842..0000000
Binary files a/__tests__/snapshot/board/examples/test/scale-002.html.jpg and /dev/null differ
diff --git a/__tests__/snapshot/board/examples/test/scale-003.html.jpg b/__tests__/snapshot/board/examples/test/scale-003.html.jpg
deleted file mode 100644
index 4841cad..0000000
Binary files a/__tests__/snapshot/board/examples/test/scale-003.html.jpg and /dev/null differ
diff --git a/__tests__/snapshot/board/examples/test/scale-004.html.jpg b/__tests__/snapshot/board/examples/test/scale-004.html.jpg
deleted file mode 100644
index 0bb4aa3..0000000
Binary files a/__tests__/snapshot/board/examples/test/scale-004.html.jpg and /dev/null differ
diff --git a/__tests__/snapshot/board/examples/test/scale-005.html.jpg b/__tests__/snapshot/board/examples/test/scale-005.html.jpg
deleted file mode 100644
index 5ad0ed5..0000000
Binary files a/__tests__/snapshot/board/examples/test/scale-005.html.jpg and /dev/null differ
diff --git a/__tests__/snapshot/board/examples/test/scale.html.jpg b/__tests__/snapshot/board/examples/test/scale.html.jpg
new file mode 100644
index 0000000..4ced205
Binary files /dev/null and b/__tests__/snapshot/board/examples/test/scale.html.jpg differ
diff --git a/__tests__/util/browser.js b/__tests__/util/browser.js
new file mode 100644
index 0000000..be6ff33
--- /dev/null
+++ b/__tests__/util/browser.js
@@ -0,0 +1,22 @@
+function mouseDown(x,y){
+  const event = new MouseEvent('mousedown', {
+    screenX: x,
+    screenY: y,
+    clientX: x,
+    clientY: y,
+  });
+  const elem = document.elementFromPoint(x,y);
+  elem.dispatchEvent(event);
+}
+
+
+function mouseUp(x,y){
+  const event = new MouseEvent('mouseup', {
+    screenX: x,
+    screenY: y,
+    clientX: x,
+    clientY: y,
+  });
+  const elem = document.elementFromPoint(x,y);
+  elem.dispatchEvent(event);
+}
diff --git a/packages/board/examples/test/scale-001.html b/packages/board/examples/test/scale-001.html
deleted file mode 100644
index 59f8c42..0000000
--- a/packages/board/examples/test/scale-001.html
+++ /dev/null
@@ -1,59 +0,0 @@
-<html>
-  <head>
-    <style></style>
-    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
-    <style>
-      html,body { margin: 0; padding: 0; }
-      #mount canvas {
-        border-right: 1px solid #aaaaaa40;
-        border-bottom: 1px solid #aaaaaa40;
-        background-image:
-        linear-gradient(#aaaaaa40 1px, transparent 0),
-        linear-gradient(90deg, #aaaaaa40 1px, transparent 0),
-        linear-gradient(#aaa 1px, transparent 0),
-        linear-gradient(90deg, #aaa 1px, transparent 0);
-        background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
-      }
-    </style>
-  </head>
-  <body>
-
-    <div id="mount"></div>
-
-    <script src="./../../dist/index.global.js"></script>
-    <script>
-      const Board = window.iDrawBoard; 
-      const mount = document.querySelector('#mount');
-      const board = new Board(mount, {
-        width: 600,
-        height: 400,
-        contextWidth: 600,
-        contextHeight: 400,
-        devicePixelRatio: 4
-      });
-
-      const ctx = board.getContext();
-
-      ctx.setFillStyle('#ffffff');
-      ctx.fillRect(0, 0, 600, 400);
-
-      ctx.setFillStyle('#f0f0f0');
-      ctx.fillRect(10, 10, 200, 120);
-
-      ctx.setFillStyle('#cccccc');
-      ctx.fillRect(80, 80, 200, 120);
-
-      ctx.setFillStyle('#c0c0c0');
-      ctx.fillRect(160, 160, 200, 120);
-
-      ctx.setFillStyle('#e0e0e0');
-      ctx.fillRect(400 - 10, 300 - 10, 200, 100);
-
-      board.scale(0.5);
-      board.scale(1);
-      board.draw();
-
-    </script>
-
-  </body>
-</html>
\ No newline at end of file
diff --git a/packages/board/examples/test/scale-002.html b/packages/board/examples/test/scale-002.html
deleted file mode 100644
index 396ed91..0000000
--- a/packages/board/examples/test/scale-002.html
+++ /dev/null
@@ -1,63 +0,0 @@
-<html>
-  <head>
-    <style></style>
-    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
-    <style>
-      html,body { margin: 0; padding: 0; }
-      #mount canvas {
-        border-right: 1px solid #aaaaaa40;
-        border-bottom: 1px solid #aaaaaa40;
-        background-image:
-        linear-gradient(#aaaaaa40 1px, transparent 0),
-        linear-gradient(90deg, #aaaaaa40 1px, transparent 0),
-        linear-gradient(#aaa 1px, transparent 0),
-        linear-gradient(90deg, #aaa 1px, transparent 0);
-        background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
-      }
-    </style>
-  </head>
-  <body>
-
-    <div id="mount"></div>
-
-    <script src="./../../dist/index.global.js"></script>
-    <script>
-      const Board = window.iDrawBoard; 
-      const mount = document.querySelector('#mount');
-      const board = new Board(mount, {
-        width: 600,
-        height: 400,
-        contextWidth: 600,
-        contextHeight: 400,
-        devicePixelRatio: 4
-      });
-
-      const ctx = board.getContext();
-
-      ctx.setFillStyle('#ffffff');
-      ctx.fillRect(0, 0, 600, 400);
-
-      ctx.setFillStyle('#f0f0f0');
-      ctx.fillRect(10, 10, 200, 120);
-
-      ctx.setFillStyle('#cccccc');
-      ctx.fillRect(80, 80, 200, 120);
-
-      ctx.setFillStyle('#c0c0c0');
-      ctx.fillRect(160, 160, 200, 120);
-
-      ctx.setFillStyle('#e0e0e0');
-      ctx.fillRect(400 - 10, 300 - 10, 200, 100);
-
-      ctx.setFillStyle('#000');
-      ctx.fillRect(300 - 10, 200 - 10, 20, 20);
-
-      board.scale(2);
-      board.scrollX(-300);
-      board.scrollY(-200);
-      board.draw();
-
-    </script>
-
-  </body>
-</html>
\ No newline at end of file
diff --git a/packages/board/examples/test/scale-003.html b/packages/board/examples/test/scale-003.html
deleted file mode 100644
index 9fc35ab..0000000
--- a/packages/board/examples/test/scale-003.html
+++ /dev/null
@@ -1,64 +0,0 @@
-<html>
-  <head>
-    <style></style>
-    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
-    <style>
-      html,body { margin: 0; padding: 0; }
-      #mount canvas {
-        border-right: 1px solid #aaaaaa40;
-        border-bottom: 1px solid #aaaaaa40;
-        background-image:
-        linear-gradient(#aaaaaa40 1px, transparent 0),
-        linear-gradient(90deg, #aaaaaa40 1px, transparent 0),
-        linear-gradient(#aaa 1px, transparent 0),
-        linear-gradient(90deg, #aaa 1px, transparent 0);
-        background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
-      }
-    </style>
-  </head>
-  <body>
-
-    <div id="mount"></div>
-
-    <script src="./../../dist/index.global.js"></script>
-    <script>
-      const Board = window.iDrawBoard; 
-      const mount = document.querySelector('#mount');
-      const board = new Board(mount, {
-        width: 600,
-        height: 400,
-        contextWidth: 600,
-        contextHeight: 400,
-        devicePixelRatio: 4
-      });
-
-      const ctx = board.getContext();
-
-      ctx.setFillStyle('#ffffff');
-      ctx.fillRect(0, 0, 600, 400);
-
-      ctx.setFillStyle('#f0f0f0');
-      ctx.fillRect(10, 10, 200, 120);
-
-      ctx.setFillStyle('#cccccc');
-      ctx.fillRect(80, 80, 200, 120);
-
-      ctx.setFillStyle('#c0c0c0');
-      ctx.fillRect(160, 160, 200, 120);
-
-      ctx.setFillStyle('#e0e0e0');
-      ctx.fillRect(400 - 10, 300 - 10, 200, 100);
-
-      ctx.setFillStyle('#000');
-      ctx.fillRect(300 - 10, 200 - 10, 20, 20);
-
-      board.scale(2);
-      board.scrollX(-300);
-      board.scrollY(-200);
-      board.scale(1);
-      board.draw();
-
-    </script>
-
-  </body>
-</html>
\ No newline at end of file
diff --git a/packages/board/examples/test/scale-004.html b/packages/board/examples/test/scale-004.html
deleted file mode 100644
index 334b796..0000000
--- a/packages/board/examples/test/scale-004.html
+++ /dev/null
@@ -1,62 +0,0 @@
-<html>
-  <head>
-    <style></style>
-    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
-    <style>
-      html,body { margin: 0; padding: 0; }
-      #mount canvas {
-        border-right: 1px solid #aaaaaa40;
-        border-bottom: 1px solid #aaaaaa40;
-        background-image:
-        linear-gradient(#aaaaaa40 1px, transparent 0),
-        linear-gradient(90deg, #aaaaaa40 1px, transparent 0),
-        linear-gradient(#aaa 1px, transparent 0),
-        linear-gradient(90deg, #aaa 1px, transparent 0);
-        background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
-      }
-    </style>
-  </head>
-  <body>
-
-    <div id="mount"></div>
-
-    <script src="./../../dist/index.global.js"></script>
-    <script>
-      const Board = window.iDrawBoard; 
-      const mount = document.querySelector('#mount');
-      const opts = {
-        width: 600,
-        height: 400,
-        contextWidth: 800,
-        contextHeight: 600,
-        devicePixelRatio: 4
-      }
-      const board = new Board(mount, opts);
-
-      const ctx = board.getContext();
-
-      ctx.setFillStyle('#ffffff');
-      ctx.fillRect(0, 0, opts.contextWidth, opts.contextHeight);
-
-      ctx.setFillStyle('#f0f0f0');
-      ctx.fillRect(10, 10, 200, 120);
-
-      ctx.setFillStyle('#cccccc');
-      ctx.fillRect(80, 80, 200, 120);
-
-      ctx.setFillStyle('#c0c0c0');
-      ctx.fillRect(160, 160, 200, 120);
-
-      ctx.setFillStyle('#e0e0e0');
-      ctx.fillRect(400 - 10, 300 - 10, 200, 100);
-
-      ctx.setFillStyle('#000');
-      ctx.fillRect(400 - 10, 300 - 10, 20, 20);
-
-      board.scale(0.5);
-      board.draw();
-
-    </script>
-
-  </body>
-</html>
\ No newline at end of file
diff --git a/packages/board/examples/test/scale-005.html b/packages/board/examples/test/scale-005.html
deleted file mode 100644
index f6a6133..0000000
--- a/packages/board/examples/test/scale-005.html
+++ /dev/null
@@ -1,78 +0,0 @@
-<html>
-  <head>
-    <style></style>
-    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
-    <style>
-      html,body { margin: 0; padding: 0; }
-      #mount canvas {
-        border-right: 1px solid #aaaaaa40;
-        border-bottom: 1px solid #aaaaaa40;
-        background-image:
-        linear-gradient(#aaaaaa40 1px, transparent 0),
-        linear-gradient(90deg, #aaaaaa40 1px, transparent 0),
-        linear-gradient(#aaa 1px, transparent 0),
-        linear-gradient(90deg, #aaa 1px, transparent 0);
-        background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
-      }
-    </style>
-  </head>
-  <body>
-
-    <div id="mount"></div>
-
-    <script src="./../../dist/index.global.js"></script>
-    <script>
-      const Board = window.iDrawBoard; 
-      const mount = document.querySelector('#mount');
-      const opts = {
-        width: 600,
-        height: 400,
-        contextWidth: 1000,
-        contextHeight: 900,
-        devicePixelRatio: 4
-      }
-      const board = new Board(mount, opts);
-
-      const ctx = board.getContext();
-
-      ctx.setFillStyle('#ffffff');
-      ctx.fillRect(0, 0, opts.contextWidth, opts.contextHeight);
-
-      ctx.setFillStyle('#f0f0f0');
-      ctx.fillRect(10, 10, 200, 120);
-
-      ctx.setFillStyle('#cccccc');
-      ctx.fillRect(80, 80, 200, 120);
-
-      ctx.setFillStyle('#c0c0c0');
-      ctx.fillRect(160, 160, 200, 120);
-
-      ctx.setFillStyle('#e0e0e0');
-      ctx.fillRect(260, 260, 200, 100);
-
-      ctx.setFillStyle('#e0e0e0');
-      ctx.fillRect(500 - 10, 500 - 10, 200, 100);
-
-      ctx.setFillStyle('#c0c0c0');
-      ctx.fillRect(600, 600, 200, 100);
-
-      ctx.setFillStyle('#cccccc');
-      ctx.fillRect(790, 690, 200, 100);
-
-      ctx.setFillStyle('#000');
-      ctx.fillRect(500 - 10, 450 - 10, 20, 20);
-
-      // board.scale(1.5);
-      // board.scrollX(-600);
-      // board.scrollY(-600);
-      // board.scale(1);
-
-      const result = board.scale(0.5);
-      console.log('result =', result);
-
-      board.draw();
-
-    </script>
-
-  </body>
-</html>
\ No newline at end of file
diff --git a/packages/board/examples/test/scale.html b/packages/board/examples/test/scale.html
new file mode 100644
index 0000000..6e10d7e
--- /dev/null
+++ b/packages/board/examples/test/scale.html
@@ -0,0 +1,197 @@
+<html>
+  <head>
+    <style></style>
+    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
+    <style>
+      html,body { margin: 0; padding: 0; }
+      .box canvas {
+        border-right: 1px solid #aaaaaa40;
+        border-bottom: 1px solid #aaaaaa40;
+        background-image:
+        linear-gradient(#aaaaaa40 1px, transparent 0),
+        linear-gradient(90deg, #aaaaaa40 1px, transparent 0),
+        linear-gradient(#aaa 1px, transparent 0),
+        linear-gradient(90deg, #aaa 1px, transparent 0);
+        background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
+      }
+      .list {
+        width: 910px;
+        overflow: hidden;
+        border-top: 1px solid #aaaaaa;
+        border-left: 1px solid #aaaaaa;
+      }
+      .box {
+        width: 300;
+        height: 200;
+        float: left;
+        border-right: 1px solid #aaaaaa;
+        border-bottom: 1px solid #aaaaaa;
+      }
+    </style>
+  </head>
+  <body>
+
+    <div class="list">
+      <div class="box" id="mount-1"></div>
+      <div class="box" id="mount-2"></div>
+      <div class="box" id="mount-3"></div>
+      <div class="box" id="mount-4"></div>
+      <div class="box" id="mount-5"></div>
+    </div>
+
+    <script src="./../../dist/index.global.js"></script>
+
+    <script>
+      function drawBoard(board) {
+        const ctx = board.getContext();
+        ctx.setFillStyle('#ffffff');
+        ctx.fillRect(0, 0, 300, 200);
+
+        ctx.setFillStyle('#f0f0f0');
+        ctx.fillRect(5, 5, 100, 60);
+
+        ctx.setFillStyle('#cccccc');
+        ctx.fillRect(40, 40, 100, 60);
+
+        ctx.setFillStyle('#c0c0c0');
+        ctx.fillRect(80, 80, 100, 60);
+
+        ctx.setFillStyle('#e0e0e0');
+        ctx.fillRect(200 - 5, 150 - 5, 100, 50);
+
+        ctx.setFillStyle('#000');
+        ctx.fillRect(150 - 5, 100 - 5, 10, 10);
+      }
+    </script>
+
+    <script>
+    (function () {
+      const Board = window.iDrawBoard; 
+      const mount = document.querySelector('#mount-1');
+      const board = new Board(mount, {
+        width: 300,
+        height: 200,
+        contextWidth: 300,
+        contextHeight: 200,
+        devicePixelRatio: 4
+      });
+      drawBoard(board);
+
+      board.scale(0.5);
+      board.scale(1);
+      board.draw();
+    })();
+    </script>
+    <script>
+    (function() {
+      const Board = window.iDrawBoard; 
+      const mount = document.querySelector('#mount-2');
+      const board = new Board(mount, {
+        width: 300,
+        height: 200,
+        contextWidth: 300,
+        contextHeight: 200,
+        devicePixelRatio: 4
+      });
+
+      drawBoard(board);
+
+      board.scale(2);
+      board.scrollX(-150);
+      board.scrollY(-100);
+      board.draw();
+    })()
+    </script>
+
+    <script>
+    (function() {
+      const Board = window.iDrawBoard; 
+      const mount = document.querySelector('#mount-3');
+      const board = new Board(mount, {
+        width: 300,
+        height: 200,
+        contextWidth: 300,
+        contextHeight: 200,
+        devicePixelRatio: 4
+      });
+
+      drawBoard(board);
+
+      board.scale(2);
+      board.scrollX(-300);
+      board.scrollY(-200);
+      board.scale(1);
+      board.draw();
+    })()
+    </script>
+
+    <script>
+    (function() {
+      const Board = window.iDrawBoard; 
+      const mount = document.querySelector('#mount-4');
+      const board = new Board(mount, {
+        width: 300,
+        height: 200,
+        contextWidth: 300,
+        contextHeight: 200,
+        devicePixelRatio: 4
+      });
+
+      drawBoard(board);
+
+      board.scale(0.5);
+      board.draw();
+    })()
+    </script>
+
+    <script>
+    (function() {
+      const Board = window.iDrawBoard; 
+      const mount = document.querySelector('#mount-5');
+      const opts = {
+        width: 300,
+        height: 200,
+        contextWidth: 500,
+        contextHeight: 400,
+        devicePixelRatio: 4
+      }
+      const board = new Board(mount, opts);
+
+      const ctx = board.getContext();
+
+      ctx.setFillStyle('#ffffff');
+      ctx.fillRect(0, 0, opts.contextWidth, opts.contextHeight);
+
+      ctx.setFillStyle('#f0f0f0');
+      ctx.fillRect(5, 5, 100, 60);
+
+      ctx.setFillStyle('#cccccc');
+      ctx.fillRect(40, 40, 100, 60);
+
+      ctx.setFillStyle('#c0c0c0');
+      ctx.fillRect(80, 80, 100, 60);
+
+      ctx.setFillStyle('#e0e0e0');
+      ctx.fillRect(130, 130, 100, 50);
+
+      ctx.setFillStyle('#e0e0e0');
+      ctx.fillRect(250 - 5, 250 - 5, 100, 50);
+
+      ctx.setFillStyle('#c0c0c0');
+      ctx.fillRect(300, 300, 100, 50);
+
+      ctx.setFillStyle('#cccccc');
+      ctx.fillRect(380, 345, 100, 50);
+
+      ctx.setFillStyle('#000');
+      ctx.fillRect(250 - 5, 225 - 5, 10, 10);
+
+      const result = board.scale(0.5);
+      console.log('result =', result);
+
+      board.draw();
+    })()
+    </script>
+
+  </body>
+</html>
\ No newline at end of file
diff --git a/scripts/screen.config.js b/scripts/screen.config.js
index 41f16c4..4d5e6e0 100644
--- a/scripts/screen.config.js
+++ b/scripts/screen.config.js
@@ -2,11 +2,7 @@ const pageList = [
   { path: 'board/examples/test/main.html', w: 600, h: 400, delay: 500 },
   { path: 'board/examples/test/transform-small.html', w: 600, h: 400, delay: 500 },
   { path: 'board/examples/test/transform-large.html', w: 600, h: 400, delay: 500 },
-  { path: 'board/examples/test/scale-001.html', w: 600, h: 400, delay: 500 },
-  { path: 'board/examples/test/scale-002.html', w: 600, h: 400, delay: 500 },
-  { path: 'board/examples/test/scale-003.html', w: 600, h: 400, delay: 500 },
-  { path: 'board/examples/test/scale-004.html', w: 600, h: 400, delay: 500 },
-  { path: 'board/examples/test/scale-005.html', w: 600, h: 400, delay: 500 },
+  { path: 'board/examples/test/scale.html', w: 920, h: 420, delay: 500 },
   { path: 'board/examples/test/scroll.html', w: 700, h: 500, delay: 500 },
   { path: 'board/examples/test/reset-size.html', w: 400, h: 300, delay: 500 },
   { path: 'core/examples/test/rect.html', w: 600, h: 400, delay: 500 },
