toosoon-utils 4.1.4 → 4.1.6

package/lib/extras/curves/CatmullRomCurve.js

@@ -0,0 +1,75 @@
+import { catmullRom } from '../../geometry';
+import Curve from './Curve';
+/**
+ * Utility class for manipulating Catmull-Rom curves
+ *
+ * @exports
+ * @class CatmullRomCurve
+ * @extends Curve
+ */
+export default class CatmullRomCurve extends Curve {
+    type = 'CatmullRomCurve';
+    /**
+     * X-axis coordinate of the start point
+     */
+    x1;
+    /**
+     * Y-axis coordinate of the start point
+     */
+    y1;
+    /**
+     * X-axis coordinate of the first control point
+     */
+    cp1x;
+    /**
+     * Y-axis coordinate of the first control point
+     */
+    cp1y;
+    /**
+     * X-axis coordinate of the second control point
+     */
+    cp2x;
+    /**
+     * Y-axis coordinate of the second control point
+     */
+    cp2y;
+    /**
+     * X-axis coordinate of the end point
+     */
+    x2;
+    /**
+     * Y-axis coordinate of the end point
+     */
+    y2;
+    /**
+     * @param {number} x1   X-axis coordinate of the start point
+     * @param {number} y1   Y-axis coordinate of the start point
+     * @param {number} cp1x X-axis coordinate of the first control point
+     * @param {number} cp1y Y-axis coordinate of the first control point
+     * @param {number} cp2x X-axis coordinate of the second control point
+     * @param {number} cp2y Y-axis coordinate of the second control point
+     * @param {number} x2   X-axis coordinate of the end point
+     * @param {number} y2   Y-axis coordinate of the end point
+     */
+    constructor(x1, y1, cp1x, cp1y, cp2x, cp2y, x2, y2) {
+        super();
+        this.x1 = x1;
+        this.y1 = y1;
+        this.cp1x = cp1x;
+        this.cp1y = cp1y;
+        this.cp2x = cp2x;
+        this.cp2y = cp2y;
+        this.x2 = x2;
+        this.y2 = y2;
+    }
+    /**
+     * Interpolate a point on the Catmull-Rom curve
+     *
+     * @param {number} t Normalized time value to interpolate
+     * @returns {Point} Interpolated coordinates on the curve
+     */
+    getPoint(t) {
+        const point = catmullRom(t, this.x1, this.y1, this.cp1x, this.cp1y, this.cp2x, this.cp2y, this.x2, this.y2);
+        return point;
+    }
+}

package/lib/extras/curves/Curve.d.ts

