@leafer/canvas-web 1.0.0-alpha.7 → 1.0.0-bate

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer/canvas-web",
-  "version": "1.0.0-alpha.7",
+  "version": "1.0.0-bate",
   "description": "@leafer/canvas-web",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -19,11 +19,11 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/math": "1.0.0-alpha.7",
-    "@leafer/event": "1.0.0-alpha.7",
-    "@leafer/debug": "1.0.0-alpha.7"
+    "@leafer/math": "1.0.0-bate",
+    "@leafer/event": "1.0.0-bate",
+    "@leafer/debug": "1.0.0-bate"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-alpha.7"
+    "@leafer/interface": "1.0.0-bate"
   }
 }

package/src/LeaferCanvas.ts

@@ -1,337 +1,189 @@
-import { IBounds, ILeaferCanvas, ICanvasStrokeOptions, ICanvasFillRule, ICanvasRenderingContext2D, ILeaferCanvasConfig, IMatrixData, IBoundsData, IAutoBounds, ISizeData, IScreenSizeData, IResizeEventListener, IMatrixWithBoundsData, IPointData, InnerId, ICanvasManager } from '@leafer/interface'
-import { Bounds, BoundsHelper, IncrementId } from '@leafer/math'
+import { ICanvasContext2D, IAutoBounds, ISizeData, IScreenSizeData, IResizeEventListener } from '@leafer/interface'
 import { ResizeEvent } from '@leafer/event'
+import { LeaferCanvasBase, canvasSizeAttrs } from '@leafer/canvas'
+import { DataHelper } from '@leafer/data'
 import { Debug } from '@leafer/debug'
 
-import { CanvasBase } from './CanvasBase'
-
 
 const debug = Debug.get('LeaferCanvas')
