diff --git a/packages/board/src/index.ts b/packages/board/src/index.ts
index 8392957..25693c1 100644
--- a/packages/board/src/index.ts
+++ b/packages/board/src/index.ts
@@ -85,15 +85,9 @@ export class Board<T extends BoardExtendEvent = BoardExtendEvent> {
     );
 
     this._watcher.on(
-      'wheelX',
+      'wheel',
       throttle((e) => {
-        this._handleWheelX(e);
-      }, throttleTime)
-    );
-    this._watcher.on(
-      'wheelY',
-      throttle((e) => {
-        this._handleWheelY(e);
+        this._handleWheel(e);
       }, throttleTime)
     );
     this._watcher.on(
@@ -158,20 +152,10 @@ export class Board<T extends BoardExtendEvent = BoardExtendEvent> {
     }
   }
 
-  private _handleWheelX(e: BoardWatcherEventMap['wheelX']) {
+  private _handleWheel(e: BoardWatcherEventMap['wheel']) {
     for (let i = 0; i < this._activeMiddlewareObjs.length; i++) {
       const obj = this._activeMiddlewareObjs[i];
-      const result = obj?.wheelX?.(e);
-      if (result === false) {
-        return;
-      }
-    }
-  }
-
-  private _handleWheelY(e: BoardWatcherEventMap['wheelY']) {
-    for (let i = 0; i < this._activeMiddlewareObjs.length; i++) {
-      const obj = this._activeMiddlewareObjs[i];
-      const result = obj?.wheelY?.(e);
+      const result = obj?.wheel?.(e);
       if (result === false) {
         return;
       }
@@ -333,9 +317,6 @@ export class Board<T extends BoardExtendEvent = BoardExtendEvent> {
     const { width, height, devicePixelRatio } = newViewSize;
     const { viewContent } = this._opts;
     viewContent.viewContext.$resize({ width, height, devicePixelRatio });
-    const canvas = viewContent.viewContext.canvas;
-    canvas.style.width = `${width}px`;
-    canvas.style.height = `${height}px`;
     viewContent.helperContext.$resize({ width, height, devicePixelRatio });
     viewContent.boardContext.$resize({ width, height, devicePixelRatio });
     this._viewer.drawFrame();
diff --git a/packages/board/src/lib/viewer.ts b/packages/board/src/lib/viewer.ts
index 0e5511c..6d80d51 100644
--- a/packages/board/src/lib/viewer.ts
+++ b/packages/board/src/lib/viewer.ts
@@ -44,7 +44,6 @@ export class Viewer extends EventEmitter<BoardViewerEventMap> implements BoardVi
 
     if (snapshot) {
       const { scale, offsetTop, offsetBottom, offsetLeft, offsetRight, width, height, contextHeight, contextWidth, devicePixelRatio } = snapshot.activeStore;
-      const { underContext, viewContext, helperContext, boardContext } = viewContent;
 
       if (snapshot?.activeStore.data) {
         renderer.drawData(snapshot.activeStore.data, {
@@ -65,13 +64,9 @@ export class Viewer extends EventEmitter<BoardViewerEventMap> implements BoardVi
         });
       }
       beforeDrawFrame({ snapshot });
-      boardContext.clearRect(0, 0, width, height);
-      boardContext.drawImage(underContext.canvas, 0, 0, width, height);
-      boardContext.drawImage(viewContext.canvas, 0, 0, width, height);
-      boardContext.drawImage(helperContext.canvas, 0, 0, width, height);
-      underContext.clearRect(0, 0, width, height);
-      viewContext.clearRect(0, 0, width, height);
-      helperContext.clearRect(0, 0, width, height);
+
+      viewContent.drawView();
+
       afterDrawFrame({ snapshot });
     }
 
diff --git a/packages/board/src/lib/watcher.ts b/packages/board/src/lib/watcher.ts
index 2c40817..e097ce8 100644
--- a/packages/board/src/lib/watcher.ts
+++ b/packages/board/src/lib/watcher.ts
@@ -97,10 +97,8 @@ export class BoardWatcher extends EventEmitter<BoardWatcherEventMap> {
 
         if (e.ctrlKey === true && this.has('wheelScale')) {
           this.trigger('wheelScale', { deltaX, deltaY, point });
-        } else if (this.has('wheelX') && deltaX !== 0) {
-          this.trigger('wheelX', { deltaX, point });
-        } else if (this.has('wheelY') && deltaY !== 0) {
-          this.trigger('wheelY', { deltaY, point });
+        } else if (this.has('wheel')) {
+          this.trigger('wheel', { deltaX, deltaY, point });
         }
       },
       { passive: false }
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 678f125..ce79d00 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -1,6 +1,6 @@
 import type { Data, PointSize, CoreOptions, BoardMiddleware, ViewSizeInfo, CoreEvent, ViewScaleInfo } from '@idraw/types';
 import { Board } from '@idraw/board';
-import { createBoardContexts, validateElements } from '@idraw/util';
+import { createViewContent, validateElements } from '@idraw/util';
 import { Cursor } from './lib/cursor';
 
 // export { MiddlewareSelector } from './middleware/selector';
@@ -25,8 +25,7 @@ export class Core {
     this.#initContainer();
     container.appendChild(canvas);
 
-    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
-    const viewContent = createBoardContexts(ctx, { devicePixelRatio });
+    const viewContent = createViewContent(canvas, { width, height, devicePixelRatio, offscreen: true });
     const board = new Board<CoreEvent>({ viewContent, container });
     const sharer = board.getSharer();
     sharer.setActiveViewSizeInfo({
diff --git a/packages/core/src/middleware/scroller/index.ts b/packages/core/src/middleware/scroller/index.ts
index 071f01f..e78e8a1 100644
--- a/packages/core/src/middleware/scroller/index.ts
+++ b/packages/core/src/middleware/scroller/index.ts
@@ -1,4 +1,4 @@
-import type { Point, BoardMiddleware, PointWatcherEvent, BoardWatherWheelXEvent, BoardWatherWheelYEvent } from '@idraw/types';
+import type { Point, BoardMiddleware, PointWatcherEvent, BoardWatherWheelEvent } from '@idraw/types';
 import { drawScroller, isPointInScrollThumb } from './util';
 // import type { ScrollbarThumbType } from './util';
 import { key, keyXThumbRect, keyYThumbRect, keyPrevPoint, keyActivePoint, keyActiveThumbType } from './config';
@@ -55,25 +55,15 @@ export const MiddlewareScroller: BoardMiddleware = (opts) => {
 
   return {
     mode: key,
-    // hover: (e: PointWatcherEvent) => {
-    //   const { point } = e;
-    //   const thumbType = getThumbType(point);
-    //   if (thumbType === 'X' || thumbType === 'Y') {
-    //     return false;
-    //   }
-    // },
-    wheelX: (e: BoardWatherWheelXEvent) => {
-      if (e.deltaX >= 0 || e.deltaX < 0) {
-        viewer.scroll({ moveX: 0 - e.deltaX });
-        viewer.drawFrame();
-      }
-    },
-    wheelY: (e: BoardWatherWheelYEvent) => {
-      if (e.deltaY >= 0 || e.deltaY < 0) {
-        viewer.scroll({ moveY: 0 - e.deltaY });
-        viewer.drawFrame();
-      }
+
+    wheel: (e: BoardWatherWheelEvent) => {
+      viewer.scroll({
+        moveX: 0 - e.deltaX,
+        moveY: 0 - e.deltaY
+      });
+      viewer.drawFrame();
     },
+
     pointStart: (e: PointWatcherEvent) => {
       const { point } = e;
       const thumbType = getThumbType(point);
diff --git a/packages/idraw/src/index.ts b/packages/idraw/src/index.ts
index 2a3216d..8951e86 100644
--- a/packages/idraw/src/index.ts
+++ b/packages/idraw/src/index.ts
@@ -39,7 +39,7 @@ export {
   loadHTML,
   is,
   check,
-  createBoardContexts,
+  createViewContent,
   createContext2D,
   createOffscreenContext2D,
   EventEmitter,
diff --git a/packages/renderer/src/draw/group.ts b/packages/renderer/src/draw/group.ts
index 183df39..83e6d85 100644
--- a/packages/renderer/src/draw/group.ts
+++ b/packages/renderer/src/draw/group.ts
@@ -44,7 +44,14 @@ export function drawElement(ctx: ViewContext2D, elem: Element<ElementType>, opts
         break;
       }
       case 'group': {
-        drawGroup(ctx, elem as Element<'group'>, opts);
+        const assets = {
+          ...(opts.elementAssets || {}),
+          ...((elem as Element<'group'>).detail.assets || {})
+        };
+        drawGroup(ctx, elem as Element<'group'>, {
+          ...opts,
+          elementAssets: assets
+        });
         break;
       }
       default: {
diff --git a/packages/types/src/lib/board.ts b/packages/types/src/lib/board.ts
index 8b59be1..eebeb0d 100644
--- a/packages/types/src/lib/board.ts
+++ b/packages/types/src/lib/board.ts
@@ -17,6 +17,11 @@ export interface BoardWatherWheelYEvent {
   deltaY: number;
   point: Point;
 }
+export interface BoardWatherWheelEvent {
+  deltaX: number;
+  deltaY: number;
+  point: Point;
+}
 export type BoardWatherWheelScaleEvent = BoardWatherWheelXEvent & BoardWatherWheelYEvent;
 
 export interface BoardWatherDrawFrameEvent<S extends Record<any | symbol, any>> {
@@ -38,10 +43,8 @@ export interface BoardWatcherEventMap<S extends Record<any | symbol, any> = any>
   pointEnd: BoardWatcherPointEvent;
   pointLeave: BoardWatcherPointEvent;
   doubleClick: BoardWatcherPointEvent;
-  wheelX: BoardWatherWheelXEvent;
-  wheelY: BoardWatherWheelYEvent;
+  wheel: BoardWatherWheelEvent;
   wheelScale: BoardWatherWheelScaleEvent;
-  // scale: BoardWatherScaleEvent;
   scrollX: BoardWatherScrollXEvent;
   scrollY: BoardWatherScrollYEvent;
   resize: BoardWatherResizeEvent;
@@ -63,8 +66,9 @@ export interface BoardMiddlewareObject<S extends Record<any | symbol, any> = any
   pointEnd?: (e: BoardWatcherEventMap<S>['pointEnd']) => void | boolean;
   pointLeave?: (e: BoardWatcherEventMap<S>['pointLeave']) => void | boolean;
   doubleClick?: (e: BoardWatcherEventMap<S>['doubleClick']) => void | boolean;
-  wheelX?: (e: BoardWatcherEventMap<S>['wheelX']) => void | boolean;
-  wheelY?: (e: BoardWatcherEventMap<S>['wheelY']) => void | boolean;
+  // wheelX?: (e: BoardWatcherEventMap<S>['wheelX']) => void | boolean;
+  // wheelY?: (e: BoardWatcherEventMap<S>['wheelY']) => void | boolean;
+  wheel?: (e: BoardWatcherEventMap<S>['wheel']) => void | boolean;
   wheelScale?: (e: BoardWatcherEventMap<S>['wheelScale']) => void | boolean;
 
   // scale?: (e: BoardWatcherEventMap<S>['scale']) => void | boolean;
diff --git a/packages/types/src/lib/context2d.ts b/packages/types/src/lib/context2d.ts
index eec7344..53b01fc 100644
--- a/packages/types/src/lib/context2d.ts
+++ b/packages/types/src/lib/context2d.ts
@@ -1,5 +1,6 @@
 export interface ViewContext2DOptions {
   devicePixelRatio?: number;
+  offscreenCanvas?: OffscreenCanvas | null;
 }
 
 export interface ViewContext2D {
@@ -9,7 +10,8 @@ export interface ViewContext2D {
   $getContext(): CanvasRenderingContext2D;
   $setFont(opts: { fontSize: number; fontFamily?: string; fontWeight?: string | number }): void;
   $resize(opts: { width: number; height: number; devicePixelRatio: number }): void;
-
+  $getSize(): { width: number; height: number; devicePixelRatio: number };
+  $getOffscreenCanvas(): OffscreenCanvas | null;
   $undoPixelRatio(num: number): number;
   $doPixelRatio(num: number): number;
 
diff --git a/packages/types/src/lib/view.ts b/packages/types/src/lib/view.ts
index 6be7363..d4318be 100644
--- a/packages/types/src/lib/view.ts
+++ b/packages/types/src/lib/view.ts
@@ -27,6 +27,7 @@ export interface ViewContent {
   viewContext: ViewContext2D;
   helperContext: ViewContext2D;
   underContext: ViewContext2D;
+  drawView: () => void;
 }
 
 export interface ViewCalculatorOptions {
diff --git a/packages/util/src/index.ts b/packages/util/src/index.ts
index 6d39176..a2fb143 100644
--- a/packages/util/src/index.ts
+++ b/packages/util/src/index.ts
@@ -7,7 +7,7 @@ export { istype } from './lib/istype';
 export { loadImage, loadSVG, loadHTML } from './lib/load';
 export { is } from './lib/is';
 export { check } from './lib/check';
-export { createBoardContexts, createContext2D, createOffscreenContext2D } from './lib/canvas';
+export { createViewContent, createContext2D, createOffscreenContext2D } from './lib/canvas';
 export { EventEmitter } from './lib/event';
 export { calcDistance, calcSpeed, equalPoint, equalTouchPoint, vaildPoint, vaildTouchPoint, getCenterFromTwoPoints } from './lib/point';
 export { Store } from './lib/store';
diff --git a/packages/util/src/lib/canvas.ts b/packages/util/src/lib/canvas.ts
index 85d10d8..2df8199 100644
--- a/packages/util/src/lib/canvas.ts
+++ b/packages/util/src/lib/canvas.ts
@@ -14,31 +14,82 @@ export function createContext2D(opts: { ctx?: CanvasRenderingContext2D; width: n
   return context2d;
 }
 
-export function createOffscreenContext2D(opts: { width: number; height: number }) {
-  const { width, height } = opts;
-  const offCanvas = new OffscreenCanvas(width, height);
+export function createOffscreenContext2D(opts: { width: number; height: number; devicePixelRatio: number }): Context2D {
+  const { width, height, devicePixelRatio } = opts;
+  const offCanvas = new OffscreenCanvas(width * devicePixelRatio, height * devicePixelRatio);
   const offRenderCtx = offCanvas.getContext('2d') as OffscreenRenderingContext;
   const offCtx: CanvasRenderingContext2D | OffscreenRenderingContext = offRenderCtx.canvas.getContext('2d') as
     | CanvasRenderingContext2D
     | OffscreenRenderingContext;
-  return offCtx;
+  const context2d = new Context2D(offCtx, {
+    devicePixelRatio,
+    offscreenCanvas: offCanvas
+  });
+  return context2d;
 }
 
-export function createBoardContexts(ctx: CanvasRenderingContext2D, opts?: { devicePixelRatio: number }): ViewContent {
+export function createViewContent(
+  canvas: HTMLCanvasElement,
+  opts: { width: number; height: number; devicePixelRatio: number; offscreen?: boolean }
+): ViewContent {
+  const { width, height, devicePixelRatio, offscreen } = opts;
   const ctxOpts = {
-    width: ctx.canvas.width,
-    height: ctx.canvas.height,
-    devicePixelRatio: opts?.devicePixelRatio || 1
+    width,
+    height,
+    devicePixelRatio
   };
-  const viewContext = createContext2D(ctxOpts);
-  const helperContext = createContext2D(ctxOpts);
-  const underContext = createContext2D(ctxOpts);
-  const boardContext = createContext2D({ ctx, ...ctxOpts });
-  const content: ViewContent = {
-    underContext,
-    viewContext,
-    helperContext,
-    boardContext
-  };
-  return content;
+
+  if (offscreen === true) {
+    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+    const viewContext = createOffscreenContext2D(ctxOpts);
+    const helperContext = createOffscreenContext2D(ctxOpts);
+    const underContext = createOffscreenContext2D(ctxOpts);
+    const boardContext = createContext2D({ ctx, ...ctxOpts });
+
+    const drawView = () => {
+      const { width: w, height: h } = viewContext.$getSize();
+
+      boardContext.clearRect(0, 0, w, h);
+      boardContext.drawImage(underContext.canvas, 0, 0, w, h);
+      boardContext.drawImage(viewContext.canvas, 0, 0, w, h);
+      boardContext.drawImage(helperContext.canvas, 0, 0, w, h);
+      underContext.clearRect(0, 0, w, h);
+      viewContext.clearRect(0, 0, w, h);
+      helperContext.clearRect(0, 0, w, h);
+    };
+
+    const content: ViewContent = {
+      underContext,
+      viewContext,
+      helperContext,
+      boardContext,
+      drawView
+    };
+    return content;
+  } else {
+    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+    const viewContext = createContext2D(ctxOpts);
+    const helperContext = createContext2D(ctxOpts);
+    const underContext = createContext2D(ctxOpts);
+    const boardContext = createContext2D({ ctx, ...ctxOpts });
+
+    const drawView = () => {
+      boardContext.clearRect(0, 0, width, height);
+      boardContext.drawImage(underContext.canvas, 0, 0, width, height);
+      boardContext.drawImage(viewContext.canvas, 0, 0, width, height);
+      boardContext.drawImage(helperContext.canvas, 0, 0, width, height);
+      underContext.clearRect(0, 0, width, height);
+      viewContext.clearRect(0, 0, width, height);
+      helperContext.clearRect(0, 0, width, height);
+    };
+
+    const content: ViewContent = {
+      underContext,
+      viewContext,
+      helperContext,
+      boardContext,
+      drawView
+    };
+    return content;
+  }
 }
diff --git a/packages/util/src/lib/context2d.ts b/packages/util/src/lib/context2d.ts
index be94728..9c0b2c2 100644
--- a/packages/util/src/lib/context2d.ts
+++ b/packages/util/src/lib/context2d.ts
@@ -1,29 +1,28 @@
 import type { ViewContext2D, ViewContext2DOptions } from '@idraw/types';
 
 export class Context2D implements ViewContext2D {
-  private _ctx: CanvasRenderingContext2D;
+  #ctx: CanvasRenderingContext2D;
+  #opts: Required<ViewContext2DOptions>;
 
-  private _devicePixelRatio = 1;
   // private _width: number = 0;
   // private _height: number = 0;
 
-  constructor(ctx: CanvasRenderingContext2D, opts: ViewContext2DOptions) {
-    const { devicePixelRatio = 1 } = opts;
-    this._ctx = ctx;
-    this._devicePixelRatio = devicePixelRatio;
+  constructor(ctx: CanvasRenderingContext2D | OffscreenRenderingContext, opts: ViewContext2DOptions) {
+    this.#ctx = ctx as CanvasRenderingContext2D;
+    this.#opts = { ...{ devicePixelRatio: 1, offscreenCanvas: null }, ...opts };
     // this._width = ctx.canvas.width / devicePixelRatio;
     // this._height = ctx.canvas.height / devicePixelRatio;
   }
 
   $undoPixelRatio(num: number) {
-    return num / this._devicePixelRatio;
+    return num / this.#opts.devicePixelRatio;
   }
   $doPixelRatio(num: number) {
-    return this._devicePixelRatio * num;
+    return this.#opts.devicePixelRatio * num;
   }
 
   $getContext(): CanvasRenderingContext2D {
-    return this._ctx;
+    return this.#ctx;
   }
 
   $setFont(opts: { fontSize: number; fontFamily?: string; fontWeight?: 'bold' | number | string }): void {
@@ -33,168 +32,187 @@ export class Context2D implements ViewContext2D {
     }
     strList.push(`${this.$doPixelRatio(opts.fontSize || 12)}px`);
     strList.push(`${opts.fontFamily || 'sans-serif'}`);
-    this._ctx.font = `${strList.join(' ')}`;
+    this.#ctx.font = `${strList.join(' ')}`;
   }
 
-  $resize(opts: { width: number; height: number; devicePixelRatio: number }) {
-    const { width, height, devicePixelRatio } = opts;
-    const { canvas } = this._ctx;
+  $getOffscreenCanvas(): OffscreenCanvas | null {
+    return this.#opts.offscreenCanvas;
+  }
+
+  $resize(opts: { width: number; height: number; devicePixelRatio: number; resetStyle?: boolean }) {
+    const { width, height, devicePixelRatio, resetStyle } = opts;
+    const { canvas } = this.#ctx;
     canvas.width = width * devicePixelRatio;
     canvas.height = height * devicePixelRatio;
-    // canvas.style.width = `${width}px`;
-    // canvas.style.height = `${height}px`;
-    // this._width = width;
-    // this._height = height;
-    this._devicePixelRatio = devicePixelRatio;
+    this.#opts = {
+      ...this.#opts,
+      ...{
+        devicePixelRatio
+      }
+    };
+    if (resetStyle === true) {
+      canvas.style.width = `${width}px`;
+      canvas.style.height = `${height}px`;
+    }
+  }
+
+  $getSize(): { width: number; height: number; devicePixelRatio: number } {
+    const { devicePixelRatio } = this.#opts;
+    const { width, height } = this.#ctx.canvas;
+    return {
+      width: width / devicePixelRatio,
+      height: height / devicePixelRatio,
+      devicePixelRatio
+    };
   }
 
   get canvas() {
-    return this._ctx.canvas;
+    return this.#ctx.canvas;
   }
 
   get fillStyle() {
-    return this._ctx.fillStyle;
+    return this.#ctx.fillStyle;
   }
   set fillStyle(value: string | CanvasGradient | CanvasPattern) {
-    this._ctx.fillStyle = value;
+    this.#ctx.fillStyle = value;
   }
 
   get strokeStyle() {
-    return this._ctx.strokeStyle;
+    return this.#ctx.strokeStyle;
   }
   set strokeStyle(color: string | CanvasGradient | CanvasPattern) {
-    this._ctx.strokeStyle = color;
+    this.#ctx.strokeStyle = color;
   }
 
   get lineWidth() {
-    return this.$undoPixelRatio(this._ctx.lineWidth);
+    return this.$undoPixelRatio(this.#ctx.lineWidth);
   }
   set lineWidth(w: number) {
-    this._ctx.lineWidth = this.$doPixelRatio(w);
+    this.#ctx.lineWidth = this.$doPixelRatio(w);
   }
 
   get textAlign(): CanvasTextAlign {
-    return this._ctx.textAlign;
+    return this.#ctx.textAlign;
   }
   set textAlign(align: CanvasTextAlign) {
-    this._ctx.textAlign = align;
+    this.#ctx.textAlign = align;
   }
 
   get textBaseline() {
-    return this._ctx.textBaseline;
+    return this.#ctx.textBaseline;
   }
   set textBaseline(baseline: CanvasTextBaseline) {
-    this._ctx.textBaseline = baseline;
+    this.#ctx.textBaseline = baseline;
   }
 
   get globalAlpha() {
-    return this._ctx.globalAlpha;
+    return this.#ctx.globalAlpha;
   }
   set globalAlpha(alpha: number) {
-    this._ctx.globalAlpha = alpha;
+    this.#ctx.globalAlpha = alpha;
   }
   get shadowColor(): string {
-    return this._ctx.shadowColor;
+    return this.#ctx.shadowColor;
   }
   set shadowColor(color: string) {
-    this._ctx.shadowColor = color;
+    this.#ctx.shadowColor = color;
   }
 
   get shadowOffsetX() {
-    return this.$undoPixelRatio(this._ctx.shadowOffsetX);
+    return this.$undoPixelRatio(this.#ctx.shadowOffsetX);
   }
   set shadowOffsetX(offsetX: number) {
-    this._ctx.shadowOffsetX = this.$doPixelRatio(offsetX);
+    this.#ctx.shadowOffsetX = this.$doPixelRatio(offsetX);
   }
 
   get shadowOffsetY(): number {
-    return this.$undoPixelRatio(this._ctx.shadowOffsetY);
+    return this.$undoPixelRatio(this.#ctx.shadowOffsetY);
   }
   set shadowOffsetY(offsetY: number) {
-    this._ctx.shadowOffsetY = this.$doPixelRatio(offsetY);
+    this.#ctx.shadowOffsetY = this.$doPixelRatio(offsetY);
   }
 
   get shadowBlur(): number {
-    return this.$undoPixelRatio(this._ctx.shadowBlur);
+    return this.$undoPixelRatio(this.#ctx.shadowBlur);
   }
   set shadowBlur(blur: number) {
-    this._ctx.shadowBlur = this.$doPixelRatio(blur);
+    this.#ctx.shadowBlur = this.$doPixelRatio(blur);
   }
 
   get lineCap() {
-    return this._ctx.lineCap;
+    return this.#ctx.lineCap;
   }
   set lineCap(lineCap: CanvasLineCap) {
-    this._ctx.lineCap = lineCap;
+    this.#ctx.lineCap = lineCap;
   }
 
   get globalCompositeOperation(): GlobalCompositeOperation {
-    return this._ctx.globalCompositeOperation;
+    return this.#ctx.globalCompositeOperation;
   }
 
   set globalCompositeOperation(operations: GlobalCompositeOperation) {
-    this._ctx.globalCompositeOperation = operations;
+    this.#ctx.globalCompositeOperation = operations;
   }
 
   fill(...args: [fillRule?: CanvasFillRule | undefined] | [path: Path2D, fillRule?: CanvasFillRule | undefined]): void {
-    return this._ctx.fill(...(args as [path: Path2D, fillRule?: CanvasFillRule | undefined]));
+    return this.#ctx.fill(...(args as [path: Path2D, fillRule?: CanvasFillRule | undefined]));
   }
 
   arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean | undefined): void {
-    return this._ctx.arc(this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(radius), startAngle, endAngle, anticlockwise);
+    return this.#ctx.arc(this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(radius), startAngle, endAngle, anticlockwise);
   }
 
   rect(x: number, y: number, w: number, h: number) {
-    return this._ctx.rect(this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(w), this.$doPixelRatio(h));
+    return this.#ctx.rect(this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(w), this.$doPixelRatio(h));
   }
 
   fillRect(x: number, y: number, w: number, h: number) {
-    return this._ctx.fillRect(this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(w), this.$doPixelRatio(h));
+    return this.#ctx.fillRect(this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(w), this.$doPixelRatio(h));
   }
 
   clearRect(x: number, y: number, w: number, h: number) {
-    return this._ctx.clearRect(this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(w), this.$doPixelRatio(h));
+    return this.#ctx.clearRect(this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(w), this.$doPixelRatio(h));
   }
 
   beginPath() {
-    return this._ctx.beginPath();
+    return this.#ctx.beginPath();
   }
 
   closePath() {
-    return this._ctx.closePath();
+    return this.#ctx.closePath();
   }
 
   lineTo(x: number, y: number) {
-    return this._ctx.lineTo(this.$doPixelRatio(x), this.$doPixelRatio(y));
+    return this.#ctx.lineTo(this.$doPixelRatio(x), this.$doPixelRatio(y));
   }
 
   moveTo(x: number, y: number) {
-    return this._ctx.moveTo(this.$doPixelRatio(x), this.$doPixelRatio(y));
+    return this.#ctx.moveTo(this.$doPixelRatio(x), this.$doPixelRatio(y));
   }
 
   arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void {
-    return this._ctx.arcTo(this.$doPixelRatio(x1), this.$doPixelRatio(y1), this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(radius));
+    return this.#ctx.arcTo(this.$doPixelRatio(x1), this.$doPixelRatio(y1), this.$doPixelRatio(x2), this.$doPixelRatio(y2), this.$doPixelRatio(radius));
   }
 
   getLineDash() {
-    return this._ctx.getLineDash();
+    return this.#ctx.getLineDash();
   }
 
   setLineDash(nums: number[]) {
     const dash = nums.map((n) => this.$doPixelRatio(n));
-    return this._ctx.setLineDash(dash);
+    return this.#ctx.setLineDash(dash);
   }
 
   stroke(path?: Path2D) {
-    return path ? this._ctx.stroke(path) : this._ctx.stroke();
+    return path ? this.#ctx.stroke(path) : this.#ctx.stroke();
   }
 
   translate(x: number, y: number) {
-    return this._ctx.translate(this.$doPixelRatio(x), this.$doPixelRatio(y));
+    return this.#ctx.translate(this.$doPixelRatio(x), this.$doPixelRatio(y));
   }
 
   rotate(angle: number) {
-    return this._ctx.rotate(angle);
+    return this.#ctx.rotate(angle);
   }
 
   drawImage(...args: any[]) {
@@ -210,7 +228,7 @@ export class Context2D implements ViewContext2D {
     const dh: number = args[args.length - 1];
 
     if (args.length === 9) {
-      return this._ctx.drawImage(
+      return this.#ctx.drawImage(
         image,
         this.$doPixelRatio(sx),
         this.$doPixelRatio(sy),
@@ -222,45 +240,45 @@ export class Context2D implements ViewContext2D {
         this.$doPixelRatio(dh)
       );
     } else {
-      return this._ctx.drawImage(image, this.$doPixelRatio(dx), this.$doPixelRatio(dy), this.$doPixelRatio(dw), this.$doPixelRatio(dh));
+      return this.#ctx.drawImage(image, this.$doPixelRatio(dx), this.$doPixelRatio(dy), this.$doPixelRatio(dw), this.$doPixelRatio(dh));
     }
   }
 
   createPattern(image: CanvasImageSource, repetition: string | null): CanvasPattern | null {
-    return this._ctx.createPattern(image, repetition);
+    return this.#ctx.createPattern(image, repetition);
   }
 
   measureText(text: string): TextMetrics {
-    const textMetrics = this._ctx.measureText(text);
+    const textMetrics = this.#ctx.measureText(text);
     return textMetrics;
   }
 
   fillText(text: string, x: number, y: number, maxWidth?: number | undefined): void {
     if (maxWidth !== undefined) {
-      return this._ctx.fillText(text, this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(maxWidth));
+      return this.#ctx.fillText(text, this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(maxWidth));
     } else {
-      return this._ctx.fillText(text, this.$doPixelRatio(x), this.$doPixelRatio(y));
+      return this.#ctx.fillText(text, this.$doPixelRatio(x), this.$doPixelRatio(y));
     }
   }
 
   strokeText(text: string, x: number, y: number, maxWidth?: number | undefined): void {
     if (maxWidth !== undefined) {
-      return this._ctx.strokeText(text, this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(maxWidth));
+      return this.#ctx.strokeText(text, this.$doPixelRatio(x), this.$doPixelRatio(y), this.$doPixelRatio(maxWidth));
     } else {
-      return this._ctx.strokeText(text, this.$doPixelRatio(x), this.$doPixelRatio(y));
+      return this.#ctx.strokeText(text, this.$doPixelRatio(x), this.$doPixelRatio(y));
     }
   }
 
   save() {
-    this._ctx.save();
+    this.#ctx.save();
   }
 
   restore() {
-    this._ctx.restore();
+    this.#ctx.restore();
   }
 
   scale(ratioX: number, ratioY: number) {
-    this._ctx.scale(ratioX, ratioY);
+    this.#ctx.scale(ratioX, ratioY);
   }
 
   circle(
@@ -273,7 +291,7 @@ export class Context2D implements ViewContext2D {
     endAngle: number,
     counterclockwise?: boolean | undefined
   ) {
-    this._ctx.ellipse(
+    this.#ctx.ellipse(
       this.$doPixelRatio(x),
       this.$doPixelRatio(y),
       this.$doPixelRatio(radiusX),
@@ -286,27 +304,27 @@ export class Context2D implements ViewContext2D {
   }
 
   isPointInPath(x: number, y: number) {
-    return this._ctx.isPointInPath(this.$doPixelRatio(x), this.$doPixelRatio(y));
+    return this.#ctx.isPointInPath(this.$doPixelRatio(x), this.$doPixelRatio(y));
   }
 
   // clip(fillRule?: CanvasFillRule): void;
   // clip(path: Path2D, fillRule?: CanvasFillRule): void;
   clip(...args: [fillRule?: CanvasFillRule | undefined] | [path: Path2D, fillRule?: CanvasFillRule | undefined]) {
-    return this._ctx.clip(...(args as any[]));
+    return this.#ctx.clip(...(args as any[]));
   }
 
   setTransform(a: number, b: number, c: number, d: number, e: number, f: number) {
-    return this._ctx.setTransform(a, b, c, d, e, f);
+    return this.#ctx.setTransform(a, b, c, d, e, f);
   }
   getTransform(): DOMMatrix2DInit {
-    return this._ctx.getTransform();
+    return this.#ctx.getTransform();
   }
 
   createLinearGradient(x0: number, y0: number, x1: number, y1: number): CanvasGradient {
-    return this._ctx.createLinearGradient(this.$doPixelRatio(x0), this.$doPixelRatio(y0), this.$doPixelRatio(x1), this.$doPixelRatio(y1));
+    return this.#ctx.createLinearGradient(this.$doPixelRatio(x0), this.$doPixelRatio(y0), this.$doPixelRatio(x1), this.$doPixelRatio(y1));
   }
   createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient {
-    return this._ctx.createRadialGradient(
+    return this.#ctx.createRadialGradient(
       this.$doPixelRatio(x0),
       this.$doPixelRatio(y0),
       this.$doPixelRatio(r0),
@@ -316,6 +334,6 @@ export class Context2D implements ViewContext2D {
     );
   }
   createConicGradient(startAngle: number, x: number, y: number): CanvasGradient {
-    return this._ctx.createConicGradient(startAngle, this.$doPixelRatio(x), this.$doPixelRatio(y));
+    return this.#ctx.createConicGradient(startAngle, this.$doPixelRatio(x), this.$doPixelRatio(y));
   }
 }