@leafer/canvas-web 1.0.0-alpha.23 → 1.0.0-alpha.31

package/package.json

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

package/src/LeaferCanvas.ts

@@ -1,81 +1,63 @@
-import { IBounds, ILeaferCanvas, ICanvasStrokeOptions, ICanvasContext2D, ILeaferCanvasConfig, IMatrixData, IBoundsData, IAutoBounds, ISizeData, IScreenSizeData, IResizeEventListener, IMatrixWithBoundsData, IPointData, InnerId, ICanvasManager, IWindingRule } 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 { Platform } from '@leafer/platform'
+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 temp = new Bounds()
-const minSize: IScreenSizeData = {
-    width: 1,
-    height: 1,
-    pixelRatio: 1
-}
-
-export class LeaferCanvas extends CanvasBase implements ILeaferCanvas {
-
-    public manager: ICanvasManager
-
-    public readonly innerId: InnerId
-
-    public pixelRatio: number
-    public get pixelWidth(): number { return this.width * this.pixelRatio }
-    public get pixelHeight(): number { return this.height * this.pixelRatio }
-
-    public bounds: IBounds
+export class LeaferCanvas extends LeaferCanvasBase {
 
     public view: HTMLCanvasElement | OffscreenCanvas
     public parentView: HTMLElement
 
-    public offscreen: boolean
-
-    public recycled?: boolean
-
     protected resizeObserver: ResizeObserver
+    protected autoBounds: IAutoBounds
+    protected resizeListener: IResizeEventListener
 
-    protected savedblendMode: string
-
-    constructor(config?: ILeaferCanvasConfig, manager?: ICanvasManager) {
-        super()
-
-        if (!config) config = minSize
-        if (!config.pixelRatio) config.pixelRatio = devicePixelRatio
-
-        this.manager = manager
-        this.innerId = IncrementId.create(IncrementId.CNAVAS)
-
-        const { view, width, height, pixelRatio, fill, hittable } = config
-        const autoLayout = !width || !height
-
-        this.pixelRatio = pixelRatio
-        this.offscreen = Platform.isWorker || config.offscreen
+    public init(): void {
+        const { view } = this.config
 
         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 (fill) style.backgroundColor = fill
-            if (!hittable) style.pointerEvents = 'none'
-            if (autoLayout) style.display || (style.display = 'block')
+            if (this.autoLayout) style.display || (style.display = 'block')
             this.parentView = (this.view as HTMLCanvasElement).parentElement
         }
 
-        this.__init()
-        if (!autoLayout) this.resize(config as IScreenSizeData)
+        this.__createContext()
+
+        if (!this.autoLayout) this.resize(this.config as IScreenSizeData)
+    }
+
+    public setBackgroundColor(color: string): void {
+        const view = this.view as HTMLElement
+        view.style.backgroundColor = color
     }
 
-    protected __init(): void {
+    public setHittable(hittable: boolean): void {
+        const view = this.view as HTMLElement
+        view.style.pointerEvents = hittable ? 'auto' : 'none'
+    }
+
+    protected __createContext(): void {
         this.context = this.view.getContext('2d') as ICanvasContext2D
         this.__bindContext()
     }
 
     protected __createView(): void {
-        this.view = this.offscreen ? new OffscreenCanvas(1, 1) : document.createElement('canvas')
+        if (this.offscreen) {
+            try {
+                this.view = new OffscreenCanvas(1, 1)
+                return
+            } catch (e) {
+                debug.error(e)
+            }
+        }
+        this.view = document.createElement('canvas')
     }
 
     protected __createViewFrom(inputView: string | object): void {
@@ -110,77 +92,13 @@ export class LeaferCanvas extends CanvasBase implements ILeaferCanvas {
                 parent.appendChild(view)
             }
         } else {
-            debug.error(`can't find view by id: ${inputView}`)
+            debug.error(`no id: ${inputView}`)
             this.__createView()
         }
     }
 
-    public debug(): void {
-        const panel = document.createElement('div')
-        panel.style.position = 'absolute'
-        panel.style.top = '10px'
-        panel.style.left = '10px'
-        panel.style.transform = 'scale(0.5)'
-        panel.style.transformOrigin = '0px 0px'
-        panel.style.pointerEvents = 'none'
-        panel.style.zIndex = '100'
-        document.body.appendChild(panel)
-        panel.appendChild(this.view as HTMLCanvasElement)
-    }
-
-    public pixel(num: number): number { return num * this.pixelRatio }
-
-    public startAutoLayout(autoBounds: IAutoBounds, listener: IResizeEventListener): void {
-        if (!this.offscreen) {
-            const view = this.view as HTMLCanvasElement
-            const check = (parentSize: ISizeData) => {
-                const { x, y, width, height } = autoBounds.getBoundsFrom(parentSize)
-                const { style } = view
-                style.marginLeft = x + 'px'
-                style.marginTop = y + 'px'
-
-                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))
-                }
-            }
-
-            this.resizeObserver = new ResizeObserver((entries) => {
-                for (const entry of entries) {
-                    check(entry.contentRect)
-                }
-            })
-
-            const parent = this.parentView
-            if (parent) {
-                this.resizeObserver.observe(parent)
-                check(parent.getBoundingClientRect())
-            }
-        }
-    }
-
-    public stopAutoLayout(): void {
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect()
-            this.resizeObserver = null
-        }
-    }
-
-    public resize(size: IScreenSizeData): void {
+    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.copyWorld(this)
-        }
-
-        Object.assign(this, { width, height, pixelRatio })
-        this.bounds = new Bounds(0, 0, width, height)
 
         if (!this.offscreen) {
             const { style } = this.view as HTMLCanvasElement
@@ -190,217 +108,82 @@ export class LeaferCanvas extends CanvasBase implements ILeaferCanvas {
 
         this.view.width = width * pixelRatio
         this.view.height = height * pixelRatio
-        this.smooth = false
-
-        if (this.context && takeCanvas) {
-            this.copyWorld(takeCanvas)
-            takeCanvas.recycle()
-        }
-    }
-
-    public saveBlendMode(blendMode: string): void {
-        this.savedblendMode = this.blendMode
-        this.blendMode = blendMode
     }
 
-    public restoreBlendMode(): void {
-        this.blendMode = this.savedblendMode
-    }
+    public startAutoLayout(autoBounds: IAutoBounds, listener: IResizeEventListener): void {
+        if (!this.offscreen) {
+            this.autoBounds = autoBounds
+            this.resizeListener = listener
+            try {
+
+                this.resizeObserver = new ResizeObserver((entries) => {
+                    for (const entry of entries) this.checkAutoBounds(entry.contentRect)
+                })
+
+                const parent = this.parentView
+                if (parent) {
+                    this.resizeObserver.observe(parent)
+                    this.checkAutoBounds(parent.getBoundingClientRect())
+                }
 
-    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
-                )
-            }
+            } catch (e) {
 
-        } else {
+                this.imitateResizeObserver()
 
-            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())
-    }
-
-
-    public setStroke(strokeStyle: string | object, strokeWidth: number, options?: ICanvasStrokeOptions): void {
-
-        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.dashOffset = options.dashOffset
-            this.miterLimit = options.miterLimit
+    protected imitateResizeObserver(): void {
+        if (this.autoLayout) {
+            if (this.parentView) this.checkAutoBounds(this.parentView.getBoundingClientRect())
+            window.requestAnimationFrame(this.imitateResizeObserver.bind(this))
         }
     }
 
-    public hitFill(point: IPointData, fillRule?: IWindingRule): boolean {
-        return this.context.isPointInPath(point.x, point.y, fillRule)
-    }
-
-    public hitStroke(point: IPointData): boolean {
-        return this.context.isPointInStroke(point.x, point.y)
-    }
-
-
-    public setWorldShadow(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 setWorldBlur(blur: number): void {
-        const { pixelRatio } = this
-        this.filter = `blur(${blur * pixelRatio}px)`
-    }
-
-
-    public copyWorld(canvas: ILeaferCanvas, from?: IBoundsData, to?: IBoundsData, blendMode?: string): void {
-        if (blendMode) this.blendMode = blendMode
-        if (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 (!to) to = from
-            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)
-        } 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))
         }