@@ -7,6 +7,7 @@ import type { Point } from '../../types';
  * @abstract
  */
 export default abstract class Curve {
+    readonly isCurve = true;
     readonly type: string;
     /**
      * Amount of divisions when calculating the cumulative segment lengths of a curve

package/lib/extras/curves/Curve.js

@@ -7,6 +7,7 @@ import { distance, isCoincident } from '../../geometry';
  * @abstract
  */
 export default class Curve {
+    isCurve = true;
     type = 'Curve';
     /**
      * Amount of divisions when calculating the cumulative segment lengths of a curve

package/lib/extras/curves/EllipseCurve.d.ts

@@ -1,7 +1,7 @@
 import type { Point } from '../../types';
 import Curve from './Curve';
 /**
- * Utility class for manipulating Ellipse curves
+ * Utility class for manipulating ellipses
  *
  * @exports
  * @class EllipseCurve
@@ -28,19 +28,19 @@ export default class EllipseCurve extends Curve {
     /**
      * Rotation angle of the ellipse (in radians), counterclockwise from the positive X-axis
      */
-    rotation?: number;
+    rotation: number;
     /**
      * Start angle of the arc (in radians)
      */
-    startAngle?: number;
+    startAngle: number;
     /**
      * End angle of the arc (in radians)
      */
-    endAngle?: number;
+    endAngle: number;
     /**
      * Flag indicating the direction of the arc
      */
-    counterclockwise?: boolean;
+    counterclockwise: boolean;
     /**
      * @param {number} cx X-axis coordinate of the center of the ellipse
      * @param {number} cy Y-axis coordinate of the center of the ellipse

package/lib/extras/curves/EllipseCurve.js

@@ -1,7 +1,8 @@
+import { TWO_PI } from '../../constants';
 import { ellipse } from '../../geometry';
 import Curve from './Curve';
 /**
- * Utility class for manipulating Ellipse curves
+ * Utility class for manipulating ellipses
  *
  * @exports
  * @class EllipseCurve
@@ -57,10 +58,10 @@ export default class EllipseCurve extends Curve {
         this.cy = cy;
         this.rx = rx;
         this.ry = ry;
-        this.rotation = rotation;
-        this.startAngle = startAngle;
-        this.endAngle = endAngle;
-        this.counterclockwise = counterclockwise;
+        this.rotation = rotation ?? 0;
+        this.startAngle = startAngle ?? 0;
+        this.endAngle = endAngle ?? TWO_PI;
+        this.counterclockwise = counterclockwise ?? false;
     }
     /**
      * Interpolate a point on the Ellipse curve

package/lib/extras/curves/PolylineCurve.d.ts

@@ -1,7 +1,7 @@
 import type { Point } from '../../types';
 import Curve from './Curve';
 /**
- * Utility class for manipulating Polyline curves
+ * Utility class for manipulating polylines
  *
  * @exports
  * @class PolylineCurve

package/lib/extras/curves/PolylineCurve.js

@@ -1,7 +1,7 @@
 import { line } from '../../geometry';
 import Curve from './Curve';
 /**
- * Utility class for manipulating Polyline curves
+ * Utility class for manipulating polylines
  *
  * @exports
  * @class PolylineCurve

package/lib/extras/curves/SplineCurve.d.ts

@@ -1,7 +1,7 @@
 import type { Point } from '../../types';
 import Curve from './Curve';
 /**
- * Utility class for manipulating Spline curves
+ * Utility class for manipulating splines
  *
  * @exports
  * @class SplineCurve

package/lib/extras/curves/SplineCurve.js

@@ -1,7 +1,7 @@
 import { catmullRom } from '../../geometry';
 import Curve from './Curve';
 /**
- * Utility class for manipulating Spline curves
+ * Utility class for manipulating splines
  *
  * @exports
  * @class SplineCurve

package/lib/extras/curves/index.d.ts

@@ -3,10 +3,7 @@ export { default as LineCurve } from './LineCurve';
 export { default as PolylineCurve } from './PolylineCurve';
 export { default as QuadraticBezierCurve } from './QuadraticBezierCurve';
 export { default as CubicBezierCurve } from './CubicBezierCurve';
-export { default as CatmulRomCurve } from './CatmulRomCurve';
+export { default as CatmullRomCurve } from './CatmullRomCurve';
 export { default as SplineCurve } from './SplineCurve';
 export { default as EllipseCurve } from './EllipseCurve';
 export { default as ArcCurve } from './ArcCurve';
-export { default as PathCurve } from './PathCurve';
-export { default as Path } from './Path';
-export { default as PathSVG } from './PathSVG';

package/lib/extras/curves/index.js

@@ -3,10 +3,7 @@ export { default as LineCurve } from './LineCurve';
 export { default as PolylineCurve } from './PolylineCurve';
 export { default as QuadraticBezierCurve } from './QuadraticBezierCurve';
 export { default as CubicBezierCurve } from './CubicBezierCurve';
-export { default as CatmulRomCurve } from './CatmulRomCurve';
+export { default as CatmullRomCurve } from './CatmullRomCurve';
 export { default as SplineCurve } from './SplineCurve';
 export { default as EllipseCurve } from './EllipseCurve';
 export { default as ArcCurve } from './ArcCurve';
-export { default as PathCurve } from './PathCurve';
-export { default as Path } from './Path';
-export { default as PathSVG } from './PathSVG';

package/lib/extras/paths/Path.d.ts

@@ -0,0 +1,65 @@
+import type { Point } from '../../types';
+import Curve from '../curves/Curve';
+/**
+ * Utility class for manipulating connected curves
+ *
+ * @exports
+ * @class Path
+ * @extends Curve
+ */
+export default class Path extends Curve {
+    readonly isPath = true;
+    readonly type: string;
+    /**
+     * Array of curves composing the path
+     */
+    curves: Curve[];
+    /**
+     * Array of points composing the path
+     */
+    points: Point[];
+    autoClose: boolean;
+    /**
+     * Add a curve to this curve path
+     *
+     * @param {Curve} curve Curve to add
+     */
+    add(curve: Curve): void;
+    /**
+     * Interpolate a point on the curve path
+     *
+     * @param {number} t Normalized time value to interpolate
+     * @returns {Point|null} Interpolated coordinates on the curve
+     */
+    getPoint(t: number): Point;
+    /**
+     * Compute the curve shape into an array of points
+     *
+     * @param {number} [divisions=40] Number of divisions
+     * @returns {Point[]}
+     */
+    getPoints(divisions?: number): Point[];
+    /**
+     * Compute the curve shape into an array of equi-spaced points across the entire curve path
+     *
+     * @param {number} [divisions=40] Number of divisions
+     * @returns {Point[]}
+     */
+    getSpacedPoints(divisions?: number): Point[];
+    /**
+     * Compute the total arc length of the curve path
+     *
+     * @returns {number}
+     */
+    getLength(): number;
+    /**
+     * Compute the cumulative curve lengths of the curve path
+     *
+     * @returns {number[]}
+     */
+    getCurveLengths(): number[];
+    /**
+     * Update the cached cumulative segment lengths
+     */
+    updateArcLengths(): void;
+}

package/lib/extras/paths/Path.js

@@ -0,0 +1,137 @@
+import { isCoincident } from '../../geometry';
+import Curve from '../curves/Curve';
+/**
+ * Utility class for manipulating connected curves
+ *
+ * @exports
+ * @class Path
+ * @extends Curve
+ */
+export default class Path extends Curve {
+    isPath = true;
+    type = 'Path';
+    /**
+     * Array of curves composing the path
+     */
+    curves = [];
+    /**
+     * Array of points composing the path
+     */
+    points = [];
+    autoClose = false;
+    /**
+     * Add a curve to this curve path
+     *
+     * @param {Curve} curve Curve to add
+     */
+    add(curve) {
+        this.curves.push(curve);
+    }
+    /**
+     * Interpolate a point on the curve path
+     *
+     * @param {number} t Normalized time value to interpolate
+     * @returns {Point|null} Interpolated coordinates on the curve
+     */
+    getPoint(t) {
+        const d = t * this.getLength();
+        const curveLengths = this.getCurveLengths();
+        let i = 0;
+        while (i < curveLengths.length) {
+            if (curveLengths[i] >= d) {
+                const delta = curveLengths[i] - d;
+                const curve = this.curves[i];
+                const segmentLength = curve.getLength();
+                const u = segmentLength === 0 ? 0 : 1 - delta / segmentLength;
+                return curve.getPointAt(u);
+            }
+            i++;
+        }
+        console.warn(`PathCurve.getPoint()`, `No point found in curve.`, this);
+        return [0, 0];
+    }
+    /**
+     * Compute the curve shape into an array of points
+     *
+     * @param {number} [divisions=40] Number of divisions
+     * @returns {Point[]}
+     */
+    getPoints(divisions = 40) {
+        const curves = this.curves;
+        const points = [];
+        let lastPoint = null;
+        for (let i = 0; i < curves.length; i++) {
+            const curve = curves[i];
+            const resolution = curve.type === 'EllipseCurve'
+                ? divisions * 2
+                : curve.type === 'LineCurve'
+                    ? 1
+                    : curve.type === 'SplineCurve'
+                        ? divisions * curve.points.length
+                        : divisions;
+            const points = curve.getPoints(resolution);
+            for (let j = 0; j < points.length; j++) {
+                const point = points[j];
+                if (lastPoint && isCoincident(...lastPoint, ...point))
+                    continue;
+                points.push(point);
+                lastPoint = point;
+            }
+        }
+        if (this.autoClose && !Curve.isClosed(points)) {
+            points.push(points[0]);
+        }
+        return points;
+    }
+    /**
+     * Compute the curve shape into an array of equi-spaced points across the entire curve path
+     *
+     * @param {number} [divisions=40] Number of divisions
+     * @returns {Point[]}
+     */
+    getSpacedPoints(divisions = 40) {
+        const points = [];
+        for (let i = 0; i <= divisions; i++) {
+            points.push(this.getPoint(i / divisions));
+        }
+        if (this.autoClose && !Curve.isClosed(points)) {
+            points.push(points[0]);
+        }
+        return points;
+    }
+    /**
+     * Compute the total arc length of the curve path
+     *
+     * @returns {number}
+     */
+    getLength() {
+        const lengths = this.getCurveLengths();
+        return lengths[lengths.length - 1];
+    }
+    /**
+     * Compute the cumulative curve lengths of the curve path
+     *
+     * @returns {number[]}
+     */
+    getCurveLengths() {
+        if (this._cacheArcLengths.length === this.curves.length) {
+            return this._cacheArcLengths;
+        }
+        const lengths = [];
+        let sums = 0;
+        for (let i = 0, l = this.curves.length; i < l; i++) {
+            sums += this.curves[i].getLength();
+            lengths.push(sums);
+        }
+        this._cacheArcLengths = lengths;
+        return lengths;
+    }
+    /**
+     * Update the cached cumulative segment lengths
+     */
+    updateArcLengths() {
+        this.needsUpdate = true;
+        this._cacheArcLengths = [];
+        this.getCurveLengths();
+    }
+}

package/lib/extras/paths/PathContext.d.ts

@@ -0,0 +1,227 @@
+import type { Point } from '../../types';
+import Path from './Path';
+/**
+ * Utility class for manipulating connected curves providing methods similar to the 2D Canvas API
+ *
+ * @exports
+ * @class PathContext
+ * @extends Path
+ */
+export default class PathContext extends Path implements CanvasRenderingContext2D {
+    /**
+     * Path current offset
+     */
+    currentPosition: Point;
+    /**
+     * Create a path from the given list of points
+     *
+     * @param {Point[]} points Array of points defining the path
+     * @param {Point[]} type   Type of curve used for creating the path
+     * @return {this}
+     */
+    setFromPoints(points: Point[], type?: 'lines' | 'polyline' | 'spline'): this;
+    /**
+     * Begin the path
+     * Reset `currentPosition`
+     */
+    beginPath(): void;
+    /**
+     * Draw a line from the ending position to the beginning position of the path
+     * Add an instance of {@link LineCurve} to the path
+     */
+    closePath(): this;
+    /**
+     * Move {@link Path#currentPosition} to the coordinates specified by `x` and `y`
+     *
+     * @param {number} x X-axis coordinate of the point
+     * @param {number} y Y-axis coordinate of the point
+     * @return {this}
+     */
+    moveTo(x: number, y: number): this;
+    /**
+     * Draw a line from the current position to the position specified by `x` and `y`
+     * Add an instance of {@link LineCurve} to the path
+     *
+     * @param {number} x X-axis coordinate of the point
+     * @param {number} y Y-axis coordinate of the point
+     * @return {this}
+     */
+    lineTo(x: number, y: number): this;
+    /**
+     * Draw a Polyline curve from the current position through the given points
+     * Add an instance of {@link PolylineCurve} to the path
+     *
+     * @param {Point[]} points Array of points defining the curve
+     * @returns {this}
+     */
+    polylineTo(points: Point[]): this;
+    /**
+     * Draw an Arc curve from the current position, tangential to the 2 segments created by both control points
+     * Add an instance of {@link ArcCurve} to the path
+     *
+     * @param {number} x1 X-axis coordinate of the first control point
+     * @param {number} y1 Y-axis coordinate of the first control point
+     * @param {number} x2 X-axis coordinate of the second control point
+     * @param {number} y2 Y-axis coordinate of the second control point
+     * @param {number} radius Arc radius (Must be non-negative)
+     * @returns {this}
+     */
+    arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this;
+    /**
+     * Draw a Quadratic Bézier curve from the current position to the end point specified by `x` and `y`, using the control point specified by `cpx` and `cpy`
+     * Add an instance of {@link QuadraticBezierCurve} to the path
+     *
+     * @param {number} cpx X-axis coordinate of the control point
+     * @param {number} cpy Y-axis coordinate of the control point
+     * @param {number} x2  X-axis coordinate of the end point
+     * @param {number} y2  Y-axis coordinate of the end point
+     * @return {this}
+     */
+    quadraticCurveTo(cpx: number, cpy: number, x2: number, y2: number): this;
+    /**
+     * Draw a Cubic Bézier curve from the current position to the end point specified by `x` and `y`, using the control point specified by (`cp1x`, `cp1y`) and (`cp2x`, `cp2y`)
+     * Add an instance of {@link CubicBezierCurve} to the path
+     *
+     * @param {number} cp1x X-axis coordinate of the first control point
+     * @param {number} cp1y Y-axis coordinate of the first control point
+     * @param {number} cp2x X-axis coordinate of the second control point
+     * @param {number} cp2y Y-axis coordinate of the second control point
+     * @param {number} x2   X-axis coordinate of the end point
+     * @param {number} y2   Y-axis coordinate of the end point
+     * @return {this}
+     */
+    bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x2: number, y2: number): this;
+    /**
+     * Draw a Catmull-Rom curve from the current position to the end point specified by `x` and `y`, using the control points specified by (`cp1x`, `cp1y`) and (`cp2x`, `cp2y`)
+     * Add an instance of {@link CatmullRomCurve} to the path
+     *
+     * @param {number} cp1x X-axis coordinate of the first control point
+     * @param {number} cp1y Y-axis coordinate of the first control point
+     * @param {number} cp2x X-axis coordinate of the second control point
+     * @param {number} cp2y Y-axis coordinate of the second control point
+     * @param {number} x2   X-axis coordinate of the end point
+     * @param {number} y2   Y-axis coordinate of the end point
+     * @return {this}
+     */
+    catmullRomCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x2: number, y2: number): this;
+    /**
+     * Draw a Spline curve from the current position through the given points
+     * Add an instance of {@link SplineCurve} to the path
+     *
+     * @param {Point[]} points Array of points defining the curve
+     * @return {this}
+     */
+    splineTo(points: Point[]): this;
+    /**
+     * Draw an Ellispe curve which is centered at (`cx`, `cy`) position
+     * Add an instance of {@link EllipseCurve} to the path
+     *
+     * @param {number} cx X-axis coordinate of the center of the circle
+     * @param {number} cy Y-axis coordinate of the center of the circle
+     * @param {number} rx X-radius of the ellipse
+     * @param {number} ry Y-radius of the ellipse
+     * @param {number} [rotation] 	Rotation angle of the ellipse (in radians), counterclockwise from the positive X-axis
+     * @param {number} [startAngle] Start angle of the arc (in radians)
+     * @param {number} [endAngle]   End angle of the arc (in radians)
+     * @param {boolean} [counterclockwise] Flag indicating the direction of the arc
+     * @return {this}
+     */
+    ellipse(cx: number, cy: number, rx: number, ry: number, rotation?: number, startAngle?: number, endAngle?: number, counterclockwise?: boolean): this;
+    /**
+     * Draw an Arc curve which is centered at (`cx`, `cy`) position
+     * Add an instance of {@link ArcCurve} to the path
+     *
+     * @param {number} cx X-axis coordinate of the center of the circle
+     * @param {number} cy Y-axis coordinate of the center of the circle
+     * @param {number} radius Radius of the circle
+     * @param {number} [startAngle] Start angle of the arc (in radians)
+     * @param {number} [endAngle]   End angle of the arc (in radians)
+     * @param {boolean} [counterclockwise] Flag indicating the direction of the arc
+     * @return {this}
+     */
+    arc(cx: number, cy: number, radius: number, startAngle?: number, endAngle?: number, counterclockwise?: boolean): this;
+    /**
+     * Draw a rectangular path from the start position specified by `x` and `y` to the end position using `width` and `height`
+     * Add an instance of {@link PolylineCurve} to the path
+     *
+     * @param {number} x 		  X-axis coordinate of the rectangle starting point
+     * @param {number} y      Y-axis coordinate of the rectangle starting point
+     * @param {number} width	Rectangle width (Positive values are to the right and negative to the left)
+     * @param {number} height Rectangle height (Positive values are down, and negative are up)
+     * @return {this}
+     */
+    rect(x: number, y: number, width: number, height: number): this;
+    /**
+     * Draw a rounded rectangular path from the start position specified by `x` and `y` to the end position using `width` and `height`
+     *
+     * @param {number} x 		  X-axis coordinate of the rectangle starting point
+     * @param {number} y      Y-axis coordinate of the rectangle starting point
+     * @param {number} width	Rectangle width (Positive values are to the right and negative to the left)
+     * @param {number} height Rectangle height (Positive values are down, and negative are up)
+     * @param {number|number[]} radius Radius of the circular arc to be used for the corners of the rectangle
+     * @return {this}
+     */
+    roundRect(x: number, y: number, width: number, height: number, radius: number | number[]): this;
+    protected _setCurrentPosition(x: number, y: number): void;
+    canvas: CanvasRenderingContext2D['canvas'];
+    fillStyle: CanvasRenderingContext2D['fillStyle'];
+    strokeStyle: CanvasRenderingContext2D['strokeStyle'];
+    lineWidth: CanvasRenderingContext2D['lineWidth'];
+    lineCap: CanvasRenderingContext2D['lineCap'];
+    lineJoin: CanvasRenderingContext2D['lineJoin'];
+    lineDashOffset: CanvasRenderingContext2D['lineDashOffset'];
+    fillText: CanvasRenderingContext2D['fillText'];
+    strokeText: CanvasRenderingContext2D['strokeText'];
+    fill: CanvasRenderingContext2D['fill'];
+    stroke: CanvasRenderingContext2D['stroke'];
+    clearRect: CanvasRenderingContext2D['clearRect'];
+    fillRect: CanvasRenderingContext2D['fillRect'];
+    strokeRect: CanvasRenderingContext2D['strokeRect'];
+    drawImage: CanvasRenderingContext2D['drawImage'];
+    clip: CanvasRenderingContext2D['clip'];
+    createLinearGradient: CanvasRenderingContext2D['createLinearGradient'];
+    createRadialGradient: CanvasRenderingContext2D['createRadialGradient'];
+    createConicGradient: CanvasRenderingContext2D['createConicGradient'];
+    createPattern: CanvasRenderingContext2D['createPattern'];
+    createImageData: CanvasRenderingContext2D['createImageData'];
+    getImageData: CanvasRenderingContext2D['getImageData'];
+    putImageData: CanvasRenderingContext2D['putImageData'];
+    imageSmoothingEnabled: CanvasRenderingContext2D['imageSmoothingEnabled'];
+    imageSmoothingQuality: CanvasRenderingContext2D['imageSmoothingQuality'];
+    font: CanvasRenderingContext2D['font'];
+    fontKerning: CanvasRenderingContext2D['fontKerning'];
+    fontStretch: CanvasRenderingContext2D['fontStretch'];
+    fontVariantCaps: CanvasRenderingContext2D['fontVariantCaps'];
+    letterSpacing: CanvasRenderingContext2D['letterSpacing'];
+    textAlign: CanvasRenderingContext2D['textAlign'];
+    textBaseline: CanvasRenderingContext2D['textBaseline'];
+    textRendering: CanvasRenderingContext2D['textRendering'];
+    wordSpacing: CanvasRenderingContext2D['wordSpacing'];
+    direction: CanvasRenderingContext2D['direction'];
+    measureText: CanvasRenderingContext2D['measureText'];
+    filter: CanvasRenderingContext2D['filter'];
+    globalAlpha: CanvasRenderingContext2D['globalAlpha'];
+    globalCompositeOperation: CanvasRenderingContext2D['globalCompositeOperation'];
+    miterLimit: CanvasRenderingContext2D['miterLimit'];
+    save: CanvasRenderingContext2D['save'];
+    restore: CanvasRenderingContext2D['restore'];
+    reset: CanvasRenderingContext2D['reset'];
+    transform: CanvasRenderingContext2D['transform'];
+    translate: CanvasRenderingContext2D['translate'];
+    rotate: CanvasRenderingContext2D['rotate'];
+    scale: CanvasRenderingContext2D['scale'];
+    getTransform: CanvasRenderingContext2D['getTransform'];
+    setTransform: CanvasRenderingContext2D['setTransform'];
+    resetTransform: CanvasRenderingContext2D['resetTransform'];
+    getLineDash: CanvasRenderingContext2D['getLineDash'];
+    setLineDash: CanvasRenderingContext2D['setLineDash'];
+    shadowBlur: CanvasRenderingContext2D['shadowBlur'];
+    shadowColor: CanvasRenderingContext2D['shadowColor'];
+    shadowOffsetX: CanvasRenderingContext2D['shadowOffsetX'];
+    shadowOffsetY: CanvasRenderingContext2D['shadowOffsetY'];
+    drawFocusIfNeeded: CanvasRenderingContext2D['drawFocusIfNeeded'];
+    isPointInPath: CanvasRenderingContext2D['isPointInPath'];
+    isPointInStroke: CanvasRenderingContext2D['isPointInStroke'];
+    getContextAttributes: CanvasRenderingContext2D['getContextAttributes'];
+    isContextLost: () => false;
+}