-const minSize: IScreenSizeData = {
-    width: 1,
-    height: 1,
-    pixelRatio: 1
-}
-
-export class LeaferCanvas extends CanvasBase implements ILeaferCanvas {
-
-    public readonly innerId: InnerId
 
-    public manager: ICanvasManager
-    public view: HTMLCanvasElement
+export class LeaferCanvas extends LeaferCanvasBase {
 
-    public pixelRatio: number
-    public get pixelWidth(): number { return this.width * this.pixelRatio }
-    public get pixelHeight(): number { return this.height * this.pixelRatio }
-
-    public bounds: IBounds
-
-    public recycled?: boolean
+    public view: HTMLCanvasElement | OffscreenCanvas
+    public parentView: HTMLElement
 
     protected resizeObserver: ResizeObserver
+    protected autoBounds: IAutoBounds
+    protected resizeListener: IResizeEventListener
 
-    constructor(config?: ILeaferCanvasConfig, manager?: ICanvasManager) {
-        super()
-
-        if (!config) config = minSize
+    public init(): void {
+        const { view } = this.config
 
-        this.manager = manager
-        this.innerId = IncrementId.create(IncrementId.CNAVAS)
+        if (this.offscreen) {
+            view ? this.view = view as OffscreenCanvas : this.__createView()
+        } else {
+            view ? this.__createViewFrom(view) : this.__createView()
+            const { style } = this.view as HTMLCanvasElement
+            if (this.autoLayout) style.display || (style.display = 'block')
+            this.parentView = (this.view as HTMLCanvasElement).parentElement
+        }
 
-        if (config.view) {
+        this.__createContext()
 
-            const { view } = config
+        if (!this.autoLayout) this.resize(this.config as IScreenSizeData)
+    }
 
-            let realView: unknown = (typeof view === 'string') ? document.getElementById(view) : view as HTMLElement
-            if (realView) {
-                if (realView instanceof HTMLCanvasElement) {
+    public setBackgroundColor(color: string): void {
+        const view = this.view as HTMLElement
+        view.style.backgroundColor = color
+    }
 
-                    this.view = realView
+    public setHittable(hittable: boolean): void {
+        const view = this.view as HTMLElement
+        view.style.pointerEvents = hittable ? 'auto' : 'none'
+    }
 
-                } else {
-                    if (realView === window || realView === document) {
-                        const div = document.createElement('div')
-                        const { style } = div
-                        style.position = 'absolute'
-                        style.top = style.bottom = style.left = style.right = '0px'
-                        style.overflow = 'hidden'
-                        document.body.appendChild(div)
-                        realView = div
-                    }
+    protected __createContext(): void {
+        this.context = this.view.getContext('2d') as ICanvasContext2D
+        this.__bindContext()
+    }
 
-                    this.view = document.createElement('canvas');
-                    (realView as HTMLElement).appendChild(this.view)
-                }
-            } else {
-                debug.error(`can't find view by id: ${view}`)
+    protected __createView(): void {
+        if (this.offscreen) {
+            try {
+                this.view = new OffscreenCanvas(1, 1)
+                return
+            } catch (e) {
+                debug.error(e)
             }
-
-        }
-
-        if (!this.view) this.view = document.createElement('canvas')
-        this.pixelRatio = config.pixelRatio
-
-        if (!config.webgl) {
-            this.context = this.view.getContext('2d') as ICanvasRenderingContext2D
-            this.smooth = true
-            if (config.fill) this.view.style.backgroundColor = config.fill
-            if (config.width && config.height) this.resize(config as IScreenSizeData)
-
-            this.bindContextMethod()
         }
+        this.view = document.createElement('canvas')
     }
 
-    public debug(): void { }
+    protected __createViewFrom(inputView: string | object): void {
+        let find: unknown = (typeof inputView === 'string') ? document.getElementById(inputView) : inputView as HTMLElement
+        if (find) {
+            if (find instanceof HTMLCanvasElement) {
 
-    public pixel(num: number): number { return num * this.pixelRatio }
+                this.view = find
 
-    public autoLayout(autoBounds: IAutoBounds, listener: IResizeEventListener): void {
-        const check = (parentSize: ISizeData) => {
-            const { x, y, width, height } = autoBounds.getBoundsFrom(parentSize)
-            const { style } = this.view
-            style.marginLeft = x + 'px'
-            style.marginTop = y + 'px'
+            } else {
 
-            if (width !== this.width || height !== this.height) {
-                const { pixelRatio } = this
-                const size = { width, height, pixelRatio }
-                const oldSize = { width: this.width, height: this.height, pixelRatio: this.pixelRatio }
-                this.resize(size)
-                if (this.width !== undefined) listener(new ResizeEvent(size, oldSize))
-            }
-        }
+                let parent = find as HTMLDivElement
+                if (find === window || find === document) {
+                    const div = document.createElement('div')
+                    const { style } = div
+                    style.position = 'absolute'
+                    style.top = style.bottom = style.left = style.right = '0px'
+                    document.body.appendChild(div)
+                    parent = div
+                }
 
-        this.resizeObserver = new ResizeObserver((entries) => {
-            for (const entry of entries) {
-                check(entry.contentRect)
-            }
-        })
+                this.__createView()
+                const view = this.view as HTMLCanvasElement
 
-        const parent = this.view.parentElement
-        if (parent) {
-            this.resizeObserver.observe(parent)
-            check(parent.getBoundingClientRect())
-        }
-    }
+                if (parent.hasChildNodes()) {
+                    const { style } = view
+                    style.position = 'absolute'
+                    style.top = style.left = '0px'
+                    parent.style.position || (parent.style.position = 'relative')
+                }
 
-    public stopAutoLayout(): void {
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect()
-            this.resizeObserver = undefined
+                parent.appendChild(view)
+            }
+        } else {
+            debug.error(`no id: ${inputView}`)
+            this.__createView()
         }
     }
 
-    public resize(size: IScreenSizeData): void {
-        const { style } = this.view
+    public setViewSize(size: IScreenSizeData): void {
         const { width, height, pixelRatio } = size
-        if (this.isSameSize(size)) return
 
-        let takeCanvas: ILeaferCanvas
-        if (this.context && this.width) {
-            takeCanvas = this.getSameCanvas()
-            takeCanvas.copy(this)
+        if (!this.offscreen) {
+            const { style } = this.view as HTMLCanvasElement
+            style.width = width + 'px'
+            style.height = height + 'px'
         }
 
-        Object.assign(this, { width, height, pixelRatio })
-        this.bounds = new Bounds(0, 0, width, height)
-
-        style.width = width + 'px'
-        style.height = height + 'px'
         this.view.width = width * pixelRatio
         this.view.height = height * pixelRatio
-
-        if (this.context && takeCanvas) {
-            this.copy(takeCanvas)
-            takeCanvas.recycle()
-        }
     }
 
-    public setWorld(matrix: IMatrixData, parentMatrix?: IMatrixData, onlyTranslate?: boolean): void {
-        const { pixelRatio } = this
-        if (parentMatrix) {
-
-            if (onlyTranslate) {
-                this.setTransform(
-                    matrix.a * pixelRatio,
-                    matrix.b * pixelRatio,
-                    matrix.c * pixelRatio,
-                    matrix.d * pixelRatio,
-                    (matrix.e + parentMatrix.e) * pixelRatio,
-                    (matrix.f + parentMatrix.f) * pixelRatio
-                )
-            } else {
-                const { a, b, c, d, e, f } = parentMatrix
-                this.setTransform(
-                    ((matrix.a * a) + (matrix.b * c)) * pixelRatio,
-                    ((matrix.a * b) + (matrix.b * d)) * pixelRatio,
-                    ((matrix.c * a) + (matrix.d * c)) * pixelRatio,
-                    ((matrix.c * b) + (matrix.d * d)) * pixelRatio,
-                    (((matrix.e * a) + (matrix.f * c) + e)) * pixelRatio,
-                    (((matrix.e * b) + (matrix.f * d) + f)) * pixelRatio
-                )
-            }
+    public startAutoLayout(autoBounds: IAutoBounds, listener: IResizeEventListener): void {
+        if (!this.offscreen) {
+            this.autoBounds = autoBounds
+            this.resizeListener = listener
+            try {
 
-        } else {
+                this.resizeObserver = new ResizeObserver((entries) => {
+                    for (const entry of entries) this.checkAutoBounds(entry.contentRect)
+                })
 
-            this.setTransform(
-                matrix.a * pixelRatio,
-                matrix.b * pixelRatio,
-                matrix.c * pixelRatio,
-                matrix.d * pixelRatio,
-                matrix.e * pixelRatio,
-                matrix.f * pixelRatio
-            )
-        }
-    }
-
-    public useSameTransform(canvas: ILeaferCanvas): void {
-        this.setTransform(canvas.getTransform())
-    }
+                const parent = this.parentView
+                if (parent) {
+                    this.resizeObserver.observe(parent)
+                    this.checkAutoBounds(parent.getBoundingClientRect())
+                }
 
+            } catch (e) {
 
-    public setStroke(strokeStyle: string | object, strokeWidth: number, options?: ICanvasStrokeOptions): void {
+                this.imitateResizeObserver()
 
-        if (strokeWidth) this.strokeWidth = strokeWidth
-        if (strokeStyle) this.strokeStyle = strokeStyle
-        if (options) {
-            this.strokeCap = options.strokeCap
-            this.strokeJoin = options.strokeJoin
-            this.dashPattern = options.dashPattern
-            this.miterLimit = options.miterLimit
+            }
         }
     }
 
-    public setShadow(x: number, y: number, blur: number, color?: string): void {
-        const { pixelRatio } = this
-        this.shadowOffsetX = x * pixelRatio
-        this.shadowOffsetY = y * pixelRatio
-        this.shadowBlur = blur * pixelRatio
-        this.shadowColor = color || 'black'
-    }
-
-    public setBlur(blur: number): void {
-        const { pixelRatio } = this
-        this.filter = `blur(${blur * pixelRatio}px)`
-    }
-
-
-    public hitPath(point: IPointData, fillRule?: ICanvasFillRule): boolean {
-        return this.context.isPointInPath(point.x, point.y, fillRule)
-    }
-
-    public hitStroke(point: IPointData): boolean {
-        return this.context.isPointInStroke(point.x, point.y)
-    }
-
-    public replaceBy(canvas: ILeaferCanvas, from?: IBoundsData, to?: IBoundsData): void {
-        canvas.save()
-        this.blendMode = 'copy'
-        this.copy(canvas, from, to)
-        canvas.restore()
+    protected imitateResizeObserver(): void {
+        if (this.autoLayout) {
+            if (this.parentView) this.checkAutoBounds(this.parentView.getBoundingClientRect())
+            window.requestAnimationFrame(this.imitateResizeObserver.bind(this))
+        }
     }
 
-    public copy(canvas: ILeaferCanvas, from?: IBoundsData, to?: IBoundsData, blendMode?: string): void {
-        if (from) {
-            if (!to) to = from
+    protected checkAutoBounds(parentSize: ISizeData): void {
+        const view = this.view as HTMLCanvasElement
+        const { x, y, width, height } = this.autoBounds.getBoundsFrom(parentSize)
+        if (width !== this.width || height !== this.height) {
+            const { style } = view
             const { pixelRatio } = this
-            if (blendMode) this.blendMode = blendMode
-            this.drawImage(canvas.view as HTMLCanvasElement, from.x * pixelRatio, from.y * pixelRatio, from.width * pixelRatio, from.height * pixelRatio, to.x * pixelRatio, to.y * pixelRatio, to.width * pixelRatio, to.height * pixelRatio)
-            if (blendMode) this.blendMode = 'normal'
-        } else {
-            this.drawImage(canvas.view as HTMLCanvasElement, 0, 0)
+            style.marginLeft = x + 'px'
+            style.marginTop = y + 'px'
+            const size = { width, height, pixelRatio }
+            const oldSize = {} as IScreenSizeData
+            DataHelper.copyAttrs(oldSize, this, canvasSizeAttrs)
+            this.resize(size)
+            if (this.width !== undefined) this.resizeListener(new ResizeEvent(size, oldSize))
         }
-
     }
 
-    public copyWorldToLocal(canvas: ILeaferCanvas, fromWorld: IMatrixWithBoundsData, toLocalBounds: IBoundsData, blendMode?: string): void {
-        const { pixelRatio } = this
-        if (blendMode) this.blendMode = blendMode
-        if (fromWorld.b || fromWorld.c) {
-            this.save()
-            this.resetTransform()
-            this.copy(canvas, fromWorld, BoundsHelper.tempTimesMatrix(toLocalBounds, fromWorld))
-            this.restore()
-        } else {
-            this.drawImage(canvas.view as HTMLCanvasElement, fromWorld.x * pixelRatio, fromWorld.y * pixelRatio, fromWorld.width * pixelRatio, fromWorld.height * pixelRatio, toLocalBounds.x, toLocalBounds.y, toLocalBounds.width, toLocalBounds.height)
+    public stopAutoLayout(): void {
+        this.autoLayout = false
+        this.resizeListener = null
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect()
+            this.resizeObserver = null
         }
-        if (blendMode) this.blendMode = 'normal'
     }
 
-    public fillBounds(bounds: IBoundsData, color: string | object, blendMode?: string): void {
-        const { pixelRatio } = this
-        if (blendMode) this.blendMode = blendMode
-        this.fillStyle = color
-        this.fillRect(bounds.x * pixelRatio, bounds.y * pixelRatio, bounds.width * pixelRatio, bounds.height * pixelRatio)
-        if (blendMode) this.blendMode = 'normal'
-    }
+    public unrealCanvas(): void { // App needs to use
+        if (!this.unreal && this.parentView) {
+            const view = this.view as HTMLCanvasElement
+            if (view) view.remove()
 
-    public strokeBounds(bounds: IBoundsData, color: string | object, blendMode?: string): void {
-        const { pixelRatio } = this
-        if (blendMode) this.blendMode = blendMode
-        this.strokeStyle = color
-        this.strokeRect(bounds.x * pixelRatio, bounds.y * pixelRatio, bounds.width * pixelRatio, bounds.height * pixelRatio)
-        if (blendMode) this.blendMode = 'normal'
-    }
-
-    public clearBounds(bounds: IBoundsData): void {
-        const { pixelRatio } = this
-        this.clearRect(bounds.x * pixelRatio, bounds.y * pixelRatio, bounds.width * pixelRatio, bounds.height * pixelRatio)
-    }
-
-    public clipBounds(bounds: IBoundsData): void {
-        const { pixelRatio } = this
-        this.beginPath()
-        this.rect(bounds.x * pixelRatio, bounds.y * pixelRatio, bounds.width * pixelRatio, bounds.height * pixelRatio)
-        this.clip()
-
-    }
-
-    public clear(): void {
-        const { pixelRatio } = this
-        this.clearRect(0, 0, this.width * pixelRatio, this.height * pixelRatio)
-    }
-
-
-    // other
-
-    public isSameSize(size: IScreenSizeData): boolean {
-        return this.width === size.width && this.height === size.height && this.pixelRatio === size.pixelRatio
-    }
-
-    // 需要有 manager变量
-    public getSameCanvas(useSameTransform?: boolean): ILeaferCanvas {
-        const { width, height, pixelRatio } = this
-        const canvas = this.manager.get({ width, height, pixelRatio })
-        canvas.manager || (canvas.manager = this.manager)
-        canvas.save()
-        if (useSameTransform) canvas.useSameTransform(this)
-        return canvas
-    }
-
-    public getBiggerCanvas(addWidth: number, addHeight: number): ILeaferCanvas {
-        let { width, height, pixelRatio } = this
-        if (addWidth) width += addWidth
-        if (addHeight) height += addHeight
-        const canvas = this.manager.get({ width, height, pixelRatio })
-        canvas.manager || (canvas.manager = this.manager)
-        canvas.save()
-        return canvas
-    }
-
-    public recycle(): void {
-        this.restore()
-        this.manager.recycle(this)
+            this.view = this.parentView as HTMLCanvasElement
+            this.unreal = true
+        }
     }
 
-
     public destroy(): void {
         if (this.view) {
-            super.destroy()
             this.stopAutoLayout()
-            this.manager = undefined
-            if (this.view && this.view.parentElement) this.view.remove()
-            this.view = undefined
-            this.bounds = undefined
+            if (!this.unreal && !this.offscreen) {
+                const view = this.view as HTMLCanvasElement
+                if (view.parentElement) view.remove()
+            }
+            super.destroy()
         }
     }
 

package/src/patch/roundRect.ts

@@ -1,61 +1,18 @@
-import { IObject } from '@leafer/interface'
+import { IObject, IPathDrawer } from '@leafer/interface'
+import { RectHelper } from '@leafer/path'
 
 
+const { drawRoundRect } = RectHelper
+
 export function roundRect(): void {
 
-    if (!(CanvasRenderingContext2D.prototype as IObject).roundRect) {
-
-        (CanvasRenderingContext2D.prototype as IObject).roundRect = (Path2D.prototype as IObject).roundRect = function (x: number, y: number, w: number, h: number, r: number | number[]): void {
-
-            let topLeft: number, topRight: number, bottomRight: number, bottomLeft: number
-
-            if (r instanceof Array) {
-                switch (r.length) {
-                    case 4:
-                        topLeft = r[0]
-                        topRight = r[1]
-                        bottomRight = r[2]
-                        bottomLeft = r[3]
-                        break
-                    case 2:
-                        topLeft = bottomRight = r[0]
-                        topRight = bottomLeft = r[1]
-                        break
-                    case 3:
-                        topLeft = r[0]
-                        topRight = bottomLeft = r[1]
-                        bottomRight = r[2]
-                        break
-                    case 1:
-                        r = r[0]
-                        break
-                    default:
-                        r = 0
-                }
-            }
-
-            if (topLeft === undefined) {
-                if (r) {
-                    topLeft = topRight = bottomRight = bottomLeft = r as number
-                } else {
-                    this.rect(x, y, w, h)
-                    return
-                }
-            }
-
-            const max = Math.min(w / 2, h / 2)
-            if (topLeft > max) topLeft = max
-            if (topRight > max) topRight = max
-            if (bottomRight > max) bottomRight = max
-            if (bottomLeft > max) bottomLeft = max
-
-            const R = this
-            topLeft ? R.moveTo(x + topLeft, y) : R.moveTo(x, y)
-            topRight ? R.arcTo(x + w, y, x + w, y + h, topRight) : R.lineTo(x + w, y)
-            bottomRight ? R.arcTo(x + w, y + h, x, y + h, bottomRight) : R.lineTo(x + w, y + h)
-            bottomLeft ? R.arcTo(x, y + h, x, y, bottomLeft) : R.lineTo(x, y + h)
-            topLeft ? R.arcTo(x, y, x + w, y, topLeft) : R.lineTo(x, y)
-            R.closePath()
+    const canvas = CanvasRenderingContext2D.prototype as IPathDrawer
+
+    if (!canvas.roundRect) {
+
+        canvas.roundRect = (Path2D.prototype as IObject).roundRect = function (x: number, y: number, width: number, height: number, cornerRadius: number | number[]): void {
+
+            drawRoundRect(this as IPathDrawer, x, y, width, height, cornerRadius)
         }
     }
 

package/src/CanvasBase.ts

@@ -1,272 +0,0 @@
-import { ICanvasAttr, ICanvasFillRule, ITextMetrics, ICanvasRenderingContext2D, IPath2D, IObject, InnerId, IMatrixData, IFunction } from '@leafer/interface'
-
-
-function contextAttr(realName?: string) {
-    return (target: CanvasBase, key: string) => {
-        if (!realName) realName = key
-        const property: IObject & ThisType<CanvasBase> = {
-            get() { return (this.context as IObject)[realName] },
-            set(value: unknown) { (this.context as IObject)[realName] = value }
-        }
-        Object.defineProperty(target, key, property)
-    }
-}
-
-const contextMethodNameList: string[] = []
-function contextMethod() {
-    return (_target: CanvasBase, key: string) => {
-        contextMethodNameList.push(key)
-    }
-}
-
-
-export class CanvasBase {
-
-    public readonly innerId: InnerId
-
-    public width: number
-    public height: number
-
-    public __: ICanvasAttr
-
-    public context: ICanvasRenderingContext2D
-
-    // canvas attr
-
-    @contextAttr('imageSmoothingEnabled')
-    public smooth: boolean
-
-    @contextAttr('imageSmoothingQuality')
-    public smoothLevel: ImageSmoothingQuality
-
-    @contextAttr('globalAlpha')
-    public opacity: number
-
-    @contextAttr('globalCompositeOperation')
-    public blendMode: string
-
-
-    @contextAttr()
-    public fillStyle: string | object
-
-    @contextAttr()
-    public strokeStyle: string | object
-
-
-    @contextAttr('lineWidth')
-    public strokeWidth: number
-
-    @contextAttr('lineCap')
-    public strokeCap: string
-
-    @contextAttr('lineJoin')
-    public strokeJoin: string
-
-    @contextAttr('lineDash')
-    public dashPattern: Array<number>
-
-    @contextAttr('lineDashOffset')
-    public dashOffset: number
-
-    @contextAttr()
-    public miterLimit: number
-
-
-    @contextAttr()
-    public shadowBlur: number
-
-    @contextAttr()
-    public shadowColor: string
-
-    @contextAttr()
-    public shadowOffsetX: number
-
-    @contextAttr()
-    public shadowOffsetY: number
-
-    @contextAttr()
-    public filter: string
-
-
-    @contextAttr()
-    public font: string
-
-    @contextAttr()
-    public fontKerning: string
-
-    @contextAttr()
-    public fontStretch: string
-
-    @contextAttr()
-    public fontVariantCaps: string
-
-
-    @contextAttr()
-    public textAlign: string
-
-    @contextAttr()
-    public textBaseline: string
-
-    @contextAttr()
-    public textRendering: string
-
-    @contextAttr()
-    public wordSpacing: string
-
-    @contextAttr()
-    public letterSpacing: string
-
-
-    @contextAttr()
-    public direction: string
-
-    // end
-
-    public bindContextMethod(): void {
-        let method: IFunction
-        contextMethodNameList.forEach(name => {
-            method = (this.context as IObject)[name]
-            if (method) (this as IObject)[name] = method.bind(this.context)
-        })
-    }
-
-    // canvas method
-
-    @contextMethod()
-    public setTransform(_a: number | IMatrixData, _b?: number, _c?: number, _d?: number, _e?: number, _f?: number): void { }
-
-    @contextMethod()
-    public resetTransform(): void { }
-
-    @contextMethod()
-    public getTransform(): IMatrixData { return void 0 }
-
-    @contextMethod()
-    public save(): void { }
-
-    @contextMethod()
-    public restore(): void { }
-
-    @contextMethod()
-    public translate(_x: number, _y: number): void { }
-
-    @contextMethod()
-    public scale(_x: number, _y: number): void { }
-
-    @contextMethod()
-    public rotate(_angle: number): void { }
-
-    @contextMethod()
-    public fill(_path2d?: IPath2D | ICanvasFillRule, _rule?: ICanvasFillRule): void { }
-
-    @contextMethod()
-    public stroke(_path2d?: IPath2D): void { }
-
-    @contextMethod()
-    public clip(_path2d?: IPath2D | ICanvasFillRule, _rule?: ICanvasFillRule): void { }
-
-    @contextMethod()
-    public fillRect(_x: number, _y: number, _width: number, _height: number): void { }
-
-    @contextMethod()
-    public strokeRect(_x: number, _y: number, _width: number, _height: number): void { }
-
-    @contextMethod()
-    public clearRect(_x: number, _y: number, _width: number, _height: number): void { }
-
-    public drawImage(image: CanvasImageSource, sx: number, sy: number, sw?: number, sh?: number, dx?: number, dy?: number, dw?: number, dh?: number): void {
-        switch (arguments.length) {
-            case 9:
-
-                // safari: drawimage裁剪画布外的坐标会有问题, 必须是不小于0的坐标点
-                if (sx < 0) {
-                    const d = (-sx / sw) * dw
-                    sw += sx
-                    sx = 0
-                    dx += d
-                    dw -= d
-                }
-
-                if (sy < 0) {
-                    const d = (-sy / sh) * dh
-                    sh += sy
-                    sy = 0
-                    dy += d
-                    dh -= d
-                }
-
-                this.context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
-                break
-            case 5:
-                this.context.drawImage(image, sx, sy, sw, sh) // = dx, dy, dw, dh
-                break
-            case 3:
-                this.context.drawImage(image, sx, sy)
-        }
-    }
-
-
-    // canvas draw
-    @contextMethod()
-    public beginPath(): void { }
-
-    @contextMethod()
-    public moveTo(_x: number, _y: number): void { }
-
-    @contextMethod()
-    public lineTo(_x: number, _y: number): void { }
-
-    @contextMethod()
-    public bezierCurveTo(_cp1x: number, _cp1y: number, _cp2x: number, _cp2y: number, _x: number, _y: number): void { }
-
-    @contextMethod()
-    public quadraticCurveTo(_cpx: number, _cpy: number, _x: number, _y: number): void { }
-
-    @contextMethod()
-    public closePath(): void { }
-
-    @contextMethod()
-    public arc(_x: number, _y: number, _radius: number, _startAngle: number, _endAngle: number, _counterclockwise?: boolean): void { }
-
-    @contextMethod()
-    public arcTo(_x1: number, _y1: number, _x2: number, _y2: number, _radius: number): void { }
-
-    @contextMethod()
-    public ellipse(_x: number, _y: number, _radiusX: number, _radiusY: number, _rotation: number, _startAngle: number, _endAngle: number, _counterclockwise?: boolean): void { }
-
-    @contextMethod()
-    public rect(_x: number, _y: number, _width: number, _height: number): void { }
-
-    @contextMethod()
-    public roundRect(_x: number, _y: number, _width: number, _height: number, _radius?: number | number[]): void { }
-
-    // end canvas draw
-
-    // paint
-
-    @contextMethod()
-    public createConicGradient(_startAngle: number, _x: number, _y: number): CanvasGradient { return void 0 }
-
-    @contextMethod()
-    public createLinearGradient(_x0: number, _y0: number, _x1: number, _y1: number): CanvasGradient { return void 0 }
-
-    @contextMethod()
-    public createPattern(_image: CanvasImageSource, _repetition: string | null): CanvasPattern | null { return void 0 }
-
-    @contextMethod()
-    public createRadialGradient(_x0: number, _y0: number, _r0: number, _x1: number, _y1: number, _r1: number): CanvasGradient { return void 0 }
-
-    // text
-    @contextMethod()
-    public fillText(_text: string, _x: number, _y: number, _maxWidth?: number): void { }
-
-    @contextMethod()
-    public measureText(_text: string): ITextMetrics { return void 0 }
-
-    @contextMethod()
-    public strokeText(_text: string, _x: number, _y: number, _maxWidth?: number): void { }
-
-    public destroy(): void {
-        this.context = undefined
-    }
-}