-        if (blendMode) this.blendMode = 'normal'
     }
 
-    public copyWorldToInner(canvas: ILeaferCanvas, fromWorld: IMatrixWithBoundsData, toInnerBounds: IBoundsData, blendMode?: string): void {
-        if (blendMode) this.blendMode = blendMode
-        if (fromWorld.b || fromWorld.c) {
-            this.save()
-            this.resetTransform()
-            this.copyWorld(canvas, fromWorld, BoundsHelper.tempToOuterOf(toInnerBounds, fromWorld))
-            this.restore()
-        } else {
-            const { pixelRatio } = this
-            this.drawImage(canvas.view as HTMLCanvasElement, fromWorld.x * pixelRatio, fromWorld.y * pixelRatio, fromWorld.width * pixelRatio, fromWorld.height * pixelRatio, toInnerBounds.x, toInnerBounds.y, toInnerBounds.width, toInnerBounds.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 fillWorld(bounds: IBoundsData, color: string | object, blendMode?: string): void {
-        if (blendMode) this.blendMode = blendMode
-        this.fillStyle = color
-        temp.copy(bounds).scale(this.pixelRatio)
-        this.fillRect(temp.x, temp.y, temp.width, temp.height)
-        if (blendMode) this.blendMode = 'normal'
-    }
-
-    public strokeWorld(bounds: IBoundsData, color: string | object, blendMode?: string): void {
-        if (blendMode) this.blendMode = blendMode
-        this.strokeStyle = color
-        temp.copy(bounds).scale(this.pixelRatio)
-        this.strokeRect(temp.x, temp.y, temp.width, temp.height)
-        if (blendMode) this.blendMode = 'normal'
-    }
-
-    public clearWorld(bounds: IBoundsData, ceilPixel?: boolean): void {
-        temp.copy(bounds).scale(this.pixelRatio)
-        if (ceilPixel) temp.ceil()
-        this.clearRect(temp.x, temp.y, temp.width, temp.height)
     }
 
-    public clipWorld(bounds: IBoundsData, ceilPixel?: boolean): void {
-        this.beginPath()
-        temp.copy(bounds).scale(this.pixelRatio)
-        if (ceilPixel) temp.ceil()
-        this.rect(temp.x, temp.y, temp.width, temp.height)
-        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)
-    }
-
-    public unloadView(): void {
-        if (this.parentView) {
+    public unrealCanvas(): void { // App needs to use
+        if (!this.unreal && this.parentView) {
             const view = this.view as HTMLCanvasElement
-            const fill = view.style.backgroundColor
-            if (fill) this.parentView.style.backgroundColor = fill
-            view.remove() // App needs to use
+            if (view) view.remove()
+
+            this.view = this.parentView as HTMLCanvasElement
+            this.unreal = true
         }
     }
 
     public destroy(): void {
         if (this.view) {
-            super.destroy()
             this.stopAutoLayout()
-            if (!this.offscreen) {
+            if (!this.unreal && !this.offscreen) {
                 const view = this.view as HTMLCanvasElement
                 if (view.parentElement) view.remove()
             }
-            this.manager = null
-            this.view = null
-            this.parentView = null
-            this.context = null
+            super.destroy()
         }
     }
 

package/src/patch/roundRect.ts

@@ -1,61 +1,16 @@
-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()
+        (CanvasRenderingContext2D.prototype as IObject).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,280 +0,0 @@
-import { ICanvasAttr, ITextMetrics, ICanvasContext2D, IPath2D, IObject, InnerId, IMatrixData, IFunction, IWindingRule } 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)
-    }
-}
-
-const emptyArray: number[] = []
-
-export class CanvasBase {
-
-    public readonly innerId: InnerId
-
-    public width: number
-    public height: number
-
-    public __: ICanvasAttr
-
-    public context: ICanvasContext2D
-
-    // 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
-
-    public set dashPattern(value: number[]) {
-        this.context.setLineDash(value || emptyArray)
-    }
-    public get dashPattern(): number[] {
-        return this.context.getLineDash()
-    }
-
-    @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 __bindContext(): 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 transform(_a: number, _b: number, _c: number, _d: number, _e: number, _f: number): 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 | IWindingRule, _rule?: IWindingRule): void { }
-
-    @contextMethod()
-    public stroke(_path2d?: IPath2D): void { }
-
-    @contextMethod()
-    public clip(_path2d?: IPath2D | IWindingRule, _rule?: IWindingRule): 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 = null
-    }
-}