@idraw/util 0.3.0 → 0.4.0-alpha.1

package/dist/esm/index.d.ts

@@ -1,71 +1,26 @@
-import { delay, compose, throttle } from './lib/time';
-import { downloadImageFromCanvas } from './lib/file';
-import { toColorHexStr, toColorHexNum, isColorStr } from './lib/color';
-import { createUUID } from './lib/uuid';
-import { deepClone } from './lib/data';
-import istype from './lib/istype';
-import { loadImage, loadSVG, loadHTML } from './lib/loader';
-import Context from './lib/context';
-import is from './lib/is';
-import check from './lib/check';
-export { is, check, delay, compose, throttle, loadImage, loadSVG, loadHTML, downloadImageFromCanvas, toColorHexStr, toColorHexNum, isColorStr, createUUID, istype, deepClone, Context };
-declare const _default: {
-    is: {
-        x: (value: any) => boolean;
-        y: (value: any) => boolean;
-        w: (value: any) => boolean;
-        h: (value: any) => boolean;
-        angle: (value: any) => boolean;
-        number: (value: any) => boolean;
-        borderWidth: (value: any) => boolean;
-        borderRadius: (value: any) => boolean;
-        color: (value: any) => boolean;
-        imageSrc: (value: any) => boolean;
-        imageURL: (value: any) => boolean;
-        imageBase64: (value: any) => boolean;
-        svg: (value: any) => boolean;
-        html: (value: any) => boolean;
-        text: (value: any) => boolean;
-        fontSize: (value: any) => boolean;
-        lineHeight: (value: any) => boolean;
-        textAlign: (value: any) => boolean;
-        fontFamily: (value: any) => boolean;
-        fontWeight: (value: any) => boolean;
-        strokeWidth: (value: any) => boolean;
-    };
-    check: {
-        attrs: (attrs: any) => boolean;
-        textDesc: (desc: any) => boolean;
-        rectDesc: (desc: any) => boolean;
-        circleDesc: (desc: any) => boolean;
-        imageDesc: (desc: any) => boolean;
-        svgDesc: (desc: any) => boolean;
-        htmlDesc: (desc: any) => boolean;
-    };
-    delay: typeof delay;
-    compose: typeof compose;
-    throttle: typeof throttle;
-    loadImage: typeof loadImage;
-    loadSVG: typeof loadSVG;
-    loadHTML: typeof loadHTML;
-    downloadImageFromCanvas: typeof downloadImageFromCanvas;
-    toColorHexStr: typeof toColorHexStr;
-    toColorHexNum: typeof toColorHexNum;
-    isColorStr: typeof isColorStr;
-    createUUID: typeof createUUID;
-    istype: {
-        type(data: any, lowerCase?: boolean | undefined): string;
-        array(data: any): boolean;
-        json(data: any): boolean;
-        function(data: any): boolean;
-        asyncFunction(data: any): boolean;
-        string(data: any): boolean;
-        number(data: any): boolean;
-        undefined(data: any): boolean;
-        null(data: any): boolean;
-        promise(data: any): boolean;
-    };
-    deepClone: typeof deepClone;
-    Context: typeof Context;
-};
-export default _default;
+export { delay, compose, throttle } from './lib/time';
+export { downloadImageFromCanvas } from './lib/file';
+export { toColorHexStr, toColorHexNum, isColorStr, colorNameToHex } from './lib/color';
+export { createUUID, isAssetId, createAssetId } from './lib/uuid';
+export { deepClone, sortDataAsserts } from './lib/data';
+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 { EventEmitter } from './lib/event';
+export { calcDistance, calcSpeed, equalPoint, equalTouchPoint, vaildPoint, vaildTouchPoint, getCenterFromTwoPoints } from './lib/point';
+export { Store } from './lib/store';
+export { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from './lib/middleware';
+export { Context2D } from './lib/context2d';
+export { rotateElement, parseRadianToAngle, parseAngleToRadian, rotateElementVertexes, getElementRotateVertexes, calcElementCenter, calcElementCenterFromVertexes, rotatePointInGroup, limitAngle } from './lib/rotate';
+export { getSelectedElementUUIDs, validateElements, calcElementsContextSize, calcElementsViewInfo, getElemenetsAssetIds, findElementFromList, findElementsFromList, updateElementInList, getGroupQueueFromList } from './lib/element';
+export { checkRectIntersect } from './lib/rect';
+export { viewScale, viewScroll, calcViewElementSize, calcViewPointSize, calcViewVertexes, isViewPointInElement, getViewPointAtElement, isElementInView } from './lib/view-calc';
+export { rotatePoint, rotateVertexes } from './lib/rotate';
+export { getElementVertexes, calcElementVertexesInGroup, calcElementVertexesQueueInGroup, calcElementQueueVertexesQueueInGroup } from './lib/vertex';
+export { calcElementSizeController } from './lib/controller';
+export { generateSVGPath, parseSVGPath } from './lib/svg-path';
+export { generateHTML, parseHTML } from './lib/html';
+export { compressImage } from './lib/image';
+export { formatNumber } from './lib/number';

package/dist/esm/index.js

@@ -1,29 +1,26 @@
-import { delay, compose, throttle } from './lib/time';
-import { downloadImageFromCanvas } from './lib/file';
-import { toColorHexStr, toColorHexNum, isColorStr } from './lib/color';
-import { createUUID } from './lib/uuid';
-import { deepClone } from './lib/data';
-import istype from './lib/istype';
-import { loadImage, loadSVG, loadHTML } from './lib/loader';
-import Context from './lib/context';
-import is from './lib/is';
-import check from './lib/check';
-export { is, check, delay, compose, throttle, loadImage, loadSVG, loadHTML, downloadImageFromCanvas, toColorHexStr, toColorHexNum, isColorStr, createUUID, istype, deepClone, Context };
-export default {
-    is,
-    check,
-    delay,
-    compose,
-    throttle,
-    loadImage,
-    loadSVG,
-    loadHTML,
-    downloadImageFromCanvas,
-    toColorHexStr,
-    toColorHexNum,
-    isColorStr,
-    createUUID,
-    istype,
-    deepClone,
-    Context
-};
+export { delay, compose, throttle } from './lib/time';
+export { downloadImageFromCanvas } from './lib/file';
+export { toColorHexStr, toColorHexNum, isColorStr, colorNameToHex } from './lib/color';
+export { createUUID, isAssetId, createAssetId } from './lib/uuid';
+export { deepClone, sortDataAsserts } from './lib/data';
+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 { EventEmitter } from './lib/event';
+export { calcDistance, calcSpeed, equalPoint, equalTouchPoint, vaildPoint, vaildTouchPoint, getCenterFromTwoPoints } from './lib/point';
+export { Store } from './lib/store';
+export { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from './lib/middleware';
+export { Context2D } from './lib/context2d';
+export { rotateElement, parseRadianToAngle, parseAngleToRadian, rotateElementVertexes, getElementRotateVertexes, calcElementCenter, calcElementCenterFromVertexes, rotatePointInGroup, limitAngle } from './lib/rotate';
+export { getSelectedElementUUIDs, validateElements, calcElementsContextSize, calcElementsViewInfo, getElemenetsAssetIds, findElementFromList, findElementsFromList, updateElementInList, getGroupQueueFromList } from './lib/element';
+export { checkRectIntersect } from './lib/rect';
+export { viewScale, viewScroll, calcViewElementSize, calcViewPointSize, calcViewVertexes, isViewPointInElement, getViewPointAtElement, isElementInView } from './lib/view-calc';
+export { rotatePoint, rotateVertexes } from './lib/rotate';
+export { getElementVertexes, calcElementVertexesInGroup, calcElementVertexesQueueInGroup, calcElementQueueVertexesQueueInGroup } from './lib/vertex';
+export { calcElementSizeController } from './lib/controller';
+export { generateSVGPath, parseSVGPath } from './lib/svg-path';
+export { generateHTML, parseHTML } from './lib/html';
+export { compressImage } from './lib/image';
+export { formatNumber } from './lib/number';

package/dist/esm/lib/canvas.d.ts

@@ -0,0 +1,15 @@
+import type { ViewContent } from '@idraw/types';
+import { Context2D } from './context2d';
+export declare function createContext2D(opts: {
+    ctx?: CanvasRenderingContext2D;
+    width: number;
+    height: number;
+    devicePixelRatio: number;
+}): Context2D;
+export declare function createOffscreenContext2D(opts: {
+    width: number;
+    height: number;
+}): CanvasRenderingContext2D | OffscreenRenderingContext;
+export declare function createBoardContexts(ctx: CanvasRenderingContext2D, opts?: {
+    devicePixelRatio: number;
+}): ViewContent;

package/dist/esm/lib/canvas.js

@@ -0,0 +1,36 @@
+import { Context2D } from './context2d';
+export function createContext2D(opts) {
+    const { width, height, ctx, devicePixelRatio } = opts;
+    let context = ctx;
+    if (!context) {
+        const canvas = document.createElement('canvas');
+        canvas.width = width * devicePixelRatio;
+        canvas.height = height * devicePixelRatio;
+        context = canvas.getContext('2d');
+    }
+    const context2d = new Context2D(context, opts);
+    return context2d;
+}
+export function createOffscreenContext2D(opts) {
+    const { width, height } = opts;
+    const offCanvas = new OffscreenCanvas(width, height);
+    const offRenderCtx = offCanvas.getContext('2d');
+    const offCtx = offRenderCtx.canvas.getContext('2d');
+    return offCtx;
+}
+export function createBoardContexts(ctx, opts) {
+    const ctxOpts = {
+        width: ctx.canvas.width,
+        height: ctx.canvas.height,
+        devicePixelRatio: (opts === null || opts === void 0 ? void 0 : opts.devicePixelRatio) || 1
+    };
+    const viewContext = createContext2D(ctxOpts);
+    const helperContext = createContext2D(ctxOpts);
+    const boardContext = createContext2D(Object.assign({ ctx }, ctxOpts));
+    const content = {
+        viewContext,
+        helperContext,
+        boardContext
+    };
+    return content;
+}

package/dist/esm/lib/check.d.ts

@@ -1,11 +1,11 @@
 declare function attrs(attrs: any): boolean;
-declare function rectDesc(desc: any): boolean;
-declare function circleDesc(desc: any): boolean;
-declare function imageDesc(desc: any): boolean;
-declare function svgDesc(desc: any): boolean;
-declare function htmlDesc(desc: any): boolean;
-declare function textDesc(desc: any): boolean;
-declare const check: {
+declare function rectDesc(detail: any): boolean;
+declare function circleDesc(detail: any): boolean;
+declare function imageDesc(detail: any): boolean;
+declare function svgDesc(detail: any): boolean;
+declare function htmlDesc(detail: any): boolean;
+declare function textDesc(detail: any): boolean;
+export declare const check: {
     attrs: typeof attrs;
     textDesc: typeof textDesc;
     rectDesc: typeof rectDesc;
@@ -14,4 +14,4 @@ declare const check: {
     svgDesc: typeof svgDesc;
     htmlDesc: typeof htmlDesc;
 };
-export default check;
+export {};

package/dist/esm/lib/check.js

@@ -1,4 +1,4 @@
-import is from './is';
+import { is } from './is';
 function attrs(attrs) {
     const { x, y, w, h, angle } = attrs;
     if (!(is.x(x) && is.y(y) && is.w(w) && is.h(h) && is.angle(angle))) {
@@ -9,65 +9,65 @@ function attrs(attrs) {
     }
     return true;
 }
-function box(desc = {}) {
-    const { borderColor, borderRadius, borderWidth } = desc;
-    if (desc.hasOwnProperty('borderColor') && !is.color(borderColor)) {
+function box(detail = {}) {
+    const { borderColor, borderRadius, borderWidth } = detail;
+    if (detail.hasOwnProperty('borderColor') && !is.color(borderColor)) {
         return false;
     }
-    if (desc.hasOwnProperty('borderRadius') && !is.number(borderRadius)) {
+    if (detail.hasOwnProperty('borderRadius') && !is.number(borderRadius)) {
         return false;
     }
-    if (desc.hasOwnProperty('borderWidth') && !is.number(borderWidth)) {
+    if (detail.hasOwnProperty('borderWidth') && !is.number(borderWidth)) {
         return false;
     }
     return true;
 }
-function rectDesc(desc) {
-    const { bgColor } = desc;
-    if (desc.hasOwnProperty('bgColor') && !is.color(bgColor)) {
+function rectDesc(detail) {
+    const { background } = detail;
+    if (detail.hasOwnProperty('background') && !is.color(background)) {
         return false;
     }
-    if (!box(desc)) {
+    if (!box(detail)) {
         return false;
     }
     return true;
 }
-function circleDesc(desc) {
-    const { bgColor, borderColor, borderWidth } = desc;
-    if (desc.hasOwnProperty('bgColor') && !is.color(bgColor)) {
+function circleDesc(detail) {
+    const { background, borderColor, borderWidth } = detail;
+    if (detail.hasOwnProperty('background') && !is.color(background)) {
         return false;
     }
-    if (desc.hasOwnProperty('borderColor') && !is.color(borderColor)) {
+    if (detail.hasOwnProperty('borderColor') && !is.color(borderColor)) {
         return false;
     }
-    if (desc.hasOwnProperty('borderWidth') && !is.number(borderWidth)) {
+    if (detail.hasOwnProperty('borderWidth') && !is.number(borderWidth)) {
         return false;
     }
     return true;
 }
-function imageDesc(desc) {
-    const { src } = desc;
+function imageDesc(detail) {
+    const { src } = detail;
     if (!is.imageSrc(src)) {
         return false;
     }
     return true;
 }
-function svgDesc(desc) {
-    const { svg } = desc;
+function svgDesc(detail) {
+    const { svg } = detail;
     if (!is.svg(svg)) {
         return false;
     }
     return true;
 }
-function htmlDesc(desc) {
-    const { html } = desc;
+function htmlDesc(detail) {
+    const { html } = detail;
     if (!is.html(html)) {
         return false;
     }
     return true;
 }
-function textDesc(desc) {
-    const { text, color, fontSize, lineHeight, fontFamily, textAlign, fontWeight, bgColor, strokeWidth, strokeColor } = desc;
+function textDesc(detail) {
+    const { text, color, fontSize, lineHeight, fontFamily, textAlign, fontWeight, background, strokeWidth, strokeColor } = detail;
     if (!is.text(text)) {
         return false;
     }
@@ -77,33 +77,33 @@ function textDesc(desc) {
     if (!is.fontSize(fontSize)) {
         return false;
     }
-    if (desc.hasOwnProperty('bgColor') && !is.color(bgColor)) {
+    if (detail.hasOwnProperty('background') && !is.color(background)) {
         return false;
     }
-    if (desc.hasOwnProperty('fontWeight') && !is.fontWeight(fontWeight)) {
+    if (detail.hasOwnProperty('fontWeight') && !is.fontWeight(fontWeight)) {
         return false;
     }
-    if (desc.hasOwnProperty('lineHeight') && !is.lineHeight(lineHeight)) {
+    if (detail.hasOwnProperty('lineHeight') && !is.lineHeight(lineHeight)) {
         return false;
     }
-    if (desc.hasOwnProperty('fontFamily') && !is.fontFamily(fontFamily)) {
+    if (detail.hasOwnProperty('fontFamily') && !is.fontFamily(fontFamily)) {
         return false;
     }
-    if (desc.hasOwnProperty('textAlign') && !is.textAlign(textAlign)) {
+    if (detail.hasOwnProperty('textAlign') && !is.textAlign(textAlign)) {
         return false;
     }
-    if (desc.hasOwnProperty('strokeWidth') && !is.strokeWidth(strokeWidth)) {
+    if (detail.hasOwnProperty('strokeWidth') && !is.strokeWidth(strokeWidth)) {
         return false;
     }
-    if (desc.hasOwnProperty('strokeColor') && !is.color(strokeColor)) {
+    if (detail.hasOwnProperty('strokeColor') && !is.color(strokeColor)) {
         return false;
     }
-    if (!box(desc)) {
+    if (!box(detail)) {
         return false;
     }
     return true;
 }
-const check = {
+export const check = {
     attrs,
     textDesc,
     rectDesc,
@@ -112,4 +112,3 @@ const check = {
     svgDesc,
     htmlDesc
 };
-export default check;

package/dist/esm/lib/color.d.ts

@@ -1,3 +1,4 @@
 export declare function toColorHexNum(color: string): number;
 export declare function toColorHexStr(color: number): string;
 export declare function isColorStr(color?: string): boolean;
+export declare function colorNameToHex(name: string): string | null;

package/dist/esm/lib/color.js

@@ -5,5 +5,156 @@ export function toColorHexStr(color) {
     return '#' + color.toString(16);
 }
 export function isColorStr(color) {
-    return typeof color === 'string' && /^\#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(color);
+    return typeof color === 'string' && (/^\#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(color) || /^[a-z]{1,}$/i.test(color));
+}
+const colorNameMap = {
+    aliceblue: '#f0f8ff',
+    antiquewhite: '#faebd7',
+    aqua: '#00ffff',
+    aquamarine: '#7fffd4',
+    azure: '#f0ffff',
+    beige: '#f5f5dc',
+    bisque: '#ffe4c4',
+    black: '#000000',
+    blanchedalmond: '#ffebcd',
+    blue: '#0000ff',
+    blueviolet: '#8a2be2',
+    brown: '#a52a2a',
+    burlywood: '#deb887',
+    cadetblue: '#5f9ea0',
+    chartreuse: '#7fff00',
+    chocolate: '#d2691e',
+    coral: '#ff7f50',
+    cornflowerblue: '#6495ed',
+    cornsilk: '#fff8dc',
+    crimson: '#dc143c',
+    cyan: '#00ffff',
+    darkblue: '#00008b',
+    darkcyan: '#008b8b',
+    darkgoldenrod: '#b8860b',
+    darkgray: '#a9a9a9',
+    darkgreen: '#006400',
+    darkkhaki: '#bdb76b',
+    darkmagenta: '#8b008b',
+    darkolivegreen: '#556b2f',
+    darkorange: '#ff8c00',
+    darkorchid: '#9932cc',
+    darkred: '#8b0000',
+    darksalmon: '#e9967a',
+    darkseagreen: '#8fbc8f',
+    darkslateblue: '#483d8b',
+    darkslategray: '#2f4f4f',
+    darkturquoise: '#00ced1',
+    darkviolet: '#9400d3',
+    deeppink: '#ff1493',
+    deepskyblue: '#00bfff',
+    dimgray: '#696969',
+    dodgerblue: '#1e90ff',
+    firebrick: '#b22222',
+    floralwhite: '#fffaf0',
+    forestgreen: '#228b22',
+    fuchsia: '#ff00ff',
+    gainsboro: '#dcdcdc',
+    ghostwhite: '#f8f8ff',
+    gold: '#ffd700',
+    goldenrod: '#daa520',
+    gray: '#808080',
+    green: '#008000',
+    greenyellow: '#adff2f',
+    honeydew: '#f0fff0',
+    hotpink: '#ff69b4',
+    'indianred ': '#cd5c5c',
+    indigo: '#4b0082',
+    ivory: '#fffff0',
+    khaki: '#f0e68c',
+    lavender: '#e6e6fa',
+    lavenderblush: '#fff0f5',
+    lawngreen: '#7cfc00',
+    lemonchiffon: '#fffacd',
+    lightblue: '#add8e6',
+    lightcoral: '#f08080',
+    lightcyan: '#e0ffff',
+    lightgoldenrodyellow: '#fafad2',
+    lightgrey: '#d3d3d3',
+    lightgreen: '#90ee90',
+    lightpink: '#ffb6c1',
+    lightsalmon: '#ffa07a',
+    lightseagreen: '#20b2aa',
+    lightskyblue: '#87cefa',
+    lightslategray: '#778899',
+    lightsteelblue: '#b0c4de',
+    lightyellow: '#ffffe0',
+    lime: '#00ff00',
+    limegreen: '#32cd32',
+    linen: '#faf0e6',
+    magenta: '#ff00ff',
+    maroon: '#800000',
+    mediumaquamarine: '#66cdaa',
+    mediumblue: '#0000cd',
+    mediumorchid: '#ba55d3',
+    mediumpurple: '#9370d8',
+    mediumseagreen: '#3cb371',
+    mediumslateblue: '#7b68ee',
+    mediumspringgreen: '#00fa9a',
+    mediumturquoise: '#48d1cc',
+    mediumvioletred: '#c71585',
+    midnightblue: '#191970',
+    mintcream: '#f5fffa',
+    mistyrose: '#ffe4e1',
+    moccasin: '#ffe4b5',
+    navajowhite: '#ffdead',
+    navy: '#000080',
+    oldlace: '#fdf5e6',
+    olive: '#808000',
+    olivedrab: '#6b8e23',
+    orange: '#ffa500',
+    orangered: '#ff4500',
+    orchid: '#da70d6',
+    palegoldenrod: '#eee8aa',
+    palegreen: '#98fb98',
+    paleturquoise: '#afeeee',
+    palevioletred: '#d87093',
+    papayawhip: '#ffefd5',
+    peachpuff: '#ffdab9',
+    peru: '#cd853f',
+    pink: '#ffc0cb',
+    plum: '#dda0dd',
+    powderblue: '#b0e0e6',
+    purple: '#800080',
+    rebeccapurple: '#663399',
+    red: '#ff0000',
+    rosybrown: '#bc8f8f',
+    royalblue: '#4169e1',
+    saddlebrown: '#8b4513',
+    salmon: '#fa8072',
+    sandybrown: '#f4a460',
+    seagreen: '#2e8b57',
+    seashell: '#fff5ee',
+    sienna: '#a0522d',
+    silver: '#c0c0c0',
+    skyblue: '#87ceeb',
+    slateblue: '#6a5acd',
+    slategray: '#708090',
+    snow: '#fffafa',
+    springgreen: '#00ff7f',
+    steelblue: '#4682b4',
+    tan: '#d2b48c',
+    teal: '#008080',
+    thistle: '#d8bfd8',
+    tomato: '#ff6347',
+    turquoise: '#40e0d0',
+    violet: '#ee82ee',
+    wheat: '#f5deb3',
+    white: '#ffffff',
+    whitesmoke: '#f5f5f5',
+    yellow: '#ffff00',
+    yellowgreen: '#9acd32'
+};
+export function colorNameToHex(name) {
+    const n = name.toLowerCase();
+    const hex = colorNameMap[n];
+    if (typeof hex === 'string') {
+        return hex;
+    }
+    return null;
 }

package/dist/esm/lib/context2d.d.ts

@@ -0,0 +1,75 @@
+import type { ViewContext2D, ViewContext2DOptions } from '@idraw/types';
+export declare class Context2D implements ViewContext2D {
+    private _ctx;
+    private _devicePixelRatio;
+    constructor(ctx: CanvasRenderingContext2D, opts: ViewContext2DOptions);
+    $undoPixelRatio(num: number): number;
+    $doPixelRatio(num: number): number;
+    $getContext(): CanvasRenderingContext2D;
+    $setFont(opts: {
+        fontSize: number;
+        fontFamily?: string;
+        fontWeight?: 'bold' | number | string;
+    }): void;
+    $resize(opts: {
+        width: number;
+        height: number;
+        devicePixelRatio: number;
+    }): void;
+    get canvas(): HTMLCanvasElement;
+    get fillStyle(): string | CanvasGradient | CanvasPattern;
+    set fillStyle(value: string | CanvasGradient | CanvasPattern);
+    get strokeStyle(): string | CanvasGradient | CanvasPattern;
+    set strokeStyle(color: string | CanvasGradient | CanvasPattern);
+    get lineWidth(): number;
+    set lineWidth(w: number);
+    get textAlign(): CanvasTextAlign;
+    set textAlign(align: CanvasTextAlign);
+    get textBaseline(): CanvasTextBaseline;
+    set textBaseline(baseline: CanvasTextBaseline);
+    get globalAlpha(): number;
+    set globalAlpha(alpha: number);
+    get shadowColor(): string;
+    set shadowColor(color: string);
+    get shadowOffsetX(): number;
+    set shadowOffsetX(offsetX: number);
+    get shadowOffsetY(): number;
+    set shadowOffsetY(offsetY: number);
+    get shadowBlur(): number;
+    set shadowBlur(blur: number);
+    get lineCap(): CanvasLineCap;
+    set lineCap(lineCap: CanvasLineCap);
+    get globalCompositeOperation(): GlobalCompositeOperation;
+    set globalCompositeOperation(operations: GlobalCompositeOperation);
+    fill(...args: [fillRule?: CanvasFillRule | undefined] | [path: Path2D, fillRule?: CanvasFillRule | undefined]): void;
+    arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean | undefined): void;
+    rect(x: number, y: number, w: number, h: number): void;
+    fillRect(x: number, y: number, w: number, h: number): void;
+    clearRect(x: number, y: number, w: number, h: number): void;
+    beginPath(): void;
+    closePath(): void;
+    lineTo(x: number, y: number): void;
+    moveTo(x: number, y: number): void;
+    arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;
+    getLineDash(): number[];
+    setLineDash(nums: number[]): void;
+    stroke(path?: Path2D): void;
+    translate(x: number, y: number): void;
+    rotate(angle: number): void;
+    drawImage(...args: any[]): void;
+    createPattern(image: CanvasImageSource, repetition: string | null): CanvasPattern | null;
+    measureText(text: string): TextMetrics;
+    fillText(text: string, x: number, y: number, maxWidth?: number | undefined): void;
+    strokeText(text: string, x: number, y: number, maxWidth?: number | undefined): void;
+    save(): void;
+    restore(): void;
+    scale(ratioX: number, ratioY: number): void;
+    circle(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean | undefined): void;
+    isPointInPath(x: number, y: number): boolean;
+    clip(...args: [fillRule?: CanvasFillRule | undefined] | [path: Path2D, fillRule?: CanvasFillRule | undefined]): void;
+    setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void;
+    getTransform(): DOMMatrix2DInit;
+    createLinearGradient(x0: number, y0: number, x1: number, y1: number): CanvasGradient;
+    createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient;
+    createConicGradient(startAngle: number, x: number, y: number): CanvasGradient;
+}