@leafer/canvas-web 1.0.0-alpha.1

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023-present, Chao (Leafer) Wan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# @leafer/canvas-web

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@leafer/canvas-web",
+  "version": "1.0.0-alpha.1",
+  "description": "@leafer/canvas-web",
+  "author": "Chao (Leafer) Wan",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "files": ["src"],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/leaferjs/leafer.git"
+  },
+  "homepage": "https://github.com/leaferjs/leafer/tree/main/packages/canvas/canvas-web",
+  "bugs": "https://github.com/leaferjs/leafer/issues",
+  "keywords": [
+    "leafer",
+    "leaferjs"
+  ],
+  "dependencies": {
+    "@leafer/math": "1.0.0-alpha.1",
+    "@leafer/event": "1.0.0-alpha.1",
+    "@leafer/debug": "1.0.0-alpha.1"
+  },
+  "devDependencies": {
+     "@leafer/interface": "1.0.0-alpha.1"
+  }
+}

package/src/CanvasBase.ts

@@ -0,0 +1,272 @@
+import { ICanvasAttr, CanvasFillRule, Path2D, TextMetrics, CanvasRenderingContext2D, 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: CanvasRenderingContext2D
+
+    // 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?: Path2D | CanvasFillRule, rule?: CanvasFillRule): void { }
+
+    @contextMethod()
+    public stroke(path2d?: Path2D): void { }
+
+    @contextMethod()
+    public clip(path2d?: Path2D | CanvasFillRule, rule?: CanvasFillRule): 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): TextMetrics { return void 0 }
+
+    @contextMethod()
+    public strokeText(text: string, x: number, y: number, maxWidth?: number): void { }
+
+    public destroy(): void {
+        this.context = undefined
+    }
+}

package/src/LeaferCanvas.ts

@@ -0,0 +1,338 @@
+import { IBounds, ILeaferCanvas, ICanvasStrokeOptions, CanvasFillRule, ILeaferCanvasConfig, IMatrixData, IBoundsData, IAutoBounds, ISizeData, IScreenSizeData, IResizeEventListener, IMatrixWithBoundsData, IPointData, InnerId, ILeafer, ICanvasManager } from '@leafer/interface'
+import { Bounds, BoundsHelper, IncrementId } from '@leafer/math'
+import { ResizeEvent } from '@leafer/event'
+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
+
+    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
+
+    protected resizeObserver: ResizeObserver
+
+    constructor(config?: ILeaferCanvasConfig, manager?: ICanvasManager) {
+        super()
+
+        if (!config) config = minSize
+
+        this.manager = manager
+        this.innerId = IncrementId.create(IncrementId.CNAVAS)
+
+        if (config.view) {
+
+            const { view } = config
+
+            let realView: unknown = (typeof view === 'string') ? document.getElementById(view) : view as HTMLElement
+            if (realView) {
+                if (realView instanceof HTMLCanvasElement) {
+
+                    this.view = realView
+
+                } 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
+                    }
+
+                    this.view = document.createElement('canvas');
+                    (realView as HTMLElement).appendChild(this.view)
+                }
+            } else {
+                debug.error(`can't find view by id: ${view}`)
+            }
+
+        }
+
+        if (!this.view) this.view = document.createElement('canvas')
+        this.pixelRatio = config.pixelRatio
+
+        if (!config.webgl) {
+            this.context = this.view.getContext('2d')
+            this.smooth = true
+            if (config.fill) this.view.style.backgroundColor = config.fill
+            if (config.width && config.height) this.resize(config as IScreenSizeData)
+
+            this.bindContextMethod()
+        }
+    }
+
+    public debug(): void { }
+
+    public pixel(num: number): number { return num * this.pixelRatio }
+
+    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'
+
+            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.view.parentElement
+        if (parent) {
+            this.resizeObserver.observe(parent)
+            check(parent.getBoundingClientRect())
+        }
+    }
+
+    public stopAutoLayout(): void {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect()
+            this.resizeObserver = undefined
+        }
+    }
+
+    public resize(size: IScreenSizeData): void {
+        const { style } = this.view
+        const { width, height, pixelRatio } = size
+        if (this.isSameSize(size)) return
+
+        let takeCanvas: ILeaferCanvas
+        if (this.context && this.width) {
+            takeCanvas = this.getSameCanvas()
+            takeCanvas.copy(this)
+        }
+
+        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
+                )
+            }
+
+        } else {
+
+            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.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?: CanvasFillRule): 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()
+    }
+
+    public copy(canvas: ILeaferCanvas, from?: IBoundsData, to?: IBoundsData, blendMode?: string): void {
+        if (from) {
+            if (!to) to = from
+            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)
+        }
+
+    }
+
+    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)
+        }
+        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 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)
+    }
+
+
+    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
+        }
+    }
+
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export { LeaferCanvas } from './LeaferCanvas'
+
+import { patch } from './patch'
+patch()

package/src/patch/index.ts

@@ -0,0 +1,5 @@
+import { roundRect } from './roundRect'
+
+export function patch(): void {
+    roundRect()
+}

package/src/patch/roundRect.ts

@@ -0,0 +1,63 @@
+import { ICanvasDrawPath } from '@leafer/interface'
+
+
+export function roundRect(): void {
+
+    if (!(CanvasRenderingContext2D.prototype as ICanvasDrawPath).roundRect) {
+
+        (CanvasRenderingContext2D.prototype as ICanvasDrawPath).roundRect = (Path2D.prototype as ICanvasDrawPath).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()
+        }
+    }
+
+}
+