@types/fabric/fabric-impl.d.ts

// This module does not really exist.
// This is just to get `export as namespace fabric;` to work and to be re-exportable from `index.d.ts`.

export as namespace fabric;

export const isLikelyNode: boolean;
export const isTouchSupported: boolean;
export const version: string;
export const iMatrix: number[];
export let textureSize: number;
export let copiedText: string;
export let copiedTextStyle: any[];
export let charWidthsCache: {
    [key: string]: { // example: montserrat
        [key: string]: { // example: normal_normal
            [key: string]: number; // example: A: 286
        }
    }
};

/////////////////////////////////////////////////////////////
// fabric Functions
/////////////////////////////////////////////////////////////

export function createCanvasForNode(width: number, height: number): Canvas;

// Parse
// ----------------------------------------------------------
/**
 * Creates markup containing SVG referenced elements like patterns, gradients etc.
 * @param canvas instance of fabric.Canvas
 */
export function createSVGRefElementsMarkup(canvas: StaticCanvas): string;
/**
 * Creates markup containing SVG font faces
 * @param objects Array of fabric objects
 */
export function createSVGFontFacesMarkup(objects: Object[]): string;
/**
 * Takes string corresponding to an SVG document, and parses it into a set of fabric objects
 * @param [reviver] Method for further parsing of SVG elements, called after each fabric object created.
 */
export function loadSVGFromString(
    string: string,
    callback: (results: Object[], options: any) => void,
    reviver?: Function,
): void;
/**
 * Takes url corresponding to an SVG document, and parses it into a set of fabric objects.
 * Note that SVG is fetched via XMLHttpRequest, so it needs to conform to SOP (Same Origin Policy)
 * @param {String} url URL to get a SVG from
 * @param {Function} callback Callback is invoked when svg has been loaded
 * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created.
 * @param {Object} [options] options for crossOrigin
 * @param {String} [options.crossOrigin] crossOrigin settings
 *
 */
export function loadSVGFromURL(
    url: string,
    callback: (results: Object[], options: any) => void,
    reviver?: Function,
    options?: { crossOrigin?: string | undefined },
): void;
/**
 * Returns CSS rules for a given SVG document
 * @param doc SVG document to parse
 */
export function getCSSRules(doc: SVGElement): any;

export function parseElements(elements: any[], callback: Function, options: any, reviver?: Function): void;
/**
 * Parses "points" attribute, returning an array of values
 * @param points points attribute string
 */
export function parsePointsAttribute(points: string): any[];
/**
 * Parses "style" attribute, retuning an object with values
 * @param element Element to parse
 */
export function parseStyleAttribute(element: SVGElement): any;
/**
 * Transforms an array of svg elements to corresponding fabric.* instances
 * @param elements Array of elements to parse
 * @param callback Being passed an array of fabric instances (transformed from SVG elements)
 * @param [options] Options object
 * @param [reviver] Method for further parsing of SVG elements, called after each fabric object created.
 */
export function parseElements(elements: SVGElement[], callback: Function, options?: any, reviver?: Function): void;
/**
 * Returns an object of attributes' name/value, given element and an array of attribute names;
 * Parses parent "g" nodes recursively upwards.
 * @param element Element to parse
 * @param attributes Array of attributes to parse
 */
export function parseAttributes(element: HTMLElement, attributes: string[], svgUid?: string): { [key: string]: string };
/**
 * Parses an SVG document, returning all of the gradient declarations found in it
 * @param doc SVG document to parse
 */
export function getGradientDefs(doc: SVGElement): { [key: string]: any };
/**
 * Parses a short font declaration, building adding its properties to a style object
 * @param value font declaration
 * @param oStyle definition
 */
export function parseFontDeclaration(value: string, oStyle: any): void;
/**
 * Parses an SVG document, converts it to an array of corresponding fabric.* instances and passes them to a callback
 * @param doc SVG document to parse
 * @param callback Callback to call when parsing is finished; It's being passed an array of elements (parsed from a document).
 * @param [reviver] Method for further parsing of SVG elements, called after each fabric object created.
 */
export function parseSVGDocument(
    doc: SVGElement,
    callback: (results: Object[], options: any) => void,
    reviver?: Function,
): void;
/**
 * Parses "transform" attribute, returning an array of values
 * @param attributeValue String containing attribute value
 */
export function parseTransformAttribute(attributeValue: string): number[];

// fabric Log
// ---------------
/**
 * Wrapper around `console.log` (when available)
 */
export function log(...values: any[]): void;
/**
 * Wrapper around `console.warn` (when available)
 */
export function warn(...values: any[]): void;

///////////////////////////////////////////////////////////////////////////////
// Data Object Interfaces - These interface are not specific part of fabric,
// They are just helpful for for defining function parameters
//////////////////////////////////////////////////////////////////////////////
interface IDataURLOptions {
    /**
     * The format of the output image. Either "jpeg" or "png"
     */
    format?: string | undefined;
    /**
     * Quality level (0..1). Only used for jpeg
     */
    quality?: number | undefined;
    /**
     * Multiplier to scale by
     */
    multiplier?: number | undefined;
    /**
     * Cropping left offset. Introduced in v1.2.14
     */
    left?: number | undefined;
    /**
     * Cropping top offset. Introduced in v1.2.14
     */
    top?: number | undefined;
    /**
     * Cropping width. Introduced in v1.2.14
     */
    width?: number | undefined;
    /**
     * Cropping height. Introduced in v1.2.14
     */
    height?: number | undefined;
    enableRetinaScaling?: boolean | undefined;
    withoutTransform?: boolean | undefined;
    withoutShadow?: boolean | undefined;
}

interface IEvent<E extends Event = Event> {
    e: E;
    target?: Object | undefined;
    subTargets?: Object[] | undefined;
    button?: number | undefined;
    isClick?: boolean | undefined;
    pointer?: Point | undefined;
    absolutePointer?: Point | undefined;
    transform?: { corner: string; original: Object; originX: string; originY: string; width: number } | undefined;
}

interface IFillOptions {
    /**
     * options.source Pattern source
     */
    source: string | HTMLImageElement;
    /**
     * Repeat property of a pattern (one of repeat, repeat-x, repeat-y or no-repeat)
     */
    repeat?: string | undefined;
    /**
     * Pattern horizontal offset from object's left/top corner
     */
    offsetX?: number | undefined;
    /**
     * Pattern vertical offset from object's left/top corner
     */
    offsetY?: number | undefined;
}

interface IToSVGOptions {
    /**
     * If true xml tag is not included
     */
    suppressPreamble?: boolean | undefined;
    /**
     * SVG viewbox object
     */
    viewBox?: IViewBox | undefined;
    /**
     * Encoding of SVG output
     */
    encoding?: string | undefined;
    /**
     * desired width of svg with or without units
     */
    width?: number | string | undefined;
    /**
     * desired height of svg with or without units
     */
    height?: number | string | undefined;
}

interface IViewBox {
    /**
     * x-cooridnate of viewbox
     */
    x: number;
    /**
     * y-coordinate of viewbox
     */
    y: number;
    /**
     * Width of viewbox
     */
    width: number;
    /**
     * Height of viewbox
     */
    height: number;
}

///////////////////////////////////////////////////////////////////////////////
// Mixins Interfaces
//////////////////////////////////////////////////////////////////////////////
interface ICollection<T> {
    _objects: Object[];

    /**
     * Adds objects to collection, then renders canvas (if `renderOnAddRemove` is not `false`)
     * Objects should be instances of (or inherit from) fabric.Object
     * @param object Zero or more fabric instances
     */
    add(...object: Object[]): T;

    /**
     * Inserts an object into collection at specified index, then renders canvas (if `renderOnAddRemove` is not `false`)
     * An object should be an instance of (or inherit from) fabric.Object
     * @param object Object to insert
     * @param index Index to insert object at
     * @param nonSplicing When `true`, no splicing (shifting) of objects occurs
     * @return thisArg
     * @chainable
     */
    insertAt(object: Object, index: number, nonSplicing: boolean): T;

    /**
     * Removes objects from a collection, then renders canvas (if `renderOnAddRemove` is not `false`)
     * @param object Zero or more fabric instances
     * @return thisArg
     * @chainable
     */
    remove(...object: Object[]): T;

    /**
     * Executes given function for each object in this group
     * @param context Context (aka thisObject)
     * @return thisArg
     */
    forEachObject(callback: (element: Object, index: number, array: Object[]) => void, context?: any): T;

    /**
     * Returns an array of children objects of this instance
     * Type parameter introduced in 1.3.10
     * @param [type] When specified, only objects of this type are returned
     */
    getObjects(type?: string): Object[];

    /**
     * Returns object at specified index
     * @return thisArg
     */
    item(index: number): T;

    /**
     * Returns true if collection contains no objects
     * @return true if collection is empty
     */
    isEmpty(): boolean;

    /**
     * Returns a size of a collection (i.e: length of an array containing its objects)
     * @return Collection size
     */
    size(): number;

    /**
     * Returns true if collection contains an object
     * @param object Object to check against
     * @return `true` if collection contains an object
     */
    contains(object: Object): boolean;

    /**
     * Returns number representation of a collection complexity
     * @return complexity
     */
    complexity(): number;
}

interface IObservable<T> {
    /**
     * Observes specified event
     * @param eventName Event name (eg. 'after:render')
     * @param handler Function that receives a notification when an event of the specified type occurs
     */
    on(
        eventName:
            | 'mouse:up'
            | 'mouse:down'
            | 'mouse:move'
            | 'mouse:up:before'
            | 'mouse:down:before'
            | 'mouse:move:before'
            | 'mouse:dblclick'
            | 'mouse:over'
            | 'mouse:out',
        handler: (e: IEvent<MouseEvent>) => void,
    ): T;
    on(eventName: 'mouse:wheel', handler: (e: IEvent<WheelEvent>) => void): T;
    on(eventName: string, handler: (e: IEvent) => void): T;

    /**
     * Stops event observing for a particular event handler. Calling this method
     * without arguments removes all handlers for all events
     * @param eventName Event name (eg. 'after:render') or object with key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler})
     * @param handler Function to be deleted from EventListeners
     */
    off(eventName?: string | any, handler?: (e: IEvent) => void): T;

    /**
     * Fires event with an optional options object
     * @memberOf fabric.Observable
     * @param {String} eventName Event name to fire
     * @param {Object} [options] Options object
     * @return {Self} thisArg
     * @chainable
     */
    fire(eventName: string, options?: any): T;
}

interface Callbacks {
    /** Invoked on completion */
    onComplete?: Function | undefined;
    /** Invoked on every step of animation */
    onChange?: Function | undefined;
}

// animation mixin
// ----------------------------------------------------
interface ICanvasAnimation<T> {
    FX_DURATION: number;
    /**
     * Centers object horizontally with animation.
     * @param object Object to center
     */
    fxCenterObjectH(object: Object, callbacks?: Callbacks): T;

    /**
     * Centers object vertically with animation.
     * @param object Object to center
     */
    fxCenterObjectV(object: Object, callbacks?: Callbacks): T;

    /**
     * Same as `fabric.Canvas#remove` but animated
     * @param object Object to remove
     * @chainable
     */
    fxRemove(object: Object): T;

    /**
     * Same as {@link fabric.Canvas.prototype.straightenObject}, but animated
     * @param {fabric.Object} object Object to straighten
     * @return {fabric.Canvas} thisArg
     * @chainable
     */
    fxStraightenObject(object: Object): T;
}
interface IObjectAnimation<T> {
    /**
     * Animates object's properties
     * object.animate('left', ..., {duration: ...});
     * @param property Property to animate
     * @param value Value to animate property
     * @param options The animation options
     */
    animate(property: string, value: number | string, options?: IAnimationOptions): Object;
    /**
     * Animates object's properties
     * object.animate({ left: ..., top: ... }, { duration: ... });
     * @param properties Properties to animate with values to animate to
     * @param options The animation options
     */
    animate(properties: { [key: string]: number | string }, options?: IAnimationOptions): Object;
}
interface IAnimationOptions {
    /**
     * Allows to specify starting value of animatable property (if we don't want current value to be used).
     */
    from?: string | number | undefined;
    /**
     * Defaults to 500 (ms). Can be used to change duration of an animation.
     */
    duration?: number | undefined;
    /**
     * Callback; invoked on every value change
     */
    onChange?: Function | undefined;
    /**
     * Callback; invoked when value change is completed
     */
    onComplete?: Function | undefined;

    /**
     * Easing function. Default: fabric.util.ease.easeInSine
     */
    easing?: Function | undefined;
    /**
     *  Value to modify the property by, default: end - start
     */
    by?: number | undefined;
}

///////////////////////////////////////////////////////////////////////////////
// General Fabric Interfaces
//////////////////////////////////////////////////////////////////////////////
export class Color {
    /**
     * Color class
     * The purpose of Color is to abstract and encapsulate common color operations;
     * @param color optional in hex or rgb(a) format
     */
    constructor(color?: string);

    /**
     * Returns source of this color (where source is an array representation; ex: [200, 200, 100, 1])
     */
    getSource(): number[];

    /**
     * Sets source of this color (where source is an array representation; ex: [200, 200, 100, 1])
     */
    setSource(source: number[]): void;

    /**
     * Returns color represenation in RGB format ex: rgb(0-255,0-255,0-255)
     */
    toRgb(): string;

    /**
     * Returns color represenation in RGBA format ex: rgba(0-255,0-255,0-255,0-1)
     */
    toRgba(): string;

    /**
     * Returns color represenation in HSL format ex: hsl(0-360,0%-100%,0%-100%)
     */
    toHsl(): string;

    /**
     * Returns color represenation in HSLA format ex: hsla(0-360,0%-100%,0%-100%,0-1)
     */
    toHsla(): string;

    /**
     * Returns color represenation in HEX format ex: FF5555
     */
    toHex(): string;

    /**
     * Returns color representation in HEXA format
     * @return {String} ex: FF5555CC
     */
    toHexa(): string;

    /**
     * Gets value of alpha channel for this color
     */
    getAlpha(): number;

    /**
     * Sets value of alpha channel for this color
     * @param alpha Alpha value 0-1
     */
    setAlpha(alpha: number): void;

    /**
     * Transforms color to its grayscale representation
     */
    toGrayscale(): Color;

    /**
     * Transforms color to its black and white representation
     */
    toBlackWhite(threshold: number): Color;
    /**
     * Overlays color with another color
     */
    overlayWith(otherColor: string | Color): Color;

    /**
     * Returns new color object, when given a color in RGB format
     * @param color Color value ex: rgb(0-255,0-255,0-255)
     */
    static fromRgb(color: string): Color;
    /**
     * Returns new color object, when given a color in RGBA format
     * @param color Color value ex: rgb(0-255,0-255,0-255)
     */
    static fromRgba(color: string): Color;
    /**
     * Returns array represenatation (ex: [100, 100, 200, 1]) of a color that's in RGB or RGBA format
     * @param color Color value ex: rgb(0-255,0-255,0-255), rgb(0%-100%,0%-100%,0%-100%)
     */
    static sourceFromRgb(color: string): number[];
    /**
     * Returns new color object, when given a color in HSL format
     * @param color Color value ex: hsl(0-260,0%-100%,0%-100%)
     */
    static fromHsl(color: string): Color;
    /**
     * Returns new color object, when given a color in HSLA format
     * @param color Color value ex: hsl(0-260,0%-100%,0%-100%)
     */
    static fromHsla(color: string): Color;
    /**
     * Returns array represenatation (ex: [100, 100, 200, 1]) of a color that's in HSL or HSLA format.
     * @param color Color value ex: hsl(0-360,0%-100%,0%-100%) or hsla(0-360,0%-100%,0%-100%, 0-1)
     */
    static sourceFromHsl(color: string): number[];
    /**
     * Returns new color object, when given a color in HEX format
     * @param color Color value ex: FF5555
     */
    static fromHex(color: string): Color;

    /**
     * Returns array represenatation (ex: [100, 100, 200, 1]) of a color that's in HEX format
     * @param color ex: FF5555
     */
    static sourceFromHex(color: string): number[];
    /**
     * Returns new color object, when given color in array representation (ex: [200, 100, 100, 0.5])
     */
    static fromSource(source: number[]): Color;
    /**
     * Regex matching color in HEX format (ex: #FF5544CC, #FF5555, 010155, aff)
     * @static
     * @field
     * @memberOf fabric.Color
     */
    static reHex: RegExp;
    /**
     * Regex matching color in HSL or HSLA formats (ex: hsl(200, 80%, 10%), hsla(300, 50%, 80%, 0.5), hsla( 300 , 50% , 80% , 0.5 ))
     * @static
     * @field
     * @memberOf fabric.Color
     */
    static reHSLa: RegExp;
    /**
     * Regex matching color in RGB or RGBA formats (ex: rgb(0, 0, 0), rgba(255, 100, 10, 0.5), rgba( 255 , 100 , 10 , 0.5 ), rgb(1,1,1), rgba(100%, 60%, 10%, 0.5))
     * @static
     * @field
     * @memberOf fabric.Color
     */
    static reRGBa: RegExp;
}

interface IGradientOptionsCoords {
    x1?: number | undefined;
    y1?: number | undefined;
    x2?: number | undefined;
    y2?: number | undefined;
    r1?: number | undefined;
    r2?: number | undefined;
}

type IGradientOptionsColorStops = Array<{
    offset: number;
    color: string;
}>;

interface IGradientOptions {
    /**
     * Horizontal offset for aligning gradients coming from SVG when outside pathgroups
     * @type Number
     */
    offsetX?: number | undefined;
    /**
     * Vertical offset for aligning gradients coming from SVG when outside pathgroups
     * @type Number
     */
    offsetY?: number | undefined;
    type?: string | undefined;
    coords?: IGradientOptionsCoords | undefined;
    /**
     * Color stops object eg. {0:string; 1:string;
     */
    colorStops?: IGradientOptionsColorStops | undefined;
    gradientTransform?: any;
}

interface OGradientOptions {
    type?: string | undefined;
    x1?: number | undefined;
    y1?: number | undefined;
    x2?: number | undefined;
    y2?: number | undefined;
    r1?: number | undefined;
    r2?: number | undefined;
    colorStops?: {
        [key: string]: string;
    } | undefined;
    gradientTransform?: any;
}

export interface Gradient extends IGradientOptions {}
export class Gradient {
    /**
     * Constructor
     * @param {Object} options Options object with type, coords, gradientUnits and colorStops
     * @param {Object} [options.type] gradient type linear or radial
     * @param {Object} [options.gradientUnits] gradient units
     * @param {Object} [options.offsetX] SVG import compatibility
     * @param {Object} [options.offsetY] SVG import compatibility
     * @param {Object[]} options.colorStops contains the colorstops.
     * @param {Object} options.coords contains the coords of the gradient
     * @param {Number} [options.coords.x1] X coordiante of the first point for linear or of the focal point for radial
     * @param {Number} [options.coords.y1] Y coordiante of the first point for linear or of the focal point for radial
     * @param {Number} [options.coords.x2] X coordiante of the second point for linear or of the center point for radial
     * @param {Number} [options.coords.y2] Y coordiante of the second point for linear or of the center point for radial
     * @param {Number} [options.coords.r1] only for radial gradient, radius of the inner circle
     * @param {Number} [options.coords.r2] only for radial gradient, radius of the external circle
     * @return {fabric.Gradient} thisArg
     */
    constructor(options: {
        type?: string | undefined;
        gradientUnits?: any;
        offsetX?: any;
        offsetY?: any;
        colorStops?: IGradientOptionsColorStops | undefined;
        coords?: IGradientOptionsCoords | undefined;
    });
    /**
     * Adds another colorStop
     * @param colorStop Object with offset and color
     */
    addColorStop(colorStop: any): Gradient;
    /**
     * Returns object representation of a gradient
     */
    toObject(propertiesToInclude?: any): any;
    /**
     * Returns SVG representation of an gradient
     * @param {Object} object Object to create a gradient for
     * @return {String} SVG representation of an gradient (linear/radial)
     */
    toSVG(object: any): string;
    /**
     * Returns an instance of CanvasGradient
     * @param ctx Context to render on
     */
    toLive(ctx: CanvasRenderingContext2D): CanvasGradient;
    /**
     * Returns {@link fabric.Gradient} instance from an SVG element
     * @static
     * @memberOf fabric.Gradient
     * @param {SVGGradientElement} el SVG gradient element
     * @param {fabric.Object} instance
     * @return {fabric.Gradient} Gradient instance
     * @see http://www.w3.org/TR/SVG/pservers.html#LinearGradientElement
     * @see http://www.w3.org/TR/SVG/pservers.html#RadialGradientElement
     */
    static fromElement(el: SVGGradientElement, instance: Object): Gradient;
}
export class Intersection {
    constructor(status?: string);
    /**
     * Appends a point to intersection
     */
    appendPoint(point: Point): Intersection;
    /**
     * Appends points to intersection
     */
    appendPoints(points: Point[]): Intersection;
    /**
     * Checks if one line intersects another
     */
    static intersectLineLine(a1: Point, a2: Point, b1: Point, b2: Point): Intersection;
    /**
     * Checks if line intersects polygon
     */
    static intersectLinePolygon(a1: Point, a2: Point, points: Point[]): Intersection;
    /**
     * Checks if polygon intersects another polygon
     */
    static intersectPolygonPolygon(points1: Point[], points2: Point[]): Intersection;
    /**
     * Checks if polygon intersects rectangle
     */
    static intersectPolygonRectangle(points: Point[], r1: number, r2: number): Intersection;
}

interface IPatternOptions {
    /**
     * Repeat property of a pattern (one of repeat, repeat-x, repeat-y or no-repeat)
     */
    repeat?: string | undefined;

    /**
     * Pattern horizontal offset from object's left/top corner
     */
    offsetX?: number | undefined;

    /**
     * Pattern vertical offset from object's left/top corner
     */
    offsetY?: number | undefined;
    /**
     * crossOrigin value (one of "", "anonymous", "use-credentials")
     * @see https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes
     * @type String
     */
    crossOrigin?: '' | 'anonymous' | 'use-credentials' | undefined;
    /**
     * Transform matrix to change the pattern, imported from svgs
     */
    patternTransform?: number[] | undefined;
    /**
     * The source for the pattern
     */
    source: string | HTMLImageElement;
}
export interface Pattern extends IPatternOptions {}
export class Pattern {
    /**
     * Unique identifier
     */
    id: number;

    constructor(options?: IPatternOptions);
    /**
     * Returns object representation of a pattern
     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
     * @return {Object} Object representation of a pattern instance
     */
    toObject(propertiesToInclude: any): any;
    /**
     * Returns SVG representation of a pattern
     * @param {fabric.Object} object
     * @return {String} SVG representation of a pattern
     */
    toSVG(object: Object): string;
    setOptions(options: IPatternOptions): void;
    /**
     * Returns an instance of CanvasPattern
     * @param {CanvasRenderingContext2D} ctx Context to create pattern
     * @return {CanvasPattern}
     */
    toLive(ctx: CanvasRenderingContext2D): CanvasPattern;
}
interface IPoint {
    x: number;
    y: number;
}
export class Point implements IPoint {
    x: number;
    y: number;
    type: string;
    constructor(x: number, y: number);
    /**
     * Adds another point to this one and returns another one
     * @param {fabric.Point} that
     * @return {fabric.Point} new Point instance with added values
     */
    add(that: IPoint): Point;
    /**
     * Adds another point to this one
     * @param {fabric.Point} that
     * @return {fabric.Point} thisArg
     * @chainable
     */
    addEquals(that: IPoint): Point;
    /**
     * Adds value to this point and returns a new one
     * @param {Number} scalar
     * @return {fabric.Point} new Point with added value
     */
    scalarAdd(scalar: number): Point;
    /**
     * Adds value to this point
     * @param {Number} scalar
     * @return {fabric.Point} thisArg
     * @chainable
     */
    scalarAddEquals(scalar: number): Point;
    /**
     * Subtracts another point from this point and returns a new one
     * @param {fabric.Point} that
     * @return {fabric.Point} new Point object with subtracted values
     */
    subtract(that: IPoint): Point;
    /**
     * Subtracts another point from this point
     * @param {fabric.Point} that
     * @return {fabric.Point} thisArg
     * @chainable
     */
    subtractEquals(that: IPoint): Point;
    /**
     * Subtracts value from this point and returns a new one
     * @param {Number} scalar
     * @return {fabric.Point}
     */
    scalarSubtract(scalar: number): Point;
    /**
     * Subtracts value from this point
     * @param {Number} scalar
     * @return {fabric.Point} thisArg
     * @chainable
     */
    scalarSubtractEquals(scalar: number): Point;
    /**
     * Multiplies this point by a value and returns a new one
     * @param {Number} scalar
     * @return {fabric.Point}
     */
    multiply(scalar: number): Point;
    /**
     * Multiplies this point by a value
     * @param {Number} scalar
     * @return {fabric.Point} thisArg
     * @chainable
     */
    multiplyEquals(scalar: number): Point;
    /**
     * Divides this point by a value and returns a new one
     * @param {Number} scalar
     * @return {fabric.Point}
     */
    divide(scalar: number): Point;
    /**
     * Divides this point by a value
     * @param {Number} scalar
     * @return {fabric.Point} thisArg
     * @chainable
     */
    divideEquals(scalar: number): Point;
    /**
     * Returns true if this point is equal to another one
     * @param {fabric.Point} that
     * @return {Boolean}
     */
    eq(that: IPoint): Point;
    /**
     * Returns true if this point is less than another one
     * @param {fabric.Point} that
     * @return {Boolean}
     */
    lt(that: IPoint): Point;
    /**
     * Returns true if this point is less than or equal to another one
     * @param {fabric.Point} that
     * @return {Boolean}
     */
    lte(that: IPoint): Point;
    /**
     * Returns true if this point is greater another one
     * @param {fabric.Point} that
     * @return {Boolean}
     */
    gt(that: IPoint): Point;
    /**
     * Returns true if this point is greater than or equal to another one
     * @param {fabric.Point} that
     * @return {Boolean}
     */
    gte(that: IPoint): Point;
    /**
     * Returns new point which is the result of linear interpolation with this one and another one
     * @param {fabric.Point} that
     * @param {Number} t , position of interpolation, between 0 and 1 default 0.5
     * @return {fabric.Point}
     */
    lerp(that: IPoint, t: number): Point;
    /**
     * Returns distance from this point and another one
     * @param {fabric.Point} that
     * @return {Number}
     */
    distanceFrom(that: IPoint): number;
    /**
     * Returns the point between this point and another one
     * @param {fabric.Point} that
     * @return {fabric.Point}
     */
    midPointFrom(that: IPoint): Point;
    /**
     * Returns a new point which is the min of this and another one
     * @param {fabric.Point} that
     * @return {fabric.Point}
     */
    min(that: IPoint): Point;
    /**
     * Returns a new point which is the max of this and another one
     * @param {fabric.Point} that
     * @return {fabric.Point}
     */
    max(that: IPoint): Point;
    /**
     * Returns string representation of this point
     * @return {String}
     */
    toString(): string;
    /**
     * Sets x/y of this point
     * @param {Number} x
     * @param {Number} y
     * @chainable
     */
    setXY(x: number, y: number): Point;
    /**
     * Sets x of this point
     * @param {Number} x
     * @chainable
     */
    setX(x: number): Point;
    /**
     * Sets y of this point
     * @param {Number} y
     * @chainable
     */
    setY(y: number): Point;
    /**
     * Sets x/y of this point from another point
     * @param {fabric.Point} that
     * @chainable
     */
    setFromPoint(that: IPoint): Point;
    /**
     * Swaps x/y of this point and another point
     * @param {fabric.Point} that
     */
    swap(that: IPoint): Point;
    /**
     * return a cloned instance of the point
     * @return {fabric.Point}
     */
    clone(): Point;
}
interface IShadowOptions {
    /**
     * Shadow color
     */
    color?: string | undefined;
    /**
     * Shadow blur
     */
    blur?: number | undefined;
    /**
     * Shadow horizontal offset
     */
    offsetX?: number | undefined;
    /**
     * Shadow vertical offset
     */
    offsetY?: number | undefined;
    /**
     * Whether the shadow should affect stroke operations
     */
    affectStroke?: boolean | undefined;
    /**
     * Indicates whether toObject should include default values
     */
    includeDefaultValues?: boolean | undefined;
    /**
     * When `false`, the shadow will scale with the object.
     * When `true`, the shadow's offsetX, offsetY, and blur will not be affected by the object's scale.
     * default to false
     * @type Boolean
     * @default
     */
    nonScaling?: boolean | undefined;
}
export interface Shadow extends IShadowOptions {}
export class Shadow {
    constructor(options?: IShadowOptions | string);
    initialize(options?: IShadowOptions | string): Shadow;
    /**
     * Returns a string representation of an instance
     * @see http://www.w3.org/TR/css-text-decor-3/#text-shadow
     * @return {String} Returns CSS3 text-shadow declaration
     */
    toString(): string;
    /**
     * Returns SVG representation of a shadow
     * @param {fabric.Object} object
     * @return {String} SVG representation of a shadow
     */
    toSVG(object: Object): string;
    /**
     * Returns object representation of a shadow
     * @return {Object} Object representation of a shadow instance
     */
    toObject(): any;
    /**
     * Regex matching shadow offsetX, offsetY and blur (ex: "2px 2px 10px rgba(0,0,0,0.2)", "rgb(0,255,0) 2px 2px")
     * @static
     * @field
     * @memberOf fabric.Shadow
     */
    static reOffsetsAndBlur: RegExp;
}

///////////////////////////////////////////////////////////////////////////////
// Canvas Interfaces
//////////////////////////////////////////////////////////////////////////////
interface ICanvasDimensions {
    /**
     * Width of canvas element
     */
    width: number | string;
    /**
     * Height of canvas element
     */
    height: number | string;
}
interface ICanvasDimensionsOptions {
    /**
     * Set the given dimensions only as canvas backstore dimensions
     */
    backstoreOnly?: boolean | undefined;
    /**
     * Set the given dimensions only as css dimensions
     */
    cssOnly?: boolean | undefined;
}

interface IStaticCanvasOptions {
    /**
     * Background color of canvas instance.
     * Should be set via {@link fabric.StaticCanvas#setBackgroundColor}.
     * @type {(String|fabric.Pattern)}
     */
    backgroundColor?: string | Pattern | undefined;
    /**
     * Background image of canvas instance.
     * Should be set via {@link fabric.StaticCanvas#setBackgroundImage}.
     * <b>Backwards incompatibility note:</b> The "backgroundImageOpacity"
     * and "backgroundImageStretch" properties are deprecated since 1.3.9.
     * Use {@link fabric.Image#opacity}, {@link fabric.Image#width} and {@link fabric.Image#height}.
     * since 2.4.0 image caching is active, please when putting an image as background, add to the
     * canvas property a reference to the canvas it is on. Otherwise the image cannot detect the zoom
     * vale. As an alternative you can disable image objectCaching
     * @type fabric.Image
     */
    backgroundImage?: Image | string | undefined;
    /**
     * Overlay color of canvas instance.
     * Should be set via {@link fabric.StaticCanvas#setOverlayColor}
     * @since 1.3.9
     * @type {(String|fabric.Pattern)}
     */
    overlayColor?: string | Pattern | undefined;
    /**
     * Overlay image of canvas instance.
     * Should be set via {@link fabric.StaticCanvas#setOverlayImage}.
     * <b>Backwards incompatibility note:</b> The "overlayImageLeft"
     * and "overlayImageTop" properties are deprecated since 1.3.9.
     * Use {@link fabric.Image#left} and {@link fabric.Image#top}.
     * since 2.4.0 image caching is active, please when putting an image as overlay, add to the
     * canvas property a reference to the canvas it is on. Otherwise the image cannot detect the zoom
     * vale. As an alternative you can disable image objectCaching
     * @type fabric.Image
     */
    overlayImage?: Image | undefined;
    /**
     * Indicates whether toObject/toDatalessObject should include default values
     * if set to false, takes precedence over the object value.
     * @type Boolean
     */
    includeDefaultValues?: boolean | undefined;
    /**
     * Indicates whether objects' state should be saved
     * @type Boolean
     */
    stateful?: boolean | undefined;
    /**
     * Indicates whether {@link fabric.Collection.add}, {@link fabric.Collection.insertAt} and {@link fabric.Collection.remove},
     * {@link fabric.StaticCanvas.moveTo}, {@link fabric.StaticCanvas.clear} and many more, should also re-render canvas.
     * Disabling this option will not give a performance boost when adding/removing a lot of objects to/from canvas at once
     * since the renders are quequed and executed one per frame.
     * Disabling is suggested anyway and managing the renders of the app manually is not a big effort ( canvas.requestRenderAll() )
     * Left default to true to do not break documentation and old app, fiddles.
     * @type Boolean
     */
    renderOnAddRemove?: boolean | undefined;
    /**
     * Indicates whether object controls (borders/controls) are rendered above overlay image
     * @type Boolean
     */
    controlsAboveOverlay?: boolean | undefined;
    /**
     * Indicates whether the browser can be scrolled when using a touchscreen and dragging on the canvas
     * @type Boolean
     */
    allowTouchScrolling?: boolean | undefined;
    /**
     * Indicates whether this canvas will use image smoothing, this is on by default in browsers
     */
    imageSmoothingEnabled?: boolean | undefined;
    /**
     * The transformation (in the format of Canvas transform) which focuses the viewport
     */
    viewportTransform?: number[] | undefined;
    /**
     * if set to false background image is not affected by viewport transform
     * @since 1.6.3
     * @type Boolean
     */
    backgroundVpt?: boolean | undefined;
    /**
     * if set to false overlay image is not affected by viewport transform
     * @since 1.6.3
     * @type Boolean
     */
    overlayVpt?: boolean | undefined;
    /**
     * When true, canvas is scaled by devicePixelRatio for better rendering on retina screens
     * @type Boolean
     */
    enableRetinaScaling?: boolean | undefined;
    /**
     * Describe canvas element extension over design
     * properties are tl,tr,bl,br.
     * if canvas is not zoomed/panned those points are the four corner of canvas
     * if canvas is viewportTransformed you those points indicate the extension
     * of canvas element in plain untrasformed coordinates
     * The coordinates get updated with @method calcViewportBoundaries.
     * @memberOf fabric.StaticCanvas.prototype
     */
    vptCoords?: {
        tl: { x: number; y: number };
        tr: { x: number; y: number };
        bl: { x: number; y: number };
        br: { x: number; y: number };
    } | undefined;
    /**
     * Based on vptCoords and object.aCoords, skip rendering of objects that
     * are not included in current viewport.
     * May greatly help in applications with crowded canvas and use of zoom/pan
     * If One of the corner of the bounding box of the object is on the canvas
     * the objects get rendered.
     * @memberOf fabric.StaticCanvas.prototype
     * @type Boolean
     */
    skipOffscreen?: boolean | undefined;
    /**
     * a fabricObject that, without stroke define a clipping area with their shape. filled in black
     * the clipPath object gets used when the canvas has rendered, and the context is placed in the
     * top left corner of the canvas.
     * clipPath will clip away controls, if you do not want this to happen use controlsAboveOverlay = true
     * @type fabric.Object
     */
    clipPath?: Object | undefined;
    /**
     * When true, getSvgTransform() will apply the StaticCanvas.viewportTransform to the SVG transformation. When true,
     * a zoomed canvas will then produce zoomed SVG output.
     * @type Boolean
     */
    svgViewportTransformation?: boolean | undefined;
}

export interface FreeDrawingBrush {
    /**
     * Can be any regular color value.
     */
    color: string;

    /**
     * Brush width measured in pixels.
     */
    width: number;
}

export interface StaticCanvas
    extends IObservable<StaticCanvas>,
        IStaticCanvasOptions,
        ICollection<StaticCanvas>,
        ICanvasAnimation<StaticCanvas> {}
export class StaticCanvas {
    /**
     * Constructor
     * @param {HTMLElement | String} el <canvas> element to initialize instance on
     * @param {Object} [options] Options object
     * @return {Object} thisArg
     */
    constructor(element: HTMLCanvasElement | string | null, options?: ICanvasOptions);

    _activeObject?: Object | Group | undefined;

    freeDrawingBrush: FreeDrawingBrush;

    /**
     * Calculates canvas element offset relative to the document
     * This method is also attached as "resize" event handler of window
     * @return {fabric.Canvas} instance
     * @chainable
     */
    calcOffset(): Canvas;

    /**
     * Sets {@link fabric.StaticCanvas#overlayImage|overlay image} for this canvas
     * @param {(fabric.Image|String)} image fabric.Image instance or URL of an image to set overlay to
     * @param {Function} callback callback to invoke when image is loaded and set as an overlay
     * @param {Object} [options] Optional options to set for the {@link fabric.Image|overlay image}.
     * @return {fabric.Canvas} thisArg
     * @chainable
     */
    setOverlayImage(image: Image | string, callback: Function, options?: IImageOptions): Canvas;

    /**
     * Sets {@link fabric.StaticCanvas#backgroundImage|background image} for this canvas
     * @param {(fabric.Image|String)} image fabric.Image instance or URL of an image to set background to
     * @param {Function} callback Callback to invoke when image is loaded and set as background
     * @param {Object} [options] Optional options to set for the {@link fabric.Image|background image}.
     * @return {fabric.Canvas} thisArg
     * @chainable
     */
    setBackgroundImage(image: Image | string, callback: Function, options?: IImageOptions): Canvas;

    /**
     * Sets {@link fabric.StaticCanvas#overlayColor|foreground color} for this canvas
     * @param {(String|fabric.Pattern)} overlayColor Color or pattern to set foreground color to
     * @param {Function} callback Callback to invoke when foreground color is set
     * @return {fabric.Canvas} thisArg
     * @chainable
     */
    setOverlayColor(overlayColor: string | Pattern, callback: Function): Canvas;

    /**
     * Sets {@link fabric.StaticCanvas#backgroundColor|background color} for this canvas
     * @param {(String|fabric.Pattern)} backgroundColor Color or pattern to set background color to
     * @param {Function} callback Callback to invoke when background color is set
     * @return {fabric.Canvas} thisArg
     * @chainable
     */
    setBackgroundColor(backgroundColor: string | Pattern | Gradient, callback: Function): Canvas;

    /**
     * Returns canvas width (in px)
     * @return {Number}
     */
    getWidth(): number;

    /**
     * Returns canvas height (in px)
     * @return {Number}
     */
    getHeight(): number;

    /**
     * Sets width of this canvas instance
     * @param {Number|String} value                         Value to set width to
     * @param {Object}        [options]                     Options object
     * @return {fabric.Canvas} instance
     * @chainable true
     */
    setWidth(value: number | string, options?: ICanvasDimensionsOptions): Canvas;

    /**
     * Sets height of this canvas instance
     * @param value                         Value to set height to
     * @param        [options]                     Options object
     * @return {fabric.Canvas} instance
     * @chainable true
     */
    setHeight(value: number | string, options?: ICanvasDimensionsOptions): Canvas;

    /**
     * Sets dimensions (width, height) of this canvas instance. when options.cssOnly flag active you should also supply the unit of measure (px/%/em)
     * @param        dimensions                    Object with width/height properties
     * @param        [options]                     Options object
     * @return {fabric.Canvas} thisArg
     * @chainable
     */
    setDimensions(dimensions: ICanvasDimensions, options?: ICanvasDimensionsOptions): Canvas;

    /**
     * Returns canvas zoom level
     */
    getZoom(): number;

    /**
     * Sets viewport transform of this canvas instance
     * @param {Array} vpt the transform in the form of context.transform
     * @return {fabric.Canvas} instance
     * @chainable
     */
    setViewportTransform(vpt: number[]): Canvas;

    /**
     * Sets zoom level of this canvas instance, zoom centered around point
     * @param {fabric.Point} point to zoom with respect to
     * @param {Number} value to set zoom to, less than 1 zooms out
     * @return {fabric.Canvas} instance
     * @chainable true
     */
    zoomToPoint(point: IPoint, value: number): Canvas;

    /**
     * Sets zoom level of this canvas instance
     * @param {Number} value to set zoom to, less than 1 zooms out
     * @return {fabric.Canvas} instance
     * @chainable
     */
    setZoom(value: number): Canvas;

    /**
     * Pan viewport so as to place point at top left corner of canvas
     * @param {fabric.Point} point to move to
     * @return {fabric.Canvas} instance
     * @chainable
     */
    absolutePan(point: IPoint): Canvas;

    /**
     * Pans viewpoint relatively
     * @param {fabric.Point} point (position vector) to move by
     * @return {fabric.Canvas} instance
     * @chainable
     */
    relativePan(point: IPoint): Canvas;

    /**
     * Returns <canvas> element corresponding to this instance
     * @return {HTMLCanvasElement}
     */
    getElement(): HTMLCanvasElement;

    /**
     * Clears specified context of canvas element
     * @param ctx Context to clear
     * @chainable
     */
    clearContext(ctx: CanvasRenderingContext2D): Canvas;

    /**
     * Returns context of canvas where objects are drawn
     * @return {CanvasRenderingContext2D}
     */
    getContext(): CanvasRenderingContext2D;

    /**
     * Clears all contexts (background, main, top) of an instance
     * @return {fabric.Canvas} thisArg
     * @chainable
     */
    clear(): Canvas;

    /**
     * Renders the canvas
     * @return {fabric.Canvas} instance
     * @chainable
     */
    renderAll(): Canvas;

    /**
     * Function created to be instance bound at initialization
     * used in requestAnimationFrame rendering
     * Let the fabricJS call it. If you call it manually you could have more
     * animationFrame stacking on to of each other
     * for an imperative rendering, use canvas.renderAll
     * @private
     * @return {fabric.Canvas} instance
     * @chainable
     */
    renderAndReset(): Canvas;

    /**
     * Append a renderAll request to next animation frame.
     * unless one is already in progress, in that case nothing is done
     * a boolean flag will avoid appending more.
     * @return {fabric.Canvas} instance
     * @chainable
     */
    requestRenderAll(): Canvas;

    /**
     * Calculate the position of the 4 corner of canvas with current viewportTransform.
     * helps to determinate when an object is in the current rendering viewport using
     * object absolute coordinates ( aCoords )
     * @return {Object} points.tl
     * @chainable
     */
    calcViewportBoundaries(): { tl: Point; br: Point; tr: Point; bl: Point };

    /**
     * Renders background, objects, overlay and controls.
     * @param {CanvasRenderingContext2D} ctx
     * @param {Array} objects to render
     * @return {fabric.Canvas} instance
     * @chainable
     */
    renderCanvas(ctx: CanvasRenderingContext2D, objects: Object[]): Canvas;

    /**
     * Paint the cached clipPath on the lowerCanvasEl
     * @param {CanvasRenderingContext2D} ctx Context to render on
     */
    drawClipPathOnCanvas(ctx: CanvasRenderingContext2D): void;

    /**
     * Returns coordinates of a center of canvas.
     * Returned value is an object with top and left properties
     * @return {Object} object with "top" and "left" number values
     */
    getCenter(): { top: number; left: number };

    /**
     * Centers object horizontally in the canvas
     * @param {fabric.Object} object Object to center horizontally
     * @return {fabric.Canvas} thisArg
     */
    centerObjectH(object: Object): Canvas;

    /**
     * Centers object vertically in the canvas
     * @param {fabric.Object} object Object to center vertically
     * @return {fabric.Canvas} thisArg
     * @chainable
     */
    centerObjectV(object: Object): Canvas;

    /**
     * Centers object vertically and horizontally in the canvas
     * @param {fabric.Object} object Object to center vertically and horizontally
     * @return {fabric.Canvas} thisArg
     * @chainable
     */
    centerObject(object: Object): Canvas;

    /**
     * Centers object vertically and horizontally in the viewport
     * @param {fabric.Object} object Object to center vertically and horizontally
     * @return {fabric.Canvas} thisArg
     * @chainable
     */
    viewportCenterObject(object: Object): Canvas;

    /**
     * Centers object horizontally in the viewport, object.top is unchanged
     * @param {fabric.Object} object Object to center vertically and horizontally
     * @return {fabric.Canvas} thisArg
     * @chainable
     */
    viewportCenterObjectH(object: Object): Canvas;

    /**
     * Centers object Vertically in the viewport, object.top is unchanged
     * @param {fabric.Object} object Object to center vertically and horizontally
     * @return {fabric.Canvas} thisArg
     * @chainable
     */
    viewportCenterObjectV(object: Object): Canvas;

    /**
     * Calculate the point in canvas that correspond to the center of actual viewport.
     * @return {fabric.Point} vpCenter, viewport center
     */
    getVpCenter(): Point;

    /**
     * Returs dataless JSON representation of canvas
     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
     * @return {String} json string
     */
    toDatalessJSON(propertiesToInclude?: string[]): string;

    /**
     * Returns JSON representation of canvas
     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
     * @return {String} JSON string
     */
    toJSON(propertiesToInclude?: string[]): string;

    /**
     * Returns object representation of canvas
     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
     * @return {Object} object representation of an instance
     */
    toObject(propertiesToInclude?: string[]): any;

    /**
     * Returns dataless object representation of canvas
     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
     * @return {Object} object representation of an instance
     */
    toDatalessObject(propertiesToInclude?: string[]): any;

    /**
     * Returns SVG representation of canvas
     * @param [options] Options object for SVG output
     * @param [reviver] Method for further parsing of svg elements, called after each fabric object converted into svg representation.
     * @return {String} SVG string
     */
    toSVG(options?: IToSVGOptions, reviver?: Function): string;

    /**
     * Moves an object or the objects of a multiple selection
     * to the bottom of the stack of drawn objects
     * @param {fabric.Object} object Object to send to back
     * @return {fabric.Canvas} thisArg
     * @chainable
     */
    sendToBack(object: Object): Canvas;

    /**
     * Moves an object or the objects of a multiple selection
     * to the top of the stack of drawn objects
     * @param {fabric.Object} object Object to send
     * @return {fabric.Canvas} thisArg
     * @chainable
     */
    bringToFront(object: Object): Canvas;

    /**
     * Moves an object or a selection down in stack of drawn objects
     * An optional paramter, intersecting allowes to move the object in behind
     * the first intersecting object. Where intersection is calculated with
     * bounding box. If no intersection is found, there will not be change in the
     * stack.
     * @param {fabric.Object} object Object to send
     * @param {Boolean} [intersecting] If `true`, send object behind next lower intersecting object
     * @return {fabric.Canvas} thisArg
     * @chainable
     */
    sendBackwards(object: Object, intersecting?: boolean): Canvas;

    /**
     * Moves an object or a selection up in stack of drawn objects
     * An optional paramter, intersecting allowes to move the object in front
     * of the first intersecting object. Where intersection is calculated with
     * bounding box. If no intersection is found, there will not be change in the
     * stack.
     * @param {fabric.Object} object Object to send
     * @param {Boolean} [intersecting] If `true`, send object in front of next upper intersecting object
     * @return {fabric.Canvas} thisArg
     * @chainable
     */
    bringForward(object: Object, intersecting?: boolean): Canvas;

    /**
     * Moves an object to specified level in stack of drawn objects
     * @param {fabric.Object} object Object to send
     * @param {Number} index Position to move to
     * @return {fabric.Canvas} thisArg
     * @chainable
     */
    moveTo(object: Object, index: number): Canvas;

    /**
     * Clears a canvas element and dispose objects
     * @return {fabric.Canvas} thisArg
     * @chainable     */
    dispose(): Canvas;

    /**
     * Returns a string representation of an instance
     * @return {String} string representation of an instance
     */
    toString(): string;

    /**
     * @static
     * @type String
     * @default
     */
    static EMPTY_JSON: string;

    /**
     * Provides a way to check support of some of the canvas methods
     * (either those of HTMLCanvasElement itself, or rendering context)
     *
     * @param {String} methodName Method to check support for;
     *                            Could be one of "setLineDash"
     * @return {Boolean | null} `true` if method is supported (or at least exists),
     *                          `null` if canvas element or context can not be initialized
     */
    static supports(methodName: 'getImageData' | 'toDataURL' | 'toDataURLWithQuality' | 'setLineDash'): boolean;

    /**
     * Exports canvas element to a dataurl image. Note that when multiplier is used, cropping is scaled appropriately
     * @param [options] Options object
     */
    toDataURL(options?: IDataURLOptions): string;

    /**
     * Returns JSON representation of canvas
     * @param [propertiesToInclude] Any properties that you might want to additionally include in the output
     */
    static toJSON(propertiesToInclude?: string[]): string;

    /**
     * Clones canvas instance
     * @param [callback] Receives cloned instance as a first argument
     * @param [properties] Array of properties to include in the cloned canvas and children
     */
    clone(callback?: any, properties?: string[]): void;

    /**
     * Clones canvas instance without cloning existing data.
     * This essentially copies canvas dimensions, clipping properties, etc.
     * but leaves data empty (so that you can populate it with your own)
     * @param [callback] Receives cloned instance as a first argument
     */
    cloneWithoutData(callback?: any): void;

    /**
     * Populates canvas with data from the specified JSON.
     * JSON format must conform to the one of {@link fabric.Canvas#toJSON}
     * @param {String|Object} json JSON string or object
     * @param {Function} callback Callback, invoked when json is parsed
     *                            and corresponding objects (e.g: {@link fabric.Image})
     *                            are initialized
     * @param {Function} [reviver] Method for further parsing of JSON elements, called after each fabric object created.
     * @return {fabric.Canvas} instance
     */
    loadFromJSON(json: any, callback: Function, reviver?: Function): Canvas;

    /**
     * Creates markup containing SVG font faces,
     * font URLs for font faces must be collected by developers
     * and are not extracted from the DOM by fabricjs
     * @param {Array} objects Array of fabric objects
     * @return {String}
     */

    createSVGFontFacesMarkup(objects: any[]): string;
    /**
     * Creates markup containing SVG referenced elements like patterns, gradients etc.
     * @return {String}
     */

    createSVGRefElementsMarkup(): string;
    /**
     * Straightens object, then rerenders canvas
     * @param {fabric.Object} object Object to straighten
     * @return {fabric.Canvas} thisArg
     * @chainable
     */

    straightenObject(object: Object): Canvas;
}

interface ICanvasOptions extends IStaticCanvasOptions {
    /**
     * When true, objects can be transformed by one side (unproportionally)
     * when dragged on the corners that normally would not do that.
     * @type Boolean
     * @default
     * @since fabric 4.0 // changed name and default value
     */
    uniformScaling?: boolean | undefined;

    /**
     * Indicates which key enable unproportional scaling
     * values: 'altKey', 'shiftKey', 'ctrlKey'.
     * If `null` or 'none' or any other string that is not a modifier key
     * feature is disabled feature disabled.
     * @since 1.6.2
     * @type String
     */
    uniScaleKey?: string | undefined;

    /**
     * When true, objects use center point as the origin of scale transformation.
     * <b>Backwards incompatibility note:</b> This property replaces "centerTransform" (Boolean).
     */
    centeredScaling?: boolean | undefined;

    /**
     * When true, objects use center point as the origin of rotate transformation.
     * <b>Backwards incompatibility note:</b> This property replaces "centerTransform" (Boolean).
     */
    centeredRotation?: boolean | undefined;

    /**
     * Color of object's fill
     */
    fill?: string | Pattern | Gradient | undefined;

    /**
     * Indicates which key enable centered Transform
     * values: 'altKey', 'shiftKey', 'ctrlKey'.
     * If `null` or 'none' or any other string that is not a modifier key
     * feature is disabled feature disabled.
     * @since 1.6.2
     * @type String
     * @default
     */
    centeredKey?: string | undefined;

    /**
     * Indicates which key enable alternate action on corner
     * values: 'altKey', 'shiftKey', 'ctrlKey'.
     * If `null` or 'none' or any other string that is not a modifier key
     * feature is disabled feature disabled.
     * @since 1.6.2
     * @type String
     * @default
     */
    altActionKey?: string | undefined;

    /**
     * Indicates that canvas is interactive. This property should not be changed.
     */
    interactive?: boolean | undefined;

    /**
     * Indicates whether group selection should be enabled
     */
    selection?: boolean | undefined;

    /**
     * Indicates which key or keys enable multiple click selection
     * Pass value as a string or array of strings
     * values: 'altKey', 'shiftKey', 'ctrlKey'.
     * If `null` or empty or containing any other string that is not a modifier key
     * feature is disabled.
     * @since 1.6.2
     * @type String|Array
     * @default
     */
    selectionKey?: string | string[] | undefined;

    /**
     * Indicates which key enable alternative selection
     * in case of target overlapping with active object
     * values: 'altKey', 'shiftKey', 'ctrlKey'.
     * For a series of reason that come from the general expectations on how
     * things should work, this feature works only for preserveObjectStacking true.
     * If `null` or 'none' or any other string that is not a modifier key
     * feature is disabled.
     * @since 1.6.5
     * @type null|String
     * @default
     */
    altSelectionKey?: string | null | undefined;

    /**
     * Color of selection
     */
    selectionColor?: string | undefined;

    /**
     * Default dash array pattern
     * If not empty the selection border is dashed
     */
    selectionDashArray?: number[] | undefined;

    /**
     * Color of the border of selection (usually slightly darker than color of selection itself)
     */
    selectionBorderColor?: string | undefined;

    /**
     * Width of a line used in object/group selection
     */
    selectionLineWidth?: number | undefined;

    /**
     * Select only shapes that are fully contained in the dragged selection rectangle.
     * @type Boolean
     * @default
     */
    selectionFullyContained?: boolean | undefined;

    /**
     * Default cursor value used when hovering over an object on canvas
     */
    hoverCursor?: string | undefined;

    /**
     * Default cursor value used when moving an object on canvas
     */
    moveCursor?: string | undefined;

    /**
     * Default cursor value used for the entire canvas
     */
    defaultCursor?: string | undefined;

    /**
     * Cursor value used during free drawing
     */
    freeDrawingCursor?: string | undefined;

    /**
     * Cursor value used for rotation point
     */
    rotationCursor?: string | undefined;

    /**
     * Cursor value used for disabled elements ( corners with disabled action )
     * @type String
     * @since 2.0.0
     * @default
     */
    notAllowedCursor?: string | undefined;

    /**
     * Default element class that's given to wrapper (div) element of canvas
     */
    containerClass?: string | undefined;

    /**
     * When true, object detection happens on per-pixel basis rather than on per-bounding-box
     */
    perPixelTargetFind?: boolean | undefined;

    /**
     * Number of pixels around target pixel to tolerate (consider active) during object detection
     */
    targetFindTolerance?: number | undefined;

    /**
     * When true, target detection is skipped when hovering over canvas. This can be used to improve performance.
     */
    skipTargetFind?: boolean | undefined;

    /**
     * When true, mouse events on canvas (mousedown/mousemove/mouseup) result in free drawing.
     * After mousedown, mousemove creates a shape,
     * and then mouseup finalizes it and adds an instance of `fabric.Path` onto canvas.
     */
    isDrawingMode?: boolean | undefined;

    /**
     * Indicates whether objects should remain in current stack position when selected.
     * When false objects are brought to top and rendered as part of the selection group
     * @type Boolean
     */
    preserveObjectStacking?: boolean | undefined;

    /**
     * Indicates the angle that an object will lock to while rotating.
     * @type Number
     * @since 1.6.7
     */
    snapAngle?: number | undefined;

    /**
     * Indicates the distance from the snapAngle the rotation will lock to the snapAngle.
     * When `null`, the snapThreshold will default to the snapAngle.
     * @type null|Number
     * @since 1.6.7
     * @default
     */
    snapThreshold?: null | number | undefined;

    /**
     * Indicates if the right click on canvas can output the context menu or not
     * @type Boolean
     * @since 1.6.5
     * @default
     */
    stopContextMenu?: boolean | undefined;

    /**
     * Indicates if the canvas can fire right click events
     * @type Boolean
     * @since 1.6.5
     * @default
     */
    fireRightClick?: boolean | undefined;

    /**
     * Indicates if the canvas can fire middle click events
     * @type Boolean
     * @since 1.7.8
     * @default
     */
    fireMiddleClick?: boolean | undefined;

    /**
     * Keep track of the subTargets for Mouse Events
     * @type {Array.<fabric.Object>}
     * @since 3.6.0
     * @default
     */
    targets?: Object[] | undefined;

    /**
     * Canvas width
     * @type number
     * @default
     */
    width?: number | undefined;

    /**
     * Canvas height
     * @type number
     * @default
     */
    height?: number | undefined;
}
export interface Canvas extends StaticCanvas {}
export interface Canvas extends ICanvasOptions {}
export class Canvas {
    /**
     * Constructor
     * @param element <canvas> element to initialize instance on
     * @param [options] Options object
     */
    constructor(element: HTMLCanvasElement | string | null, options?: ICanvasOptions);

    /**
     * When true, target detection is skipped when hovering over canvas. This can be used to improve performance.
     * @type Boolean
     * @default
     */
    skipTargetFind: boolean;
    _activeObject: Object;
    _objects: Object[];
    targets: Object[];
    /**
     * Indicates which key enable alternative selection
     * in case of target overlapping with active object
     * values: 'altKey', 'shiftKey', 'ctrlKey'.
     * For a series of reason that come from the general expectations on how
     * things should work, this feature works only for preserveObjectStacking true.
     * If `null` or 'none' or any other string that is not a modifier key
     * feature is disabled.
     * @since 1.6.5
     * @type null|String
     * @default
     */
    altSelectionKey?: string | undefined;

    /**
     * Renders both the top canvas and the secondary container canvas.
     * @return {fabric.Canvas} instance
     * @chainable
     */
    renderAll(): Canvas;
    /**
     * Method to render only the top canvas.
     * Also used to render the group selection box.
     * @return {fabric.Canvas} thisArg
     * @chainable
     */
    renderTop(): Canvas;
    /**
     * Checks if point is contained within an area of given object
     * @param {Event} e Event object
     * @param {fabric.Object} target Object to test against
     * @param {Object} [point] x,y object of point coordinates we want to check.
     * @return {Boolean} true if point is contained within an area of given object
     */
    containsPoint(e: Event, target: Object, point?: { x: number; y: number }): boolean;
    /**
     * Returns true if object is transparent at a certain location
     * @param {fabric.Object} target Object to check
     * @param {Number} x Left coordinate
     * @param {Number} y Top coordinate
     * @return {Boolean}
     */
    isTargetTransparent(target: Object, x: number, y: number): boolean;
    /**
     * Set the cursor type of the canvas element
     * @param {String} value Cursor type of the canvas element.
     * @see http://www.w3.org/TR/css3-ui/#cursor
     */
    setCursor(value: string): void;
    /**
     * Method that determines what object we are clicking on
     * the skipGroup parameter is for internal use, is needed for shift+click action
     * 11/09/2018 TODO: would be cool if findTarget could discern between being a full target
     * or the outside part of the corner.
     * @param {Event} e mouse event
     * @param {Boolean} skipGroup when true, activeGroup is skipped and only objects are traversed through
     * @return {fabric.Object} the target found
     */
    findTarget(e: Event, skipGroup: boolean): Object | undefined;
    /**
     * Returns pointer coordinates without the effect of the viewport
     * @param {Object} pointer with "x" and "y" number values
     * @return {Object} object with "x" and "y" number values
     */
    restorePointerVpt(pointer: IPoint): any;
    /**
     * Returns pointer coordinates relative to canvas.
     * Can return coordinates with or without viewportTransform.
     * ignoreZoom false gives back coordinates that represent
     * the point clicked on canvas element.
     * ignoreZoom true gives back coordinates after being processed
     * by the viewportTransform ( sort of coordinates of what is displayed
     * on the canvas where you are clicking.
     * ignoreZoom true = HTMLElement coordinates relative to top,left
     * ignoreZoom false, default = fabric space coordinates, the same used for shape position
     * To interact with your shapes top and left you want to use ignoreZoom true
     * most of the time, while ignoreZoom false will give you coordinates
     * compatible with the object.oCoords system.
     * of the time.
     * @param {Event} e
     * @param {Boolean} ignoreZoom
     * @return {Object} object with "x" and "y" number values
     */
    getPointer(e: Event, ignoreZoom?: boolean): { x: number; y: number };
    /**
     * Returns context of canvas where object selection is drawn
     * @return {CanvasRenderingContext2D}
     */
    getSelectionContext(): CanvasRenderingContext2D;
    /**
     * Returns <canvas> element on which object selection is drawn
     * @return {HTMLCanvasElement}
     */
    getSelectionElement(): HTMLCanvasElement;
    /**
     * Returns currently active object
     * @return {fabric.Object} active object
     */
    getActiveObject(): Object;
    /**
     * Returns an array with the current selected objects
     * @return {fabric.Object} active object
     */
    getActiveObjects(): Object[];
    /**
     * Sets given object as the only active object on canvas
     * @param {fabric.Object} object Object to set as an active one
     * @param {Event} [e] Event (passed along when firing "object:selected")
     * @return {fabric.Canvas} thisArg
     * @chainable
     */
    setActiveObject(object: Object, e?: Event): Canvas;
    /**
     * Discards currently active object and fire events. If the function is called by fabric
     * as a consequence of a mouse event, the event is passed as a parameter and
     * sent to the fire function for the custom events. When used as a method the
     * e param does not have any application.
     * @param {event} e
     * @return {fabric.Canvas} thisArg
     * @chainable
     */
    discardActiveObject(e?: Event): Canvas;
    /**
     * Clears a canvas element and removes all event listeners
     * @return {fabric.Canvas} thisArg
     * @chainable
     */
    dispose(): Canvas;
    /**
     * Clears all contexts (background, main, top) of an instance
     * @return {fabric.Canvas} thisArg
     * @chainable
     */
    clear(): Canvas;
    /**
     * Draws objects' controls (borders/controls)
     * @param {CanvasRenderingContext2D} ctx Context to render controls on
     */
    drawControls(ctx: CanvasRenderingContext2D): void;
    /**
     * @private
     * @return {Boolean} true if the scaling occurred
     */
    _setObjectScale(
        localMouse: Point,
        transform: any,
        lockScalingX: boolean,
        lockScalingY: boolean,
        by: 'x' | 'y' | 'equally' | undefined,
        lockScalingFlip: boolean,
        _dim: Point,
    ): boolean;
    /**
     * Scales object by invoking its scaleX/scaleY methods
     * @private
     * @param {Number} x pointer's x coordinate
     * @param {Number} y pointer's y coordinate
     * @param {String} by Either 'x' or 'y' - specifies dimension constraint by which to scale an object.
     *                    When not provided, an object is scaled by both dimensions equally
     * @return {Boolean} true if the scaling occurred
     */
    _scaleObject(x: number, y: number, by?: 'x' | 'y' | 'equally'): boolean;
    /**
     * @private
     * @param {fabric.Object} obj Object that was removed
     */
    _onObjectRemoved(obj: Object): void;
    /**
     * @private
     * @param {fabric.Object} obj Object that was added
     */
    _onObjectAdded(obj: Object): void;
    /**
     * Resets the current transform to its original values and chooses the type of resizing based on the event
     * @private
     */
    _resetCurrentTransform(): void;
    /**
     * @private
     * Compares the old activeObject with the current one and fires correct events
     * @param {fabric.Object} obj old activeObject
     */
    _fireSelectionEvents(oldObjects: Object[], e?: Event): void;
    /**
     * @private
     * @param {Object} object to set as active
     * @param {Event} [e] Event (passed along when firing "object:selected")
     * @return {Boolean} true if the selection happened
     */
    _setActiveObject(object: fabric.Object, e?: Event): boolean;
    /**
     * Returns pointer coordinates relative to canvas.
     * Can return coordinates with or without viewportTransform.
     * ignoreZoom false gives back coordinates that represent
     * the point clicked on canvas element.
     * ignoreZoom true gives back coordinates after being processed
     * by the viewportTransform ( sort of coordinates of what is displayed
     * on the canvas where you are clicking.
     * ignoreZoom true = HTMLElement coordinates relative to top,left
     * ignoreZoom false, default = fabric space coordinates, the same used for shape position
     * To interact with your shapes top and left you want to use ignoreZoom true
     * most of the time, while ignoreZoom false will give you coordinates
     * compatible with the object.oCoords system.
     * of the time.
     * @param {Event} e
     * @param {Boolean} ignoreZoom
     * @return {Object} object with "x" and "y" number values
     */
    getPointer(e: Event, ignoreZoom: boolean): { x: number; y: number };
    /**
     * Function used to search inside objects an object that contains pointer in bounding box or that contains pointerOnCanvas when painted
     * @param {Array} [objects] objects array to look into
     * @param {Object} [pointer] x,y object of point coordinates we want to check.
     * @return {fabric.Object} object that contains pointer
     * @private
     */
    _searchPossibleTargets(objects: Object[], pointer: { x: number; y: number }): Object;

    static EMPTY_JSON: string;
    /**
     * Provides a way to check support of some of the canvas methods
     * (either those of HTMLCanvasElement itself, or rendering context)
     * @param methodName Method to check support for; Could be one of "getImageData", "toDataURL", "toDataURLWithQuality" or "setLineDash"
     */
    static supports(methodName: 'getImageData' | 'toDataURL' | 'toDataURLWithQuality' | 'setLineDash'): boolean;
    /**
     * Returns JSON representation of canvas
     * @param [propertiesToInclude] Any properties that you might want to additionally include in the output
     */
    static toJSON(propertiesToInclude?: string[]): string;
    /**
     * Removes all event listeners
     */
    removeListeners(): void;
}

///////////////////////////////////////////////////////////////////////////////
// Shape Interfaces
//////////////////////////////////////////////////////////////////////////////

interface ICircleOptions extends IObjectOptions {
    /**
     * Radius of this circle
     */
    radius?: number | undefined;
    /**
     * Start angle of the circle, moving clockwise
     */
    startAngle?: number | undefined;
    /**
     * End angle of the circle
     */
    endAngle?: number | undefined;
}
export interface Circle extends Object, ICircleOptions {}
export class Circle {
    constructor(options?: ICircleOptions);
    /**
     * Returns horizontal radius of an object (according to how an object is scaled)
     */
    getRadiusX(): number;
    /**
     * Returns vertical radius of an object (according to how an object is scaled)
     */
    getRadiusY(): number;
    /**
     * Sets radius of an object (and updates width accordingly)
     */
    setRadius(value: number): number;
    /**
     * Returns svg representation of an instance
     * @return {Array} an array of strings with the specific svg representation
     * of the instance
     */
    _toSVG(): string;
    /**
     * List of attribute names to account for when parsing SVG element (used by {@link fabric.Circle.fromElement})
     */
    static ATTRIBUTE_NAMES: string[];
    /**
     * Returns Circle instance from an SVG element
     * @param element Element to parse
     * @param [options] Options object
     */
    static fromElement(element: SVGElement, options: ICircleOptions): Circle;
    /**
     * Returns Circle instance from an object representation
     * @param object Object to create an instance from
     */
    static fromObject(object: any): Circle;
}

interface IEllipseOptions extends IObjectOptions {
    /**
     * Horizontal radius
     */
    rx?: number | undefined;
    /**
     * Vertical radius
     */
    ry?: number | undefined;
}
export interface Ellipse extends Object, IEllipseOptions {}
export class Ellipse {
    constructor(options?: IEllipseOptions);
    /**
     * Returns horizontal radius of an object (according to how an object is scaled)
     */
    getRx(): number;
    /**
     * Returns Vertical radius of an object (according to how an object is scaled)
     */
    getRy(): number;
    /**
     * Returns svg representation of an instance
     * @return {Array} an array of strings with the specific svg representation
     * of the instance
     */
    _toSVG(): string;
    /**
     * List of attribute names to account for when parsing SVG element (used by {@link fabric.Ellipse.fromElement})
     */
    static ATTRIBUTE_NAMES: string[];
    /**
     * Returns Ellipse instance from an SVG element
     * @param element Element to parse
     * @param [options] Options object
     */
    static fromElement(element: SVGElement, options?: IEllipseOptions): Ellipse;
    /**
     * Returns Ellipse instance from an object representation
     * @param object Object to create an instance from
     */
    static fromObject(object: any): Ellipse;
}
interface IGroupOptions extends IObjectOptions {
    /**
     * Indicates if click, mouseover, mouseout events & hoverCursor should also check for subtargets
     * @type Boolean
     */
    subTargetCheck?: boolean | undefined;
    /**
     * setOnGroup is a method used for TextBox that is no more used since 2.0.0 The behavior is still
     * available setting this boolean to true.
     * @type Boolean
     * @since 2.0.0
     * @default
     */
    useSetOnGroup?: boolean | undefined;
}
export interface Group extends Object, ICollection<Group>, IGroupOptions {}
export class Group {
    /**
     * Constructor
     * @param objects Group objects
     * @param [options] Options object
     */
    constructor(objects?: Object[], options?: IGroupOptions, isAlreadyGrouped?: boolean);
    /**
     * Adds an object to a group; Then recalculates group's dimension, position.
     * @param [Object] object
     * @return thisArg
     * @chainable
     */
    addWithUpdate(object?: Object): Group;
    /**
     * Removes an object from a group; Then recalculates group's dimension, position.
     * @return thisArg
     * @chainable
     */
    removeWithUpdate(object: Object): Group;
    /**
     * Renders instance on a given context
     * @param ctx context to render instance on
     */
    render(ctx: CanvasRenderingContext2D): void;
    /**
     * Decide if the object should cache or not. Create its own cache level
     * objectCaching is a global flag, wins over everything
     * needsItsOwnCache should be used when the object drawing method requires
     * a cache step. None of the fabric classes requires it.
     * Generally you do not cache objects in groups because the group outside is cached.
     * @return {Boolean}
     */
    shouldCache(): boolean;
    /**
     * Check if this object or a child object will cast a shadow
     * @return {Boolean}
     */
    willDrawShadow(): boolean;
    /**
     * Check if this group or its parent group are caching, recursively up
     * @return {Boolean}
     */
    isOnACache(): boolean;
    /**
     * Execute the drawing operation for an object on a specified context
     * @param {CanvasRenderingContext2D} ctx Context to render on
     */
    drawObject(ctx: CanvasRenderingContext2D): void;
    /**
     * Check if cache is dirty
     */
    isCacheDirty(skipCanvas?: boolean): boolean;
    /**
     * Realises the transform from this group onto the supplied object
     * i.e. it tells you what would happen if the supplied object was in
     * the group, and then the group was destroyed. It mutates the supplied
     * object.
     * @param {fabric.Object} object
     * @return {fabric.Object} transformedObject
     */
    realizeTransform(object: Object): Object;
    /**
     * Destroys a group (restoring state of its objects)
     * @return {fabric.Group} thisArg
     * @chainable
     */
    destroy(): Group;
    /**
     * make a group an active selection, remove the group from canvas
     * the group has to be on canvas for this to work.
     * @return {fabric.ActiveSelection} thisArg
     * @chainable
     */
    toActiveSelection(): ActiveSelection;
    /**
     * Destroys a group (restoring state of its objects)
     * @return {fabric.Group} thisArg
     * @chainable
     */
    ungroupOnCanvas(): Group;
    /**
     * Sets coordinates of all group objects
     * @return thisArg
     * @chainable
     */
    setObjectsCoords(): Group;
    /**
     * Returns svg representation of an instance
     * @param [reviver] Method for further parsing of svg representation.
     * @return svg representation of an instance
     */
    toSVG(reviver?: Function): string;
    /**
     * Returns svg clipPath representation of an instance
     * @param {Function} [reviver] Method for further parsing of svg representation.
     * @return {String} svg representation of an instance
     */
    toClipPathSVG(reviver?: Function): string;
    /**
     * Adds an object to a group; Then recalculates group's dimension, position.
     * @param {Object} object
     * @return {fabric.Group} thisArg
     * @chainable
     */
    addWithUpdate(object: Object): Group;
    /**
     * Retores original state of each of group objects (original state is that which was before group was created).
     * @private
     * @return {fabric.Group} thisArg
     * @chainable
     */
    _restoreObjectsState(): Group;
    /**
     * @private
     */
    _calcBounds(onlyWidthHeight?: boolean): void;
    /**
     * @private
     * @param {Boolean} [skipCoordsChange] if true, coordinates of objects enclosed in a group do not change
     */
    _updateObjectsCoords(center?: Point): void;
    /**
     * Retores original state of each of group objects (original state is that which was before group was created).
     * @private
     * @return {fabric.Group} thisArg
     * @chainable
     */
    _restoreObjectsState(): Group;
    /**
     * @private
     */
    _onObjectRemoved(object: Object): void;
    /**
     * Returns {@link fabric.Group} instance from an object representation
     * @param object Object to create a group from
     * @param [callback] Callback to invoke when an group instance is created
     */
    static fromObject(object: any, callback: (group: Group) => any): void;
}

///////////////////////////////////////////////////////////////////////////////
// ActiveSelection
//////////////////////////////////////////////////////////////////////////////
export interface ActiveSelection extends Group, ICollection<Group> {}
export class ActiveSelection {
    /**
     * Constructor
     * @param objects ActiveSelection objects
     * @param [options] Options object
     */
    constructor(objects?: Object[], options?: IObjectOptions);
    /**
     * Constructor
     * @param {Object} objects ActiveSelection objects
     * @param {Object} [options] Options object
     * @return {Object} thisArg
     */
    initialize(objects: ActiveSelection, options?: IObjectOptions): Object;
    /**
     * Change te activeSelection to a normal group,
     * High level function that automatically adds it to canvas as
     * active object. no events fired.
     */
    toGroup(): Group;
    /**
     * Returns {@link fabric.ActiveSelection} instance from an object representation
     * @memberOf fabric.ActiveSelection
     * @param object Object to create a group from
     * @param [callback] Callback to invoke when an ActiveSelection instance is created
     */
    static fromObject(object: any, callback: Function): void;
}

interface IImageOptions extends IObjectOptions {
    /**
     * crossOrigin value (one of "", "anonymous", "allow-credentials")
     */
    crossOrigin?: string | undefined;
    /**
     * When calling {@link fabric.Image.getSrc}, return value from element src with `element.getAttribute('src')`.
     * This allows for relative urls as image src.
     * @since 2.7.0
     * @type Boolean
     */
    srcFromAttribute?: boolean | undefined;
    /**
     * minimum scale factor under which any resizeFilter is triggered to resize the image
     * 0 will disable the automatic resize. 1 will trigger automatically always.
     * number bigger than 1 are not implemented yet.
     * @type Number
     */
    minimumScaleTrigger?: number | undefined;
    /**
     * key used to retrieve the texture representing this image
     * @since 2.0.0
     * @type String
     */
    cacheKey?: string | undefined;
    /**
     * Image crop in pixels from original image size.
     * @since 2.0.0
     * @type Number
     */
    cropX?: number | undefined;
    /**
     * Image crop in pixels from original image size.
     * @since 2.0.0
     * @type Number
     */
    cropY?: number | undefined;
    /**
     * Image filter array
     */
    filters?: IBaseFilter[] | undefined;
}
interface Image extends Object, IImageOptions {}
export class Image {
    /**
     * Constructor
     * @param element Image or Video element
     * @param [options] Options object
     */
    constructor(element?: string | HTMLImageElement | HTMLVideoElement, options?: IImageOptions);
    /**
     * Returns image or video element which this instance is based on
     * @return Image or Video element
     */
    getElement(): HTMLImageElement | HTMLVideoElement;
    /**
     * Sets image or video element for this instance to a specified one.
     * If filters defined they are applied to new image.
     * You might need to call `canvas.renderAll` and `object.setCoords` after replacing, to render new image and update controls area.
     * @param element image element
     * @param [options] Options object
     */
    setElement(element: HTMLImageElement | HTMLVideoElement, options?: IImageOptions): Image;
    /**
     * Delete a single texture if in webgl mode
     */
    removeTexture(key: any): void;
    /**
     * Delete textures, reference to elements and eventually JSDOM cleanup
     */
    dispose(): void;
    /**
     * Returns original size of an image
     * @return Object with "width" and "height" properties
     */
    getOriginalSize(): { width: number; height: number };
    /**
     * Returns true if an image has crop applied, inspecting values of cropX,cropY,width,hight.
     * @return {Boolean}
     */
    hasCrop(): boolean;
    /**
     * Returns svg representation of an instance
     * @return {Array} an array of strings with the specific svg representation
     * of the instance
     */
    _toSVG(): string;
    /**
     * Returns source of an image
     * @return Source of an image
     */
    getSrc(): string;
    /**
     * Sets source of an image
     * @param {String} src Source string (URL)
     * @param {Function} [callback] Callback is invoked when image has been loaded (and all filters have been applied)
     * @param {Object} [options] Options object
     * @return {fabric.Image} thisArg
     * @chainable
     */
    setSrc(src: string, callback?: Function, options?: IImageOptions): Image;
    applyResizeFilters(): void;
    /**
     * Applies filters assigned to this image (from "filters" array) or from filter param
     * @param {Array} filters to be applied
     * @return {thisArg} return the fabric.Image object
     * @chainable
     */
    applyFilters(filters?: IBaseFilter[]): Image;
    /**
     * Calculate offset for center and scale factor for the image in order to respect
     * the preserveAspectRatio attribute
     * @private
     * @return {Object}
     */
    parsePreserveAspectRatioAttribute(): any;
    /**
     * Creates an instance of fabric.Image from an URL string
     * @param url URL to create an image from
     * @param [callback] Callback to invoke when image is created (newly created image is passed as a first argument)
     * @param [imgOptions] Options object
     */
    static fromURL(url: string, callback?: (image: Image) => void, imgOptions?: IImageOptions): Image;
    /**
     * Returns Image instance from an SVG element
     * @param element Element to parse
     * @param callback Callback to execute when fabric.Image object is created
     * @param [options] Options object
     */
    static fromElement(element: SVGElement, callback: Function, options?: IImageOptions): Image;
    /**
     * Default CSS class name for canvas
     */
    static CSS_CANVAS: string;
    static filters: IAllFilters;
    static ATTRIBUTE_NAMES: string[];
}

interface ILineOptions extends IObjectOptions {
    /**
     * x value or first line edge
     */
    x1?: number | undefined;
    /**
     * x value or second line edge
     */
    x2?: number | undefined;
    /**
     * y value or first line edge
     */
    y1?: number | undefined;
    /**
     * y value or second line edge
     */
    y2?: number | undefined;
}
export interface Line extends Object, ILineOptions {}
export class Line {
    /**
     * Constructor
     * @param [points] Array of points
     * @param [options] Options object
     */
    constructor(points?: number[], objObjects?: ILineOptions);
    /**
     * Returns svg representation of an instance
     * @return {Array} an array of strings with the specific svg representation
     * of the instance
     */
    _toSVG(): string;
    /**
     * Returns fabric.Line instance from an SVG element
     * @static
     * @memberOf fabric.Line
     * @param {SVGElement} element Element to parse
     * @param {Object} [options] Options object
     * @param {Function} [callback] callback function invoked after parsing
     */
    static fromElement(element: SVGElement, callback?: Function, options?: ILineOptions): Line;
    /**
     * Returns fabric.Line instance from an object representation
     * @param object Object to create an instance from
     */
    static fromObject(object: any): Line;
    static ATTRIBUTE_NAMES: string[];
    /**
     * Produces a function that calculates distance from canvas edge to Line origin.
     */
    makeEdgeToOriginGetter(
        propertyNames: { origin: number; axis1: any; axis2: any; dimension: any },
        originValues: { nearest: any; center: any; farthest: any },
    ): Function;
    /**
     * Recalculates line points given width and height
     * @private
     */
    calcLinePoints(): { x1: number; x2: number; y1: number; y2: number };
}

interface IObjectOptions {
    /**
     * Type of an object (rect, circle, path, etc.).
     * Note that this property is meant to be read-only and not meant to be modified.
     * If you modify, certain parts of Fabric (such as JSON loading) won't work correctly.
     */
    type?: string | undefined;

    /**
     * Horizontal origin of transformation of an object (one of "left", "right", "center")
     */
    originX?: string | undefined;

    /**
     * Vertical origin of transformation of an object (one of "top", "bottom", "center")
     */
    originY?: string | undefined;

    /**
     * Top position of an object. Note that by default it's relative to object center. You can change this by setting originY={top/center/bottom}
     */
    top?: number | undefined;

    /**
     * Left position of an object. Note that by default it's relative to object center. You can change this by setting originX={left/center/right}
     */
    left?: number | undefined;

    /**
     * Object width
     */
    width?: number | undefined;

    /**
     * Object height
     */
    height?: number | undefined;

    /**
     * Object scale factor (horizontal)
     */
    scaleX?: number | undefined;

    /**
     * Object scale factor (vertical)
     */
    scaleY?: number | undefined;

    /**
     * When true, an object is rendered as flipped horizontally
     */
    flipX?: boolean | undefined;

    /**
     * When true, an object is rendered as flipped vertically
     */
    flipY?: boolean | undefined;

    /**
     * Opacity of an object
     */
    opacity?: number | undefined;

    /**
     * Angle of rotation of an object (in degrees)
     */
    angle?: number | undefined;

    /**
     * Object skew factor (horizontal)
     */
    skewX?: number | undefined;

    /**
     * Object skew factor (vertical)
     */
    skewY?: number | undefined;

    /**
     * Size of object's controlling corners (in pixels)
     */
    cornerSize?: number | undefined;

    /**
     * When true, object's controlling corners are rendered as transparent inside (i.e. stroke instead of fill)
     */
    transparentCorners?: boolean | undefined;

    /**
     * Default cursor value used when hovering over this object on canvas
     */
    hoverCursor?: string | undefined;

    /**
     * Default cursor value used when moving an object on canvas
     */
    moveCursor?: string | undefined;

    /**
     * Padding between object and its controlling borders (in pixels)
     */
    padding?: number | undefined;

    /**
     * Color of controlling borders of an object (when it's active)
     */
    borderColor?: string | undefined;

    /**
     * Array specifying dash pattern of an object's border (hasBorder must be true)
     */
    borderDashArray?: number[] | undefined;

    /**
     * Color of controlling corners of an object (when it's active)
     */
    cornerColor?: string | undefined;

    /**
     * Color of controlling corners of an object (when it's active and transparentCorners false)
     */
    cornerStrokeColor?: string | undefined;

    /**
     * Specify style of control, 'rect' or 'circle'
     */
    cornerStyle?: 'rect' | 'circle' | undefined;

    /**
     * Array specifying dash pattern of an object's control (hasBorder must be true)
     */
    cornerDashArray?: number[] | undefined;

    /**
     * When true, this object will use center point as the origin of transformation
     * when being scaled via the controls.
     * <b>Backwards incompatibility note:</b> This property replaces "centerTransform" (Boolean).
     */
    centeredScaling?: boolean | undefined;

    /**
     * When true, this object will use center point as the origin of transformation
     * when being rotated via the controls.
     * <b>Backwards incompatibility note:</b> This property replaces "centerTransform" (Boolean).
     */
    centeredRotation?: boolean | undefined;

    /**
     * Color of object's fill
     */
    fill?: string | Pattern | Gradient | undefined;

    /**
     * Fill rule used to fill an object
     * accepted values are nonzero, evenodd
     * Backwards incompatibility note: This property was used for setting globalCompositeOperation until v1.4.12, use `globalCompositeOperation` instead
     */
    fillRule?: string | undefined;

    /**
     * Composite rule used for canvas globalCompositeOperation
     */
    globalCompositeOperation?: string | undefined;

    /**
     * Background color of an object. Only works with text objects at the moment.
     */
    backgroundColor?: string | undefined;

    /**
     * Selection Background color of an object. colored layer behind the object when it is active.
     * does not mix good with globalCompositeOperation methods.
     * @type String
     */
    selectionBackgroundColor?: string | undefined;

    /**
     * When defined, an object is rendered via stroke and this property specifies its color
     */
    stroke?: string | undefined;

    /**
     * Width of a stroke used to render this object
     */
    strokeWidth?: number | undefined;

    /**
     * Array specifying dash pattern of an object's stroke (stroke must be defined)
     */
    strokeDashArray?: number[] | undefined;

    /**
     * Line offset of an object's stroke
     * @type Number
     * @default
     */
    strokeDashOffset?: number | undefined;

    /**
     * Line endings style of an object's stroke (one of "butt", "round", "square")
     */
    strokeLineCap?: string | undefined;

    /**
     * Corner style of an object's stroke (one of "bevil", "round", "miter")
     */
    strokeLineJoin?: string | undefined;

    /**
     * Maximum miter length (used for strokeLineJoin = "miter") of an object's stroke
     */
    strokeMiterLimit?: number | undefined;

    /**
     * Shadow object representing shadow of this shape
     */
    shadow?: Shadow | string | undefined;

    /**
     * Opacity of object's controlling borders when object is active and moving
     */
    borderOpacityWhenMoving?: number | undefined;

    /**
     * Scale factor of object's controlling borders
     */
    borderScaleFactor?: number | undefined;

    /**
     * Minimum allowed scale value of an object
     */
    minScaleLimit?: number | undefined;

    /**
     * When set to `false`, an object can not be selected for modification (using either point-click-based or group-based selection).
     * But events still fire on it.
     */
    selectable?: boolean | undefined;

    /**
     * When set to `false`, an object can not be a target of events. All events propagate through it. Introduced in v1.3.4
     */
    evented?: boolean | undefined;

    /**
     * When set to `false`, an object is not rendered on canvas
     */
    visible?: boolean | undefined;

    /**
     * When set to `false`, object's controls are not displayed and can not be used to manipulate object
     */
    hasControls?: boolean | undefined;

    /**
     * When set to `false`, object's controlling borders are not rendered
     */
    hasBorders?: boolean | undefined;

    /**
     * When set to `false`, object's controlling rotating point will not be visible or selectable
     */
    hasRotatingPoint?: boolean | undefined;

    /**
     * Offset for object's controlling rotating point (when enabled via `hasRotatingPoint`)
     */
    rotatingPointOffset?: number | undefined;

    /**
     * When set to `true`, objects are "found" on canvas on per-pixel basis rather than according to bounding box
     */
    perPixelTargetFind?: boolean | undefined;

    /**
     * When `false`, default object's values are not included in its serialization
     */
    includeDefaultValues?: boolean | undefined;

    /**
     * When `true`, object horizontal movement is locked
     */
    lockMovementX?: boolean | undefined;

    /**
     * When `true`, object vertical movement is locked
     */
    lockMovementY?: boolean | undefined;

    /**
     * When `true`, object rotation is locked
     */
    lockRotation?: boolean | undefined;

    /**
     * When `true`, object horizontal scaling is locked
     */
    lockScalingX?: boolean | undefined;

    /**
     * When `true`, object vertical scaling is locked
     */
    lockScalingY?: boolean | undefined;

    /**
     * When `true`, object non-uniform scaling is locked
     */
    lockUniScaling?: boolean | undefined;

    /**
     * When `true`, object horizontal skewing is locked
     * @type Boolean
     */
    lockSkewingX?: boolean | undefined;

    /**
     * When `true`, object vertical skewing is locked
     * @type Boolean
     */
    lockSkewingY?: boolean | undefined;

    /**
     * When `true`, object cannot be flipped by scaling into negative values
     */
    lockScalingFlip?: boolean | undefined;

    /**
     * When `true`, object is not exported in OBJECT/JSON
     * since 1.6.3
     * @type Boolean
     * @default
     */
    excludeFromExport?: boolean | undefined;

    /**
     * When `true`, object is cached on an additional canvas.
     */
    objectCaching?: boolean | undefined;

    /**
     * When `true`, object properties are checked for cache invalidation. In some particular
     * situation you may want this to be disabled ( spray brush, very big, groups)
     * or if your application does not allow you to modify properties for groups child you want
     * to disable it for groups.
     * default to false
     * since 1.7.0
     * @type Boolean
     * @default false
     */
    statefullCache?: boolean | undefined;

    /**
     * When `true`, cache does not get updated during scaling. The picture will get blocky if scaled
     * too much and will be redrawn with correct details at the end of scaling.
     * this setting is performance and application dependant.
     * default to true
     * since 1.7.0
     * @type Boolean
     */
    noScaleCache?: boolean | undefined;

    /**
     * When `false`, the stoke width will scale with the object.
     * When `true`, the stroke will always match the exact pixel size entered for stroke width.
     * default to false
     * @since 2.6.0
     * @type Boolean
     * @default false
     * @type Boolean
     */
    strokeUniform?: boolean | undefined;

    /**
     * When set to `true`, object's cache will be rerendered next render call.
     */
    dirty?: boolean | undefined;

    /**
     * Determines if the fill or the stroke is drawn first (one of "fill" or "stroke")
     * @type String
     */
    paintFirst?: string | undefined;

    /**
     * List of properties to consider when checking if state
     * of an object is changed (fabric.Object#hasStateChanged)
     * as well as for history (undo/redo) purposes
     * @type Array
     */
    stateProperties?: string[] | undefined;

    /**
     * List of properties to consider when checking if cache needs refresh
     * Those properties are checked by statefullCache ON ( or lazy mode if we want ) or from single
     * calls to Object.set(key, value). If the key is in this list, the object is marked as dirty
     * and refreshed at the next render
     * @type Array
     */
    cacheProperties?: string[] | undefined;

    /**
     * A fabricObject that, without stroke define a clipping area with their shape. filled in black
     * the clipPath object gets used when the object has rendered, and the context is placed in the center
     * of the object cacheCanvas.
     * If you want 0,0 of a clipPath to align with an object center, use clipPath.originX/Y to 'center'
     */
    clipPath?: Object | undefined;

    /**
     * Meaningful ONLY when the object is used as clipPath.
     * if true, the clipPath will make the object clip to the outside of the clipPath
     * since 2.4.0
     * @type boolean
     * @default false
     */
    inverted?: boolean | undefined;

    /**
     * Meaningful ONLY when the object is used as clipPath.
     * if true, the clipPath will have its top and left relative to canvas, and will
     * not be influenced by the object transform. This will make the clipPath relative
     * to the canvas, but clipping just a particular object.
     * WARNING this is beta, this feature may change or be renamed.
     * since 2.4.0
     * @type boolean
     * @default false
     */
    absolutePositioned?: boolean | undefined;

    /**
     * Not used by fabric, just for convenience
     */
    name?: string | undefined;

    /**
     * Not used by fabric, just for convenience
     */
    data?: any;
    /**
     * Describe object's corner position in canvas element coordinates.
     * properties are tl,mt,tr,ml,mr,bl,mb,br,mtr for the main controls.
     * each property is an object with x, y and corner.
     * The `corner` property contains in a similar manner the 4 points of the
     * interactive area of the corner.
     * The coordinates depends from this properties: width, height, scaleX, scaleY
     * skewX, skewY, angle, strokeWidth, viewportTransform, top, left, padding.
     * The coordinates get updated with @method setCoords.
     * You can calculate them without updating with @method calcCoords;
     * @memberOf fabric.Object.prototype
     */
    oCoords?: { tl: Point; mt: Point; tr: Point; ml: Point; mr: Point; bl: Point; mb: Point; br: Point; mtr: Point } | undefined;
    /**
     * Describe object's corner position in canvas object absolute coordinates
     * properties are tl,tr,bl,br and describe the four main corner.
     * each property is an object with x, y, instance of Fabric.Point.
     * The coordinates depends from this properties: width, height, scaleX, scaleY
     * skewX, skewY, angle, strokeWidth, top, left.
     * Those coordinates are usefull to understand where an object is. They get updated
     * with oCoords but they do not need to be updated when zoom or panning change.
     * The coordinates get updated with @method setCoords.
     * You can calculate them without updating with @method calcCoords(true);
     * @memberOf fabric.Object.prototype
     */
    aCoords?: { bl: Point; br: Point; tl: Point; tr: Point } | undefined;
    /**
     * storage for object full transform matrix
     */
    matrixCache?: any;
    /**
     * storage for object transform matrix
     */
    ownMatrixCache?: any;

    /**
     * Indicates the angle that an object will lock to while rotating. Can get from canvas.
     */
    snapAngle?: number | undefined;
    /**
     * Indicates the distance from the snapAngle the rotation will lock to the snapAngle. Can get from canvas.
     */
    snapThreshold?: null | number | undefined;
    /**
     * The group the object is part of
     */
    group?: Group | undefined;
    /**
     * The canvas the object belongs to
     */
    canvas?: Canvas | undefined;
}
export interface Object extends IObservable<Object>, IObjectOptions, IObjectAnimation<Object> {}
export class Object {
    _controlsVisibility: {
        bl?: boolean | undefined;
        br?: boolean | undefined;
        mb?: boolean | undefined;
        ml?: boolean | undefined;
        mr?: boolean | undefined;
        mt?: boolean | undefined;
        tl?: boolean | undefined;
        tr?: boolean | undefined;
        mtr?: boolean | undefined;
    };

    controls: { [key: string]: Control };

    constructor(options?: IObjectOptions);
    initialize(options?: IObjectOptions): Object;

    /* Sets object's properties from options
     * @param {Object} [options] Options object
     */
    setOptions(options: IObjectOptions): void;

    /**
     * Transforms context when rendering an object
     * @param {CanvasRenderingContext2D} ctx Context
     */
    transform(ctx: CanvasRenderingContext2D): void;

    /**
     * Returns an object representation of an instance
     * @param [propertiesToInclude] Any properties that you might want to additionally include in the output
     */
    toObject(propertiesToInclude?: string[]): any;

    /**
     * Returns (dataless) object representation of an instance
     * @param [propertiesToInclude] Any properties that you might want to additionally include in the output
     */
    toDatalessObject(propertiesToInclude?: string[]): any;

    /**
     * Returns a string representation of an instance
     */
    toString(): string;

    /**
     * Return the object scale factor counting also the group scaling
     * @return {Object} object with scaleX and scaleY properties
     */
    getObjectScaling(): { scaleX: number; scaleY: number };

    /**
     * Return the object scale factor counting also the group scaling, zoom and retina
     * @return {Object} object with scaleX and scaleY properties
     */
    getTotalObjectScaling(): { scaleX: number; scaleY: number };

    /**
     * Return the object opacity counting also the group property
     * @return {Number}
     */
    getObjectOpacity(): number;

    /**
     * This callback function is called by the parent group of an object every
     * time a non-delegated property changes on the group. It is passed the key
     * and value as parameters. Not adding in this function's signature to avoid
     * Travis build error about unused variables.
     */
    setOnGroup(): void;

    /**
     * Retrieves viewportTransform from Object's canvas if possible
     */
    getViewportTransform(): any[];

    /**
     * Renders an object on a specified context
     * @param {CanvasRenderingContext2D} ctx Context to render on
     */
    render(ctx: CanvasRenderingContext2D): void;

    /**
     * When set to `true`, force the object to have its own cache, even if it is inside a group
     * it may be needed when your object behave in a particular way on the cache and always needs
     * its own isolated canvas to render correctly.
     * Created to be overridden
     * since 1.7.12
     * @returns false
     */
    needsItsOwnCache(): boolean;

    /**
     * Decide if the object should cache or not. Create its own cache level
     * objectCaching is a global flag, wins over everything
     * needsItsOwnCache should be used when the object drawing method requires
     * a cache step. None of the fabric classes requires it.
     * Generally you do not cache objects in groups because the group outside is cached.
     * @return {Boolean}
     */
    shouldCache(): boolean;

    /**
     * Check if this object or a child object will cast a shadow
     * used by Group.shouldCache to know if child has a shadow recursively
     * @return {Boolean}
     */
    willDrawShadow(): boolean;

    /**
     * Execute the drawing operation for an object clipPath
     * @param {CanvasRenderingContext2D} ctx Context to render on
     */
    drawClipPathOnCache(ctx: CanvasRenderingContext2D): void;

    /**
     * Execute the drawing operation for an object on a specified context
     * @param {CanvasRenderingContext2D} ctx Context to render on
     */
    drawObject(ctx: CanvasRenderingContext2D): void;

    /**
     * Paint the cached copy of the object on the target context.
     * @param {CanvasRenderingContext2D} ctx Context to render on
     */
    drawCacheOnCanvas(ctx: CanvasRenderingContext2D): void;

    /**
     * Check if cache is dirty
     * @param {Boolean} skipCanvas skip canvas checks because this object is painted
     * on parent canvas.
     */
    isCacheDirty(skipCanvas?: boolean): boolean;

    /**
     * Clones an instance, using a callback method will work for every object.
     * @param callback Callback is invoked with a clone as a first argument
     * @param [propertiesToInclude] Any properties that you might want to additionally include in the output
     */
    clone(callback: Function, propertiesToInclude?: string[]): void;

    /**
     * Creates an instance of fabric.Image out of an object
     * @param callback callback, invoked with an instance as a first argument
     */
    cloneAsImage(callback: Function, options?: IDataURLOptions): Object;

    /**
     * Converts an object into a HTMLCanvas element
     * @param {Object} options Options object
     * @param {Number} [options.multiplier=1] Multiplier to scale by
     * @param {Number} [options.left] Cropping left offset. Introduced in v1.2.14
     * @param {Number} [options.top] Cropping top offset. Introduced in v1.2.14
     * @param {Number} [options.width] Cropping width. Introduced in v1.2.14
     * @param {Number} [options.height] Cropping height. Introduced in v1.2.14
     * @param {Boolean} [options.enableRetinaScaling] Enable retina scaling for clone image. Introduce in 1.6.4
     * @param {Boolean} [options.withoutTransform] Remove current object transform ( no scale , no angle, no flip, no skew ). Introduced in 2.3.4
     * @param {Boolean} [options.withoutShadow] Remove current object shadow. Introduced in 2.4.2
     * @return {HTMLCanvasElement} Returns a new HTMLCanvasElement painted with the current canvas object
     */
    toCanvasElement(options?: IDataURLOptions): HTMLCanvasElement;

    /**
     * Converts an object into a data-url-like string
     * @param options Options object
     */
    toDataURL(options: IDataURLOptions): string;

    /**
     * Returns true if specified type is identical to the type of an instance
     * @param type Type to check against
     */
    isType(type: string): boolean;

    /**
     * Returns complexity of an instance
     */
    complexity(): number;

    /**
     * Returns a JSON representation of an instance
     * @param [propertiesToInclude] Any properties that you might want to additionally include in the output
     */
    toJSON(propertiesToInclude?: string[]): any;

    /**
     * Sets "angle" of an instance
     * @param angle Angle value
     */
    rotate(angle: number): Object;

    /**
     * Centers object horizontally on canvas to which it was added last.
     * You might need to call `setCoords` on an object after centering, to update controls area.
     */
    centerH(): Object;

    /**
     * Centers object horizontally on current viewport of canvas to which it was added last.
     * You might need to call `setCoords` on an object after centering, to update controls area.
     * @return {fabric.Object} thisArg
     * @chainable
     */
    viewportCenterH(): Object;

    /**
     * Centers object vertically on canvas to which it was added last.
     * You might need to call `setCoords` on an object after centering, to update controls area.
     */
    centerV(): Object;

    /**
     * Centers object vertically on current viewport of canvas to which it was added last.
     * You might need to call `setCoords` on an object after centering, to update controls area.
     * @return {fabric.Object} thisArg
     * @chainable
     */
    viewportCenterV(): Object;

    /**
     * Centers object vertically and horizontally on canvas to which is was added last
     * You might need to call `setCoords` on an object after centering, to update controls area.
     */
    center(): Object;

    /**
     * Centers object on current viewport of canvas to which it was added last.
     * You might need to call `setCoords` on an object after centering, to update controls area.
     * @return {fabric.Object} thisArg
     * @chainable
     */
    viewportCenter(): Object;

    /**
     * Returns coordinates of a pointer relative to an object
     * @param e Event to operate upon
     * @param [pointer] Pointer to operate upon (instead of event)
     */
    getLocalPointer(e: Event | undefined, pointer?: { x: number; y: number }): { x: number; y: number };

    /**
     * Basic getter
     * @param property Property name
     */
    get<K extends keyof this>(property: K): this[K];

    /**
     * Sets property to a given value.
     * When changing position/dimension -related properties (left, top, scale, angle, etc.) `set` does not update position of object's borders/controls.
     * If you need to update those, call `setCoords()`.
     * @param key Property name
     * @param value Property value (if function, the value is passed into it and its return value is used as a new one)
     */
    set<K extends keyof this>(key: K, value: this[K] | ((value: this[K]) => this[K])): Object;

    /**
     * Sets property to a given value.
     * When changing position/dimension -related properties (left, top, scale, angle, etc.) `set` does not update position of object's borders/controls.
     * If you need to update those, call `setCoords()`.
     * @param options Property object, iterate over the object properties
     */
    set(options: Partial<this>): Object;

    /**
     * Toggles specified property from `true` to `false` or from `false` to `true`
     * @param property Property to toggle
     */
    toggle(property: keyof this): Object;

    /**
     * Sets sourcePath of an object
     * @param value Value to set sourcePath to
     */
    setSourcePath(value: string): Object;

    /**
     * Sets "angle" of an instance
     * @param angle Angle value
     */
    setAngle(angle: number): Object;

    /**
     * Sets object's properties from options
     * @param [options] Options object
     */
    setOptions(options?: any): void;
    /**
     * Sets sourcePath of an object
     * @param value Value to set sourcePath to
     */
    setSourcePath(value: string): Object;
    // functions from object svg export mixin
    // -----------------------------------------------------------------------------------------------------------------------------------
    /**
     * Returns styles-string for svg-export
     * @param {Boolean} skipShadow a boolean to skip shadow filter output
     * @return {String}
     */
    getSvgStyles(skipShadow?: boolean): string;
    /**
     * Returns transform-string for svg-export
     * @param {Boolean} use the full transform or the single object one.
     * @return {String}
     */
    getSvgTransform(full?: boolean, additionalTransform?: string): string;
    /**
     * Returns transform-string for svg-export from the transform matrix of single elements
     */
    getSvgTransformMatrix(): string;

    // functions from stateful mixin
    // -----------------------------------------------------------------------------------------------------------------------------------
    /**
     * Returns true if object state (one of its state properties) was changed
     * @param {String} [propertySet] optional name for the set of property we want to save
     * @return {Boolean} true if instance' state has changed since `{@link fabric.Object#saveState}` was called
     */
    hasStateChanged(propertySet: string): boolean;
    /**
     * Saves state of an object
     * @param [options] Object with additional `stateProperties` array to include when saving state
     * @return thisArg
     */
    saveState(options?: { stateProperties?: any[] | undefined; propertySet?: string | undefined }): Object;
    /**
     * Setups state of an object
     * @param {Object} [options] Object with additional `stateProperties` array to include when saving state
     * @return {fabric.Object} thisArg
     */
    setupState(options?: any): Object;
    // functions from object straightening mixin
    // -----------------------------------------------------------------------------------------------------------------------------------
    /**
     * Straightens an object (rotating it from current angle to one of 0, 90, 180, 270, etc. depending on which is closer)
     */
    straighten(): Object;
    /**
     * Same as straighten but with animation
     */
    fxStraighten(callbacks: Callbacks): Object;

    // functions from object stacking mixin
    // -----------------------------------------------------------------------------------------------------------------------------------
    /**
     * Moves an object up in stack of drawn objects
     * @param [intersecting] If `true`, send object in front of next upper intersecting object
     */
    bringForward(intersecting?: boolean): Object;
    /**
     * Moves an object to the top of the stack of drawn objects
     */
    bringToFront(): Object;
    /**
     * Moves an object down in stack of drawn objects
     * @param [intersecting] If `true`, send object behind next lower intersecting object
     */
    sendBackwards(intersecting?: boolean): Object;
    /**
     * Moves an object to the bottom of the stack of drawn objects
     */
    sendToBack(): Object;
    /**
     * Moves an object to specified level in stack of drawn objects
     * @param index New position of object
     */
    moveTo(index: number): Object;

    // functions from object origin mixin
    // -----------------------------------------------------------------------------------------------------------------------------------
    /**
     * Translates the coordinates from origin to center coordinates (based on the object's dimensions)
     * @param point The point which corresponds to the originX and originY params
     * @param originX Horizontal origin: 'left', 'center' or 'right'
     * @param originY Vertical origin: 'top', 'center' or 'bottom'
     */
    translateToCenterPoint(point: Point, originX: string, originY: string): Point;

    /**
     * Translates the coordinates from center to origin coordinates (based on the object's dimensions)
     * @param center The point which corresponds to center of the object
     * @param originX Horizontal origin: 'left', 'center' or 'right'
     * @param originY Vertical origin: 'top', 'center' or 'bottom'
     */
    translateToOriginPoint(center: Point, originX: string, originY: string): Point;
    /**
     * Returns the real center coordinates of the object
     */
    getCenterPoint(): Point;

    /**
     * Returns the coordinates of the object as if it has a different origin
     * @param {String} originX Horizontal origin: 'left', 'center' or 'right'
     * @param {String} originY Vertical origin: 'top', 'center' or 'bottom'
     * @return {fabric.Point}
     */
    getPointByOrigin(originX: string, originY: string): Point;

    /**
     * Returns the point in local coordinates
     * @param point The point relative to the global coordinate system
     * @param originX Horizontal origin: 'left', 'center' or 'right'
     * @param originY Vertical origin: 'top', 'center' or 'bottom'
     */
    toLocalPoint(point: Point, originX: string, originY: string): Point;

    /**
     * Sets the position of the object taking into consideration the object's origin
     * @param pos The new position of the object
     * @param originX Horizontal origin: 'left', 'center' or 'right'
     * @param originY Vertical origin: 'top', 'center' or 'bottom'
     */
    setPositionByOrigin(pos: Point, originX: string, originY: string): void;

    /**
     * @param to One of 'left', 'center', 'right'
     */
    adjustPosition(to: string): void;

    // functions from interactivity mixin
    // -----------------------------------------------------------------------------------------------------------------------------------
    /**
     * Draws borders of an object's bounding box.
     * Requires public properties: width, height
     * Requires public options: padding, borderColor
     * @param {CanvasRenderingContext2D} ctx Context to draw on
     * @param {Object} styleOverride object to override the object style
     * @return {fabric.Object} thisArg
     * @chainable
     */
    drawBorders(ctx: CanvasRenderingContext2D, styleOverride?: any): Object;

    /**
     * Draws borders of an object's bounding box when it is inside a group.
     * Requires public properties: width, height
     * Requires public options: padding, borderColor
     * @param {CanvasRenderingContext2D} ctx Context to draw on
     * @param {object} options object representing current object parameters
     * @param {Object} styleOverride object to override the object style
     * @return {fabric.Object} thisArg
     * @chainable
     */
    drawBordersInGroup(ctx: CanvasRenderingContext2D, options?: any, styleOverride?: any): Object;

    /**
     * Draws corners of an object's bounding box.
     * Requires public properties: width, height
     * Requires public options: cornerSize, padding
     * @param {CanvasRenderingContext2D} ctx Context to draw on
     * @param {Object} styleOverride object to override the object style
     * @return {fabric.Object} thisArg
     * @chainable
     */
    drawControls(ctx: CanvasRenderingContext2D, styleOverride?: any): Object;

    /**
     * Draws a colored layer behind the object, inside its selection borders.
     * Requires public options: padding, selectionBackgroundColor
     * this function is called when the context is transformed
     * has checks to be skipped when the object is on a staticCanvas
     * @param {CanvasRenderingContext2D} ctx Context to draw on
     * @return {fabric.Object} thisArg
     * @chainable
     */
    drawSelectionBackground(ctx: CanvasRenderingContext2D): Object;

    /**
     * Draws corners of an object's bounding box.
     * Requires public properties: width, height
     * Requires public options: cornerSize, padding
     * @param ctx Context to draw on
     */
    drawCorners(context: CanvasRenderingContext2D): Object;

    /**
     * Returns true if the specified control is visible, false otherwise.
     * @param controlName The name of the control. Possible values are 'tl', 'tr', 'br', 'bl', 'ml', 'mt', 'mr', 'mb', 'mtr'.
     */
    isControlVisible(controlName: string): boolean;
    /**
     * Sets the visibility of the specified control.
     * @param controlName The name of the control. Possible values are 'tl', 'tr', 'br', 'bl', 'ml', 'mt', 'mr', 'mb', 'mtr'.
     * @param visible true to set the specified control visible, false otherwise
     */
    setControlVisible(controlName: string, visible: boolean): Object;

    /**
     * Sets the visibility state of object controls.
     * @param [options] Options object
     */
    setControlsVisibility(options?: {
        bl?: boolean | undefined;
        br?: boolean | undefined;
        mb?: boolean | undefined;
        ml?: boolean | undefined;
        mr?: boolean | undefined;
        mt?: boolean | undefined;
        tl?: boolean | undefined;
        tr?: boolean | undefined;
        mtr?: boolean | undefined;
    }): this;

    // functions from geometry mixin
    // -------------------------------------------------------------------------------------------------------------------------------
    /**
     * Sets corner position coordinates based on current angle, width and height.
     * oCoords are used to find the corners
     * aCoords are used to quickly find an object on the canvas
     * lineCoords are used to quickly find object during pointer events.
     * See {@link https://github.com/kangax/fabric.js/wiki/When-to-call-setCoords|When-to-call-setCoords}
     * @param {Boolean} [skipCorners] skip calculation of oCoords.
     * @return {fabric.Object} thisArg
     * @chainable
     */
    setCoords(skipCorners?: boolean): Object;
    /**
     * Returns coordinates of object's bounding rectangle (left, top, width, height)
     * the box is intented as aligned to axis of canvas.
     * @param {Boolean} [absolute] use coordinates without viewportTransform
     * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords / .aCoords
     * @return {Object} Object with left, top, width, height properties
     */
    getBoundingRect(
        absolute?: boolean,
        calculate?: boolean,
    ): { left: number; top: number; width: number; height: number };
    /**
     * Checks if object is fully contained within area of another object
     * @param {Object} other Object to test
     * @param {Boolean} [absolute] use coordinates without viewportTransform
     * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords
     * @return {Boolean} true if object is fully contained within area of another object
     */
    isContainedWithinObject(other: Object, absolute?: boolean, calculate?: boolean): boolean;
    /**
     * Checks if object is fully contained within area formed by 2 points
     * @param pointTL top-left point of area
     * @param pointBR bottom-right point of area
     */
    isContainedWithinRect(pointTL: any, pointBR: any, absolute?: boolean, calculate?: boolean): boolean;
    /**
     * Checks if point is inside the object
     * @param {fabric.Point} point Point to check against
     * @param {Object} [lines] object returned from @method _getImageLines
     * @param {Boolean} [absolute] use coordinates without viewportTransform
     * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords
     * @return {Boolean} true if point is inside the object
     */
    containsPoint(point: Point, lines?: any, absolute?: boolean, calculate?: boolean): boolean;
    /**
     * Scales an object (equally by x and y)
     * @param value Scale factor
     * @return thisArg
     */
    scale(value: number): Object;
    /**
     * Scales an object to a given height, with respect to bounding box (scaling by x/y equally)
     * @param value New height value
     */
    scaleToHeight(value: number, absolute?: boolean): Object;
    /**
     * Scales an object to a given width, with respect to bounding box (scaling by x/y equally)
     * @param value New width value
     */
    scaleToWidth(value: number, absolute?: boolean): Object;
    /**
     * Checks if object intersects with another object
     * @param {Object} other Object to test
     * @param {Boolean} [absolute] use coordinates without viewportTransform
     * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords
     * @return {Boolean} true if object intersects with another object
     */
    intersectsWithObject(other: Object, absolute?: boolean, calculate?: boolean): boolean;
    /**
     * Checks if object intersects with an area formed by 2 points
     * @param {Object} pointTL top-left point of area
     * @param {Object} pointBR bottom-right point of area
     * @param {Boolean} [absolute] use coordinates without viewportTransform
     * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords
     * @return {Boolean} true if object intersects with an area formed by 2 points
     */
    intersectsWithRect(pointTL: any, pointBR: any, absolute?: boolean, calculate?: boolean): boolean;

    /**
     * Animates object's properties
     * object.animate('left', ..., {duration: ...});
     * @param property Property to animate
     * @param value Value to animate property
     * @param options The animation options
     */
    animate(property: string, value: number | string, options?: IAnimationOptions): Object;
    /**
     * Animates object's properties
     * object.animate({ left: ..., top: ... }, { duration: ... });
     * @param properties Properties to animate with values to animate to
     * @param options The animation options
     */
    animate(properties: { [key: string]: number | string }, options?: IAnimationOptions): Object;
    /**
     * Calculate and returns the .coords of an object.
     * @return {Object} Object with tl, tr, br, bl ....
     * @chainable
     */
    calcCoords(absolute?: boolean): any;
    /**
     * calculate trasform Matrix that represent current transformation from
     * object properties.
     * @param {Boolean} [skipGroup] return transformMatrix for object and not go upward with parents
     * @return {Array} matrix Transform Matrix for the object
     */
    calcTransformMatrix(skipGroup?: boolean): any[];
    /**
     * calculate transform matrix that represents the current transformations from the
     * object's properties, this matrix does not include the group transformation
     * @return {Array} transform matrix for the object
     */
    calcOwnMatrix(): any[];
    /**
     * return correct set of coordinates for intersection
     */
    getCoords(absolute?: boolean, calculate?: boolean): [fabric.Point, fabric.Point, fabric.Point, fabric.Point];
    /**
     * Returns height of an object bounding box counting transformations
     * before 2.0 it was named getHeight();
     * @return {Number} height value
     */
    getScaledHeight(): number;
    /**
     * Returns width of an object bounding box counting transformations
     * before 2.0 it was named getWidth();
     * @return {Number} width value
     */
    getScaledWidth(): number;
    /**
     * Returns id attribute for svg output
     * @return {String}
     */
    getSvgCommons(): string;
    /**
     * Returns filter for svg shadow
     * @return {String}
     */
    getSvgFilter(): string;
    /**
     * Returns styles-string for svg-export
     * @param {Object} style the object from which to retrieve style properties
     * @param {Boolean} useWhiteSpace a boolean to include an additional attribute in the style.
     * @return {String}
     */
    getSvgSpanStyles(style: any, useWhiteSpace?: boolean): string;
    /**
     * Returns text-decoration property for svg-export
     * @param {Object} style the object from which to retrieve style properties
     * @return {String}
     */
    getSvgTextDecoration(style: any): string;
    /**
     * Checks if object is contained within the canvas with current viewportTransform
     * the check is done stopping at first point that appears on screen
     * @param {Boolean} [calculate] use coordinates of current position instead of .aCoords
     * @return {Boolean} true if object is fully or partially contained within canvas
     */
    isOnScreen(calculate?: boolean): boolean;
    /**
     * Checks if object is partially contained within the canvas with current viewportTransform
     * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords
     * @return {Boolean} true if object is partially contained within canvas
     */
    isPartiallyOnScreen(calculate?: boolean): boolean;
    /**
     * This callback function is called every time _discardActiveObject or _setActiveObject
     * try to to deselect this object. If the function returns true, the process is cancelled
     * @return {Boolean} true to cancel selection
     */
    onDeselect(options: { e?: Event | undefined; object?: Object | undefined }): boolean;
    /**
     * This callback function is called every time _discardActiveObject or _setActiveObject
     * try to to deselect this object. If the function returns true, the process is cancelled
     * @param {Object} [options] options sent from the upper functions
     * @param {Event} [options.e] event if the process is generated by an event
     */
    onDeselect(options: { e?: Event | undefined; object?: fabric.Object | undefined }): boolean;
    /**
     * This callback function is called every time _discardActiveObject or _setActiveObject
     * try to to select this object. If the function returns true, the process is cancelled
     */
    onSelect(options: { e?: Event | undefined }): boolean;
    /**
     * Returns svg clipPath representation of an instance
     * @param {Function} [reviver] Method for further parsing of svg representation.
     * @return {String} svg representation of an instance
     */
    toClipPathSVG(reviver?: Function): string;
    /**
     * Returns svg representation of an instance
     * @param {Function} [reviver] Method for further parsing of svg representation.
     * @return {String} svg representation of an instance
     */
    toSVG(reviver?: Function): string;
    /**
     * Translates the coordinates from a set of origin to another (based on the object's dimensions)
     * @param {fabric.Point} point The point which corresponds to the originX and originY params
     * @param {String} fromOriginX Horizontal origin: 'left', 'center' or 'right'
     * @param {String} fromOriginY Vertical origin: 'top', 'center' or 'bottom'
     * @param {String} toOriginX Horizontal origin: 'left', 'center' or 'right'
     * @param {String} toOriginY Vertical origin: 'top', 'center' or 'bottom'
     * @return {fabric.Point}
     */
    translateToGivenOrigin(
        pointL: Point,
        fromOriginX: string,
        fromOriginY: string,
        toOriginX: string,
        toOriginY: string,
    ): Point;
    /*
     * Calculate object dimensions from its properties
     * @private
     * @return {Object} .x width dimension
     * @return {Object} .y height dimension
     */
    _getNonTransformedDimensions(): { x: number; y: number };
    /**
     * Returns the top, left coordinates
     * @private
     * @return {fabric.Point}
     */
    _getLeftTopCoords(): Point;
    /*
     * Calculate object bounding box dimensions from its properties scale, skew.
     * @private
     * @return {Object} .x width dimension
     * @return {Object} .y height dimension
     */
    _getTransformedDimensions(skewX?: number, skewY?: number): { x: number; y: number };

    /**
     * @private
     * @param {CanvasRenderingContext2D} ctx Context to render on
     */
    _renderFill(ctx: CanvasRenderingContext2D): void;
    /**
     * @param ctx
     * @private
     */
    _renderStroke(ctx: CanvasRenderingContext2D): void;
    /**
     * @private
     * @param {CanvasRenderingContext2D} ctx Context to render on
     */
    _removeShadow(ctx: CanvasRenderingContext2D): void;
    /**
     * @private
     * Sets line dash
     * @param {CanvasRenderingContext2D} ctx Context to set the dash line on
     * @param {Array} dashArray array representing dashes
     * @param {Function} alternative function to call if browser does not support lineDash
     */
    _setLineDash(
        ctx: CanvasRenderingContext2D,
        dashArray: number[],
        alternative?: (ctx: CanvasRenderingContext2D) => void,
    ): void;
    /**
     * @private
     * @param {CanvasRenderingContext2D} ctx Context to render on
     * @param {Object} filler fabric.Pattern or fabric.Gradient
     * @return {Object} offset.offsetX offset for text rendering
     * @return {Object} offset.offsetY offset for text rendering
     */
    _applyPatternGradientTransform(ctx: CanvasRenderingContext2D, filler: string | Pattern | Gradient): void;
    /**
     * @private
     * @param {CanvasRenderingContext2D} ctx Context to render on
     */
    _render(ctx: CanvasRenderingContext2D): void;
    /**
     * @private
     * @param {CanvasRenderingContext2D} ctx Context to render on
     */
    _renderPaintInOrder(ctx: CanvasRenderingContext2D): void;
    /**
     * Returns the instance of the control visibility set for this object.
     * @private
     * @returns {Object}
     */
    _getControlsVisibility(): {
        tl: boolean;
        tr: boolean;
        br: boolean;
        bl: boolean;
        ml: boolean;
        mt: boolean;
        mr: boolean;
        mb: boolean;
        mtr: boolean;
    };
    /**
     * Determines which corner has been clicked
     * @private
     * @param {Object} pointer The pointer indicating the mouse position
     * @return {String|Boolean} corner code (tl, tr, bl, br, etc.), or false if nothing is found
     */
    _findTargetCorner(pointer: {
        x: number;
        y: number;
    }): boolean | 'bl' | 'br' | 'mb' | 'ml' | 'mr' | 'mt' | 'tl' | 'tr' | 'mtr';
    /**
     * @private
     * @param {String} key
     * @param {*} value
     */
    _set(key: string, value: any): Object;
    /**
     * Creates fabric Object instance
     * @param {string} Class name
     * @param {fabric.Object} Original object
     * @param {Function} Callback when complete
     * @param {Object} Extra parameters for fabric.Object
     * @private
     * @return {fabric.Object}
     */
    static _fromObject(className: string, object: Object, callback?: Function, extraParam?: any): Object;
    /**
     * Defines the number of fraction digits to use when serializing object values.
     */
    static NUM_FRACTION_DIGITS?: number | undefined;
}

interface IPathOptions extends IObjectOptions {
    /**
     * Array of path points
     */
    path?: Point[] | undefined;
}
export interface Path extends Object, IPathOptions {}
export class Path {
    /**
     * Constructor
     * @param path Path data (sequence of coordinates and corresponding "command" tokens)
     * @param [options] Options object
     */
    constructor(path?: string | Point[], options?: IPathOptions);

    pathOffset: Point;

    /**
     * Returns svg clipPath representation of an instance
     * @param {Function} [reviver] Method for further parsing of svg representation.
     * @return {String} svg representation of an instance
     */
    toClipPathSVG(reviver?: Function): string;
    /**
     * Returns svg representation of an instance
     * @param [reviver] Method for further parsing of svg representation.
     * @return svg representation of an instance
     */
    toSVG(reviver?: Function): string;
    /**
     * Creates an instance of fabric.Path from an SVG <path> element
     * @param element to parse
     * @param callback Callback to invoke when an fabric.Path instance is created
     * @param [options] Options object
     */
    static fromElement(element: SVGElement, callback: Function, options?: IPathOptions): Path;
    /**
     * Creates an instance of fabric.Path from an object
     * @param callback Callback to invoke when an fabric.Path instance is created
     */
    static fromObject(object: any, callback: Function): Path;
    /**
     * List of attribute names to account for when parsing SVG element (used by `fabric.Polygon.fromElement`)
     */
    static ATTRIBUTE_NAMES: string[];
}
export interface Polygon extends IPolylineOptions {}
export class Polygon extends Polyline {
    /**
     * Constructor
     * @param points Array of points
     * @param [options] Options object
     */
    constructor(points: Array<{ x: number; y: number }>, options?: IPolylineOptions);
    /**
     * Returns Polygon instance from an SVG element
     * @param element Element to parse
     * @param [options] Options object
     */
    static fromElement(element: SVGElement, options?: IPolylineOptions): Polygon;
    /**
     * Returns fabric.Polygon instance from an object representation
     * @param object Object to create an instance from
     */
    static fromObject(object: any): Polygon;
}

interface IPolylineOptions extends IObjectOptions {
    /**
     * Points array
     */
    points?: Point[] | undefined;
}
export interface Polyline extends IPolylineOptions {}
export class Polyline extends Object {
    /**
     * Constructor
     * @param points Array of points (where each point is an object with x and y)
     * @param [options] Options object
     * @param [skipOffset] Whether points offsetting should be skipped
     */
    constructor(points: Array<{ x: number; y: number }>, options?: IPolylineOptions);

    pathOffset: Point;

    /**
     * Calculate the polygon min and max point from points array,
     * returning an object with left, top, width, height to measure the polygon size
     * @private
     * @return {Object} object.left X coordinate of the polygon leftmost point
     * @return {Object} object.top Y coordinate of the polygon topmost point
     * @return {Object} object.width distance between X coordinates of the polygon leftmost and rightmost point
     * @return {Object} object.height distance between Y coordinates of the polygon topmost and bottommost point
     */
    _calcDimensions(): { left: number; top: number; width: number; height: number };
    /**
     * List of attribute names to account for when parsing SVG element (used by `fabric.Polygon.fromElement`)
     */
    static ATTRIBUTE_NAMES: string[];
    /**
     * Returns Polyline  instance from an SVG element
     * @param element Element to parse
     * @param [options] Options object
     */
    static fromElement(element: SVGElement, options?: IPolylineOptions): Polyline;
    /**
     * Returns fabric.Polyline instance from an object representation
     * @param object Object to create an instance from
     */
    static fromObject(object: any): Polyline;
}

interface IRectOptions extends IObjectOptions {
    /**
     * Horizontal border radius
     */
    rx?: number | undefined;

    /**
     * Vertical border radius
     */
    ry?: number | undefined;
}

export interface Rect extends IRectOptions {}
export class Rect extends Object {
    /**
     * Constructor
     * @param [options] Options object
     */
    constructor(options?: IRectOptions);
    /**
     * List of attribute names to account for when parsing SVG element (used by `fabric.Rect.fromElement`)
     */
    static ATTRIBUTE_NAMES: string[];
    /**
     * Returns Rect instance from an SVG element
     * @param element Element to parse
     * @param [options] Options object
     */
    static fromElement(element: SVGElement, options?: IRectOptions): Rect;
    /**
     * Returns Rect instance from an object representation
     * @param object Object to create an instance from
     */
    static fromObject(object: any): Rect;
}

interface TextOptions extends IObjectOptions {
    type?: string | undefined;
    /**
     * Font size (in pixels)
     * @type Number
     */
    fontSize?: number | undefined;
    /**
     * Font weight (e.g. bold, normal, 400, 600, 800)
     * @type {(Number|String)}
     */
    fontWeight?: string | number | undefined;
    /**
     * Font family
     * @type String
     */
    fontFamily?: string | undefined;
    /**
     * Text decoration underline.
     * @type Boolean
     */
    underline?: boolean | undefined;
    /**
     * Text decoration overline.
     * @type Boolean
     */
    overline?: boolean | undefined;
    /**
     * Text decoration linethrough.
     * @type Boolean
     */
    linethrough?: boolean | undefined;
    /**
     * Text alignment. Possible values: "left", "center", "right", "justify",
     * "justify-left", "justify-center" or "justify-right".
     * @type String
     */
    textAlign?: string | undefined;
    /**
     * Font style . Possible values: "", "normal", "italic" or "oblique".
     * @type String
     */
    fontStyle?: '' | 'normal' | 'italic' | 'oblique' | undefined;
    /**
     * Line height
     * @type Number
     */
    lineHeight?: number | undefined;
    /**
     * Superscript schema object (minimum overlap)
     * @type {Object}
     */
    superscript?: { size: number; baseline: number } | undefined;
    /**
     * Subscript schema object (minimum overlap)
     * @type {Object}
     */
    subscript?: { size: number; baseline: number } | undefined;
    /**
     * Background color of text lines
     * @type String
     */
    textBackgroundColor?: string | undefined;
    /**
     * When defined, an object is rendered via stroke and this property specifies its color.
     * <b>Backwards incompatibility note:</b> This property was named "strokeStyle" until v1.1.6
     */
    stroke?: string | undefined;
    /**
     * Shadow object representing shadow of this shape.
     * <b>Backwards incompatibility note:</b> This property was named "textShadow" (String) until v1.2.11
     * @type fabric.Shadow
     */
    shadow?: Shadow | string | undefined;
    /**
     * additional space between characters
     * expressed in thousands of em unit
     * @type Number
     */
    charSpacing?: number | undefined;
    /**
     * Object containing character styles - top-level properties -> line numbers,
     * 2nd-level properties - charater numbers
     * @type Object
     */
    styles?: any;
    /**
     * Baseline shift, stlyes only, keep at 0 for the main text object
     * @type {Number}
     */
    deltaY?: number | undefined;
    /**
     * Text input direction. supporting RTL languages.
     */
    direction?: 'ltr' | 'rtl' | undefined;
    text?: string | undefined;
    /**
     * List of properties to consider when checking if cache needs refresh
     * @type Array
     */
    cacheProperties?: string[] | undefined;
    /**
     * List of properties to consider when checking if
     * state of an object is changed ({@link fabric.Object#hasStateChanged})
     * as well as for history (undo/redo) purposes
     * @type Array
     */
    stateProperties?: string[] | undefined;
}
export interface Text extends TextOptions {}
export class Text extends Object {
    _text: string[];
    cursorOffsetCache: { top: number; left: number };
    /**
     * Properties which when set cause object to change dimensions
     * @type Object
     * @private
     */
    _dimensionAffectingProps: string[];
    /**
     * List of lines in text object
     * @type Array<string>
     */
    textLines: string[];
    /**
     * List of grapheme lines in text object
     * @private
     * @type Array<string>
     */
    _textLines: string[][];
    /**
     * List of unwrapped grapheme lines in text object
     * @private
     * @type Array<string>
     */
    _unwrappedTextLines: string[][];
    /**
     * Use this regular expression to filter for whitespaces that is not a new line.
     * Mostly used when text is 'justify' aligned.
     * @private
     * @type RegExp
     */
    _reSpacesAndTabs: RegExp;
    /**
     * Use this regular expression to filter for whitespace that is not a new line.
     * Mostly used when text is 'justify' aligned.
     * @private
     * @type RegExp
     */
    _reSpaceAndTab: RegExp;
    /**
     * List of line widths
     * @private
     * @type Array<Number>
     */
    __lineWidths: number[];
    /**
     * List of line heights
     * @private
     * @type Array<Number>
     */
    __lineHeights: number[];
    /**
     * Contains characters bounding boxes for each line and char
     * @private
     * @type Array of char grapheme bounding boxes
     */
    __charBounds?: Array<
        Array<{ width: number; left: number; height?: number | undefined; kernedWidth?: number | undefined; deltaY?: number | undefined }>
    > | undefined;
    /**
     * Text Line proportion to font Size (in pixels)
     * @private
     * @type Number
     */
    _fontSizeMult: number;
    /**
     * @private
     * @type Number
     */
    _fontSizeFraction: number;
    /**
     * @private
     * @type boolean
     */
    __skipDimension: boolean;
    /**
     * use this size when measuring text. To avoid IE11 rounding errors
     * @type {Number}
     * @default
     * @readonly
     * @private
     */
    CACHE_FONT_SIZE: number;

    /**
     * Constructor
     * @param text Text string
     * @param [options] Options object
     */
    constructor(text: string, options?: TextOptions);

    /**
     * Return a context for measurement of text string.
     * if created it gets stored for reuse
     * @return {fabric.Text} thisArg
     */
    getMeasuringContext(): CanvasRenderingContext2D;

    /**
     * Initialize or update text dimensions.
     * Updates this.width and this.height with the proper values.
     * Does not return dimensions.
     */
    initDimensions(): void;

    /**
     * Enlarge space boxes and shift the others
     */
    enlargeSpaces(): void;

    /**
     * Detect if the text line is ended with an hard break
     * text and itext do not have wrapping, return false
     * @return {Boolean}
     */
    isEndOfWrapping(lineIndex: number): boolean;

    /**
     * Returns string representation of an instance
     */
    toString(): string;

    /**
     * Computes height of character at given position
     * @param {Number} line the line number
     * @param {Number} char the character number
     * @return {Number} fontSize of the character
     */
    getHeightOfChar(line: number, char: number): number;

    /**
     * measure a text line measuring all characters.
     * @param {Number} lineIndex line number
     * @return {Object} object.width total width of characters
     * @return {Object} object.numOfSpaces length of chars that match this._reSpacesAndTabs
     */
    measureLine(lineIndex: number): { width: number; numOfSpaces: number };

    /**
     * Calculate height of line at 'lineIndex'
     * @param {Number} lineIndex index of line to calculate
     * @return {Number}
     */
    getHeightOfLine(lineIndex: number): number;

    /**
     * Calculate text box height
     */
    calcTextHeight(): number;

    /**
     * Turns the character into a 'superior figure' (i.e. 'superscript')
     * @param {Number} start selection start
     * @param {Number} end selection end
     * @returns {fabric.Text} thisArg
     * @chainable
     */
    setSuperscript(start: number, end: number): Text;

    /**
     * Turns the character into an 'inferior figure' (i.e. 'subscript')
     * @param {Number} start selection start
     * @param {Number} end selection end
     * @returns {fabric.Text} thisArg
     * @chainable
     */
    setSubscript(start: number, end: number): Text;

    /**
     * Retrieves the value of property at given character position
     * @param {Number} lineIndex the line number
     * @param {Number} charIndex the charater number
     * @param {String} property the property name
     * @returns the value of 'property'
     */
    getValueOfPropertyAt(lineIndex: number, charIndex: number, property: string): any;

    static DEFAULT_SVG_FONT_SIZE: number;

    /**
     * Returns fabric.Text instance from an SVG element (<b>not yet implemented</b>)
     * @static
     * @memberOf fabric.Text
     * @param {SVGElement} element Element to parse
     * @param {Function} callback callback function invoked after parsing
     * @param {Object} [options] Options object
     */
    static fromElement(element: SVGElement, callback?: Function, options?: TextOptions): Text;

    /**
     * Returns fabric.Text instance from an object representation
     * @static
     * @memberOf fabric.Text
     * @param {Object} object Object to create an instance from
     * @param {Function} [callback] Callback to invoke when an fabric.Text instance is created
     */
    static fromObject(object: any, callback?: Function): Text;

    /**
     * Check if characters in a text have a value for a property
     * whose value matches the textbox's value for that property.  If so,
     * the character-level property is deleted.  If the character
     * has no other properties, then it is also deleted.  Finally,
     * if the line containing that character has no other characters
     * then it also is deleted.
     *
     * @param {string} property The property to compare between characters and text.
     */
    cleanStyle(property: string): void;

    /**
     * Returns 2d representation (lineIndex and charIndex) of cursor (or selection start)
     * @param {Number} [selectionStart] Optional index. When not given, current selectionStart is used.
     * @param {Boolean} [skipWrapping] consider the location for unwrapped lines. usefull to manage styles.
     */
    get2DCursorLocation(selectionStart?: number, skipWrapping?: boolean): { lineIndex: number; charIndex: number };

    /**
     * return a new object that contains all the style property for a character
     * the object returned is newly created
     * @param {Number} lineIndex of the line where the character is
     * @param {Number} charIndex position of the character on the line
     * @return {Object} style object
     */
    getCompleteStyleDeclaration(lineIndex: number, charIndex: number): any;

    /**
     * Gets style of a current selection/cursor (at the start position)
     * if startIndex or endIndex are not provided, slectionStart or selectionEnd will be used.
     * @param {Number} [startIndex] Start index to get styles at
     * @param {Number} [endIndex] End index to get styles at, if not specified selectionEnd or startIndex + 1
     * @param {Boolean} [complete] get full style or not
     * @return {Array} styles an array with one, zero or more Style objects
     */
    getSelectionStyles(startIndex?: number, endIndex?: number, complete?: boolean): any[];

    /**
     * Returns styles-string for svg-export
     * @param {Boolean} skipShadow a boolean to skip shadow filter output
     * @return {String}
     */
    getSvgStyles(skipShadow?: boolean): string;

    /**
     * Returns true if object has no styling or no styling in a line
     * @param {Number} lineIndex , lineIndex is on wrapped lines.
     * @return {Boolean}
     */
    isEmptyStyles(lineIndex: number): boolean;

    /**
     * Remove a style property or properties from all individual character styles
     * in a text object.  Deletes the character style object if it contains no other style
     * props.  Deletes a line style object if it contains no other character styles.
     *
     * @param {String} props The property to remove from character styles.
     */
    removeStyle(property: string): void;

    /**
     * Sets style of a current selection, if no selection exist, do not set anything.
     * @param {Object} [styles] Styles object
     * @param {Number} [startIndex] Start index to get styles at
     * @param {Number} [endIndex] End index to get styles at, if not specified selectionEnd or startIndex + 1
     * @return {fabric.IText} thisArg
     * @chainable
     */
    setSelectionStyles(styles: any, startIndex?: number, endIndex?: number): Text;

    /**
     * Returns true if object has a style property or has it ina specified line
     * @param {Number} lineIndex
     * @return {Boolean}
     */
    styleHas(property: string, lineIndex?: number): boolean;

    /**
     * Measure a single line given its index. Used to calculate the initial
     * text bounding box. The values are calculated and stored in __lineWidths cache.
     * @private
     * @param {Number} lineIndex line number
     * @return {Number} Line width
     */
    getLineWidth(lineIndex: number): number;

    /**
     * @private
     * @param {Number} lineIndex index text line
     * @return {Number} Line left offset
     */
    _getLineLeftOffset(lineIndex: number): number;

    /**
     * apply all the character style to canvas for rendering
     * @private
     * @param {String} _char
     * @param {CanvasRenderingContext2D} ctx Context to render on
     * @param {Number} lineIndex
     * @param {Number} charIndex
     * @param {Object} [decl]
     */
    _applyCharStyles(
        method: string,
        ctx: CanvasRenderingContext2D,
        lineIndex: number,
        charIndex: number,
        styleDeclaration: any,
    ): void;

    /**
     * get the reference, not a clone, of the style object for a given character
     * @param {Number} lineIndex
     * @param {Number} charIndex
     * @return {Object} style object
     */
    _getStyleDeclaration(lineIndex: number, charIndex: number): any;

    /**
     * Generate an object that translates the style object so that it is
     * broken up by visual lines (new lines and automatic wrapping).
     * The original text styles object is broken up by actual lines (new lines only),
     * which is only sufficient for Text / IText
     * @private
     */
    _generateStyleMap(textInfo: {
        _unwrappedLines: string[];
        lines: string[];
        graphemeText: string[];
        graphemeLines: string[];
    }): { [s: number]: { line: number; offset: number } };

    /**
     * @private
     * Gets the width of character spacing
     */
    _getWidthOfCharSpacing(): number;

    /**
     * measure and return the width of a single character.
     * possibly overridden to accommodate different measure logic or
     * to hook some external lib for character measurement
     * @private
     * @param {String} char to be measured
     * @param {Object} charStyle style of char to be measured
     * @param {String} [previousChar] previous char
     * @param {Object} [prevCharStyle] style of previous char
     * @return {Object} object contained char width anf kerned width
     */
    _measureChar(
        _char: string,
        charStyle: any,
        previousChar: string,
        prevCharStyle: any,
    ): { width: number; kernedWidth: number };

    /**
     * @private
     * @param {String} method
     * @param {CanvasRenderingContext2D} ctx Context to render on
     * @param {String} line Content of the line
     * @param {Number} left
     * @param {Number} top
     * @param {Number} lineIndex
     * @param {Number} charOffset
     */
    _renderChars(
        method: string,
        ctx: CanvasRenderingContext2D,
        line: string,
        left: number,
        top: number,
        lineIndex: number,
    ): void;

    /**
     * @private
     * @param {String} method
     * @param {CanvasRenderingContext2D} ctx Context to render on
     * @param {Number} lineIndex
     * @param {Number} charIndex
     * @param {String} _char
     * @param {Number} left Left coordinate
     * @param {Number} top Top coordinate
     * @param {Number} lineHeight Height of the line
     */
    _renderChar(
        method: string,
        ctx: CanvasRenderingContext2D,
        lineIndex: number,
        charIndex: number,
        _char: string,
        left: number,
        top: number,
    ): void;

    /**
     * @private
     * @param {String} method Method name ("fillText" or "strokeText")
     * @param {CanvasRenderingContext2D} ctx Context to render on
     * @param {Array} line Text to render
     * @param {Number} left Left position of text
     * @param {Number} top Top position of text
     * @param {Number} lineIndex Index of a line in a text
     */
    _renderTextLine(
        method: string,
        ctx: CanvasRenderingContext2D,
        line: string[],
        left: number,
        top: number,
        lineIndex: number,
    ): void;

    /**
     * @private
     * @param {CanvasRenderingContext2D} ctx Context to render on
     */
    _renderText(ctx: CanvasRenderingContext2D): void;

    /**
     * @private
     */
    _clearCache(): void;

    /**
     * Divides text into lines of text and lines of graphemes.
     * @private
     * @returns {Object} Lines and text in the text
     */
    _splitText(): { _unwrappedLines: string[]; lines: string[]; graphemeText: string[]; graphemeLines: string[] };

    /**
     * @private
     * @param {Object} prevStyle
     * @param {Object} thisStyle
     */
    _hasStyleChanged(prevStyle: any, thisStyle: any): boolean;

    /**
     * Set the font parameter of the context with the object properties or with charStyle
     * @private
     * @param {CanvasRenderingContext2D} ctx Context to render on
     * @param {Object} [charStyle] object with font style properties
     * @param {String} [charStyle.fontFamily] Font Family
     * @param {Number} [charStyle.fontSize] Font size in pixels. ( without px suffix )
     * @param {String} [charStyle.fontWeight] Font weight
     * @param {String} [charStyle.fontStyle] Font style (italic|normal)
     */
    _setTextStyles(
        ctx: CanvasRenderingContext2D,
        charStyle?: { fontFamily: string; fontSize: number; fontWieght: string; fontStyle: string },
        forMeasuring?: boolean,
    ): void;

    /**
     * @private
     * @param {String} method Method name ("fillText" or "strokeText")
     * @param {CanvasRenderingContext2D} ctx Context to render on
     * @param {String} line Text to render
     * @param {Number} left Left position of text
     * @param {Number} top Top position of text
     * @param {Number} lineIndex Index of a line in a text
     */
    _renderTextLine(
        method: string,
        ctx: CanvasRenderingContext2D,
        line: string,
        left: number,
        top: number,
        lineIndex: number,
    ): void;

    /**
     * @private
     */
    _shouldClearDimensionCache(): boolean;
}
interface ITextOptions extends TextOptions {
    /**
     * Index where text selection starts (or where cursor is when there is no selection)
     * @type Number
     */
    selectionStart?: number | undefined;
    /**
     * Index where text selection ends
     * @type Number
     */
    selectionEnd?: number | undefined;
    /**
     * Color of text selection
     * @type String
     */
    selectionColor?: string | undefined;
    /**
     * Indicates whether text is selected
     * @type Boolean
     */
    selected?: boolean | undefined;
    /**
     * Indicates whether text is in editing mode
     * @type Boolean
     */
    isEditing?: boolean | undefined;
    /**
     * Indicates whether a text can be edited
     * @type Boolean
     */
    editable?: boolean | undefined;
    /**
     * Border color of text object while it's in editing mode
     * @type String
     */
    editingBorderColor?: string | undefined;
    /**
     * Width of cursor (in px)
     * @type Number
     */
    cursorWidth?: number | undefined;
    /**
     * Color of default cursor (when not overwritten by character style)
     * @type String
     */
    cursorColor?: string | undefined;
    /**
     * Delay between cursor blink (in ms)
     * @type Number
     */
    cursorDelay?: number | undefined;
    /**
     * Duration of cursor fadein (in ms)
     * @type Number
     */
    cursorDuration?: number | undefined;
    /**
     * Indicates whether internal text char widths can be cached
     * @type Boolean
     */
    caching?: boolean | undefined;
    /**
     * Helps determining when the text is in composition, so that the cursor
     * rendering is altered.
     */
    inCompositionMode?: boolean | undefined;
    path?: string | undefined;
    useNative?: boolean | undefined;
    /**
     * For functionalities on keyDown + ctrl || cmd
     */
    ctrlKeysMapDown?: any;
    /**
     * For functionalities on keyUp + ctrl || cmd
     */
    ctrlKeysMapUp?: any;
    /**
     * For functionalities on keyDown
     * Map a special key to a function of the instance/prototype
     * If you need different behaviour for ESC or TAB or arrows, you have to change
     * this map setting the name of a function that you build on the fabric.Itext or
     * your prototype.
     * the map change will affect all Instances unless you need for only some text Instances
     * in that case you have to clone this object and assign your Instance.
     * this.keysMap = fabric.util.object.clone(this.keysMap);
     * The function must be in fabric.Itext.prototype.myFunction And will receive event as args[0]
     */
    keysMap?: any;
    /**
     * Exposes underlying hidden text area
     */
    hiddenTextarea?: HTMLTextAreaElement | undefined;
}
export interface IText extends ITextOptions {}
export class IText extends Text {
    fromPaste: boolean;
    /**
     * @private
     */
    _currentCursorOpacity: number;
    /**
     * @private
     */
    _reSpace: RegExp;
    /**
     * Constructor
     * @param text Text string
     * @param [options] Options object
     */
    constructor(text: string, options?: ITextOptions);
    /**
     * Sets selection start (left boundary of a selection)
     * @param {Number} index Index to set selection start to
     */
    setSelectionStart(index: number): void;
    /**
     * Sets selection end (right boundary of a selection)
     * @param {Number} index Index to set selection end to
     */
    setSelectionEnd(index: number): void;
    /**
     * Prepare and clean the contextTop
     */
    clearContextTop(skipRestore?: boolean): void;
    /**
     * Renders cursor or selection (depending on what exists)
     */
    renderCursorOrSelection(): void;
    /**
     * Renders cursor
     * @param {Object} boundaries
     * @param {CanvasRenderingContext2D} ctx transformed context to draw on
     */
    renderCursor(boundaries: any, ctx: CanvasRenderingContext2D): void;
    /**
     * Renders text selection
     * @param {Object} boundaries Object with left/top/leftOffset/topOffset
     * @param {CanvasRenderingContext2D} ctx transformed context to draw on
     */
    renderSelection(boundaries: any, ctx: CanvasRenderingContext2D): void;
    /**
     * High level function to know the height of the cursor.
     * the currentChar is the one that precedes the cursor
     * Returns fontSize of char at the current cursor
     * @return {Number} Character font size
     */
    getCurrentCharFontSize(): number;
    /**
     * High level function to know the color of the cursor.
     * the currentChar is the one that precedes the cursor
     * Returns color (fill) of char at the current cursor
     * @return {String} Character color (fill)
     */
    getCurrentCharColor(): string;
    /**
     * Returns fabric.IText instance from an object representation
     * @static
     * @memberOf fabric.IText
     * @param {Object} object Object to create an instance from
     * @param {function} [callback] invoked with new instance as argument
     */
    static fromObject(object: any, callback?: Function): IText;
    /**
     * Initializes all the interactive behavior of IText
     */
    initBehavior(): void;
    /**
     * Initializes "added" event handler
     */
    initAddedHandler(): void;
    /**
     * Initializes delayed cursor
     */
    initDelayedCursor(): void;
    /**
     * Aborts cursor animation and clears all timeouts
     */
    abortCursorAnimation(): void;
    /**
     * Selects entire text
     * @return {fabric.IText} thisArg
     * @chainable
     */
    selectAll(): IText;
    /**
     * Returns selected text
     * @return {String}
     */
    getSelectedText(): string;
    /**
     * Find new selection index representing start of current word according to current selection index
     * @param {Number} startFrom Surrent selection index
     * @return {Number} New selection index
     */
    findWordBoundaryLeft(startFrom: number): number;
    /**
     * Find new selection index representing end of current word according to current selection index
     * @param {Number} startFrom Current selection index
     * @return {Number} New selection index
     */
    findWordBoundaryRight(startFrom: number): number;
    /**
     * Find new selection index representing start of current line according to current selection index
     * @param {Number} startFrom Current selection index
     * @return {Number} New selection index
     */
    findLineBoundaryLeft(startFrom: number): number;
    /**
     * Find new selection index representing end of current line according to current selection index
     * @param {Number} startFrom Current selection index
     * @return {Number} New selection index
     */
    findLineBoundaryRight(startFrom: number): number;
    /**
     * Finds index corresponding to beginning or end of a word
     * @param {Number} selectionStart Index of a character
     * @param {Number} direction 1 or -1
     * @return {Number} Index of the beginning or end of a word
     */
    searchWordBoundary(selectionStart: number, direction: number): number;
    /**
     * Selects a word based on the index
     * @param {Number} selectionStart Index of a character
     */
    selectWord(selectionStart: number): void;
    /**
     * Selects a line based on the index
     * @param {Number} selectionStart Index of a character
     * @return {fabric.IText} thisArg
     * @chainable
     */
    selectLine(selectionStart: number): IText;
    /**
     * Enters editing state
     * @return {fabric.IText} thisArg
     * @chainable
     */
    enterEditing(e?: MouseEvent): IText;
    /**
     * Initializes "mousemove" event handler
     */
    initMouseMoveHandler(): void;
    /**
     * Exits from editing state
     * @return {fabric.IText} thisArg
     * @chainable
     */
    exitEditing(): IText;
    /**
     * remove and reflow a style block from start to end.
     * @param {Number} start linear start position for removal (included in removal)
     * @param {Number} end linear end position for removal ( excluded from removal )
     */
    removeStyleFromTo(start: number, end: number): void;
    /**
     * Shifts line styles up or down
     * @param {Number} lineIndex Index of a line
     * @param {Number} offset Can any number?
     */
    shiftLineStyles(lineIndex: number, offset: number): void;
    /**
     * Inserts new style object
     * @param {Number} lineIndex Index of a line
     * @param {Number} charIndex Index of a char
     * @param {Number} qty number of lines to add
     * @param {Array} copiedStyle Array of objects styles
     */
    insertNewlineStyleObject(lineIndex: number, charIndex: number, qty: number, copiedStyle: any[]): void;
    /**
     * Inserts style object for a given line/char index
     * @param {Number} lineIndex Index of a line
     * @param {Number} charIndex Index of a char
     * @param {Number} quantity number Style object to insert, if given
     * @param {Array} copiedStyle array of style objecs
     */
    insertCharStyleObject(lineIndex: number, charIndex: number, quantity: number, copiedStyle: any[]): void;
    /**
     * Inserts style object(s)
     * @param {Array} insertedText Characters at the location where style is inserted
     * @param {Number} start cursor index for inserting style
     * @param {Array} [copiedStyle] array of style objects to insert.
     */
    insertNewStyleBlock(insertedText: any[], start: number, copiedStyle?: any[]): void;
    /**
     * Set the selectionStart and selectionEnd according to the ne postion of cursor
     * mimic the key - mouse navigation when shift is pressed.
     */
    setSelectionStartEndWithShift(start: number, end: number, newSelection: number): void;
    /**
     * Copies selected text
     */
    copy(): void;
    /**
     * convert from fabric to textarea values
     */
    fromGraphemeToStringSelection(
        start: number,
        end: number,
        _text: string,
    ): { selectionStart: number; selectionEnd: number };
    /**
     * convert from textarea to grapheme indexes
     */
    fromStringToGraphemeSelection(
        start: number,
        end: number,
        text: string,
    ): { selectionStart: number; selectionEnd: number };
    /**
     * Gets start offset of a selection
     * @param {Event} e Event object
     * @param {Boolean} isRight
     * @return {Number}
     */
    getDownCursorOffset(e: Event, isRight?: boolean): number;
    /**
     * Returns index of a character corresponding to where an object was clicked
     * @param {Event} e Event object
     * @return {Number} Index of a character
     */
    getSelectionStartFromPointer(e: Event): number;
    /**
     * @param {Event} e Event object
     * @param {Boolean} isRight
     * @return {Number}
     */
    getUpCursorOffset(e: Event, isRight?: boolean): number;
    /**
     * Initializes double and triple click event handlers
     */
    initClicks(): void;
    /**
     * Initializes event handlers related to cursor or selection
     */
    initCursorSelectionHandlers(): void;
    /**
     * Initializes "dbclick" event handler
     */
    initDoubleClickSimulation(): void;
    /**
     * Initializes hidden textarea (needed to bring up keyboard in iOS)
     */
    initHiddenTextarea(): void;
    /**
     * Initializes "mousedown" event handler
     */
    initMousedownHandler(): void;
    /**
     * Initializes "mouseup" event handler
     */
    initMouseupHandler(): void;
    /**
     * insert characters at start position, before start position.
     * start  equal 1 it means the text get inserted between actual grapheme 0 and 1
     * if style array is provided, it must be as the same length of text in graphemes
     * if end is provided and is bigger than start, old text is replaced.
     * start/end ar per grapheme position in _text array.
     *
     * @param {String} text text to insert
     * @param {Array} style array of style objects
     * @param {Number} start
     * @param {Number} end default to start + 1
     */
    insertChars(text: string, style: any[], start: number, end: number): void;
    /**
     * Moves cursor down
     * @param {Event} e Event object
     */
    moveCursorDown(e: Event): void;
    /**
     * Moves cursor left
     * @param {Event} e Event object
     */
    moveCursorLeft(e: Event): void;
    /**
     * Moves cursor left without keeping selection
     * @param {Event} e
     */
    moveCursorLeftWithoutShift(e: Event): void;
    /**
     * Moves cursor left while keeping selection
     * @param {Event} e
     */
    moveCursorLeftWithShift(e: Event): void;
    /**
     * Moves cursor right
     * @param {Event} e Event object
     */
    moveCursorRight(e: Event): void;
    /**
     * Moves cursor right without keeping selection
     * @param {Event} e Event object
     */
    moveCursorRightWithoutShift(e: Event): void;
    /**
     * Moves cursor right while keeping selection
     * @param {Event} e
     */
    moveCursorRightWithShift(e: Event): void;
    /**
     * Moves cursor up
     * @param {Event} e Event object
     */
    moveCursorUp(e: Event): void;
    /**
     * Moves cursor up without shift
     * @param {Number} offset
     */
    moveCursorWithoutShift(offset: number): void;
    /**
     * Moves cursor with shift
     * @param {Number} offset
     */
    moveCursorWithShift(offset: number): void;
    /**
     * Composition end
     */
    onCompositionEnd(): void;
    /**
     * Composition start
     */
    onCompositionStart(): void;
    /**
     * Handles onInput event
     * @param {Event} e Event object
     */
    onInput(e: Event): void;
    /**
     * Handles keyup event
     * @param {Event} e Event object
     */
    onKeyDown(e: Event): void;
    /**
     * Handles keyup event
     * We handle KeyUp because ie11 and edge have difficulties copy/pasting
     * if a copy/cut event fired, keyup is dismissed
     * @param {Event} e Event object
     */
    onKeyUp(e: Event): void;
    /**
     * Pastes text
     */
    paste(): void;
    /**
     * Removes characters from start/end
     * start/end ar per grapheme position in _text array.
     *
     * @param {Number} start
     * @param {Number} end default to start + 1
     */
    removeChars(start: number, end: number): void;
    /**
     * Changes cursor location in a text depending on passed pointer (x/y) object
     * @param {Event} e Event object
     */
    setCursorByClick(e: Event): void;
    /**
     * @private
     */
    _getNewSelectionStartFromOffset(
        mouseOffset: { x: number; y: number },
        prevWidth: number,
        width: number,
        index: number,
        jlen: number,
    ): number;
    /**
     * @private
     * @param {CanvasRenderingContext2D} ctx Context to render on
     */
    _render(ctx: CanvasRenderingContext2D): void;
    /**
     * @private
     */
    _updateTextarea(): void;
    /**
     * @private
     */
    updateFromTextArea(): void;
    /**
     * Default event handler for the basic functionalities needed on _mouseDown
     * can be overridden to do something different.
     * Scope of this implementation is: find the click position, set selectionStart
     * find selectionEnd, initialize the drawing of either cursor or selection area
     * @private
     * @param {Object} Options (seems to have an event `e` parameter
     */
    _mouseDownHandler(options: any): void;
    /**
     * @private
     * @return {Object} style contains style for hiddenTextarea
     */
    _calcTextareaPosition(): { left: string; top: string; fontSize: string; charHeight: number };
}
interface ITextboxOptions extends ITextOptions {
    /**
     * Minimum width of textbox, in pixels.
     * @type Number
     */
    minWidth?: number | undefined;
    /**
     * Minimum calculated width of a textbox, in pixels.
     * fixed to 2 so that an empty textbox cannot go to 0
     * and is still selectable without text.
     * @type Number
     */
    dynamicMinWidth?: number | undefined;
    /**
     * Override standard Object class values
     */
    lockScalingFlip?: boolean | undefined;
    /**
     * Override standard Object class values
     * Textbox needs this on false
     */
    noScaleCache?: boolean | undefined;
    /**
     * Use this boolean property in order to split strings that have no white space concept.
     * this is a cheap way to help with chinese/japaense
     * @type Boolean
     * @since 2.6.0
     */
    splitByGrapheme?: boolean | undefined;
    /**
     * Is the text wrapping
     * @type Boolean
     */
    isWrapping?: boolean | undefined;
}
export interface Textbox extends ITextboxOptions {}
export class Textbox extends IText {
    /**
     * Constructor
     * @param text Text string
     * @param [options] Options object
     */
    constructor(text: string, options?: ITextboxOptions);
    /**
     * Returns true if object has a style property or has it ina specified line
     * @param {Number} lineIndex
     * @return {Boolean}
     */
    styleHas(property: string, lineIndex: number): boolean;
    /**
     * Returns true if object has no styling or no styling in a line
     * @param {Number} lineIndex , lineIndex is on wrapped lines.
     * @return {Boolean}
     */
    isEmptyStyles(lineIndex: number): boolean;
    /**
     * Detect if the text line is ended with an hard break
     * text and itext do not have wrapping, return false
     * @param {Number} lineIndex text to split
     * @return {Boolean}
     */
    isEndOfWrapping(lineIndex: number): boolean;
    /**
     * Returns larger of min width and dynamic min width
     * @return {Number}
     */
    getMinWidth(): number;
    /**
     * Use this regular expression to split strings in breakable lines
     * @private
     * @type RegExp
     */
    _wordJoiners: RegExp;
    /**
     * Helper function to measure a string of text, given its lineIndex and charIndex offset
     * it gets called when charBounds are not available yet.
     * @private
     * @param {Array} text characters
     * @param {number} lineIndex
     * @param {number} charOffset
     * @returns {number}
     */
    _measureWord(word: string[], lineIndex: number, charOffset: number): number;
    /**
     * Wraps text using the 'width' property of Textbox. First this function
     * splits text on newlines, so we preserve newlines entered by the user.
     * Then it wraps each line using the width of the Textbox by calling
     * _wrapLine().
     * @param {Array} lines The string array of text that is split into lines
     * @param {Number} desiredWidth width you want to wrap to
     * @returns {Array} Array of grapheme lines
     */
    _wrapText(lines: string[], desiredWidth: number): string[][];
    /**
     * Style objects for each line
     * Generate an object that translates the style object so that it is
     * broken up by visual lines (new lines and automatic wrapping).
     * The original text styles object is broken up by actual lines (new lines only),
     * which is only sufficient for Text / IText
     * @private
     * @type {Array} Line style { line: number, offset: number }
     */
    _styleMap?: { [s: number]: { line: number; offset: number } } | undefined;
    /**
     * Returns fabric.Textbox instance from an object representation
     * @static
     * @memberOf fabric.Textbox
     * @param {Object} object Object to create an instance from
     * @param {Function} [callback] Callback to invoke when an fabric.Textbox instance is created
     */
    static fromObject(object: any, callback?: Function): Textbox;
}
interface ITriangleOptions extends IObjectOptions {}
export class Triangle extends Object {
    /**
     * Constructor
     * @param [options] Options object
     */
    constructor(options?: ITriangleOptions);
    /**
     * Returns SVG representation of an instance
     * @param [reviver] Method for further parsing of svg representation.
     * @return svg representation of an instance
     */
    toSVG(reviver?: Function): string;
    /**
     * Returns Triangle instance from an object representation
     * @param object Object to create an instance from
     */
    static fromObject(object: any): Triangle;
}

////////////////////////////////////////////////////////////
// Filters
////////////////////////////////////////////////////////////
interface IAllFilters {
    BaseFilter: {
        /**
         * Constructor
         * @param [options] Options object
         */
        new (options?: any): IBaseFilter;
    };
    BlendColor: {
        /**
         * Constructor
         * @param [options] Options object
         */
        new (options?: { color?: string | undefined; mode?: string | undefined; alpha?: number | undefined }): IBlendColorFilter;
        /**
         * Returns filter instance from an object representation
         * @param object Object to create an instance from
         */
        fromObject(object: any): IBlendColorFilter;
    };
    BlendImage: {
        /**
         * Constructor
         * @param [options] Options object
         */
        new (options?: { image?: Image | undefined; mode?: string | undefined; alpha?: number | undefined }): IBlendImageFilter;
        /**
         * Returns filter instance from an object representation
         * @param object Object to create an instance from
         */
        fromObject(object: any): IBlendImageFilter;
    };
    Brightness: {
        new (options?: {
            /**
             * Value to brighten the image up (0..255)
             * @default 0
             */
            brightness: number;
        }): IBrightnessFilter;
        /**
         * Returns filter instance from an object representation
         * @param object Object to create an instance from
         */
        fromObject(object: any): IBrightnessFilter;
    };
    ColorMatrix: {
        new (options?: {
            /** Filter matrix */
            matrix?: number[] | undefined;
        }): IColorMatrix;
        /**
         * Returns filter instance from an object representation
         * @param object Object to create an instance from
         */
        fromObject(object: any): IColorMatrix;
    };
    Contrast: {
        /**
         * Constructor
         * @param [options] Options object
         */
        new (options?: { contrast?: number | undefined }): IContrastFilter;
        /**
         * Returns filter instance from an object representation
         * @param object Object to create an instance from
         */
        fromObject(object: any): IContrastFilter;
    };
    Convolute: {
        new (options?: {
            opaque?: boolean | undefined;
            /** Filter matrix */
            matrix?: number[] | undefined;
        }): IConvoluteFilter;
        /**
         * Returns filter instance from an object representation
         * @param object Object to create an instance from
         */
        fromObject(object: any): IConvoluteFilter;
    };
    GradientTransparency: {
        new (options?: {
            /** @default 100 */
            threshold?: number | undefined;
        }): IGradientTransparencyFilter;
        /**
         * Returns filter instance from an object representation
         * @param object Object to create an instance from
         */
        fromObject(object: any): IGradientTransparencyFilter;
    };
    Grayscale: {
        new (options?: any): IGrayscaleFilter;
        /**
         * Returns filter instance from an object representation
         * @param object Object to create an instance from
         */
        fromObject(object: any): IGrayscaleFilter;
    };
    Invert: {
        /**
         * Constructor
         * @param [options] Options object
         */
        new (options?: any): IInvertFilter;
        /**
         * Returns filter instance from an object representation
         * @param object Object to create an instance from
         */
        fromObject(object: any): IInvertFilter;
    };
    Mask: {
        new (options?: {
            /** Mask image object */
            mask?: Image | undefined;
            /**
             * Rgb channel (0, 1, 2 or 3)
             * @default 0
             */
            channel: number;
        }): IMaskFilter;
        /**
         * Returns filter instance from an object representation
         * @param object Object to create an instance from
         */
        fromObject(object: any): IMaskFilter;
    };
    Multiply: {
        new (options?: {
            /**
             * Color to multiply the image pixels with
             * @default #000000
             */
            color: string;
        }): IMultiplyFilter;
        /**
         * Returns filter instance from an object representation
         * @param object Object to create an instance from
         */
        fromObject(object: any): IMultiplyFilter;
    };
    Noise: {
        new (options?: {
            /** @default 0 */
            noise: number;
        }): INoiseFilter;
        /**
         * Returns filter instance from an object representation
         * @param object Object to create an instance from
         */
        fromObject(object: any): INoiseFilter;
    };
    Pixelate: {
        new (options?: {
            /**
             * Blocksize for pixelate
             * @default 4
             */
            blocksize?: number | undefined;
        }): IPixelateFilter;
        /**
         * Returns filter instance from an object representation
         * @param object Object to create an instance from
         */
        fromObject(object: any): IPixelateFilter;
    };
    RemoveWhite: {
        new (options?: {
            /** @default 30 */
            threshold?: number | undefined;
            /** @default 20 */
            distance?: number | undefined;
        }): IRemoveWhiteFilter;
        /**
         * Returns filter instance from an object representation
         * @param object Object to create an instance from
         */
        fromObject(object: any): IRemoveWhiteFilter;
    };
    Resize: {
        new (options?: any): IResizeFilter;
        /**
         * Returns filter instance from an object representation
         * @param object Object to create an instance from
         */
        fromObject(object: any): IResizeFilter;
    };
    Saturation: {
        /**
         * Constructor
         * @param [options] Options object
         */
        new (options?: { saturation?: number | undefined }): ISaturationFilter;
        /**
         * Returns filter instance from an object representation
         * @param object Object to create an instance from
         */
        fromObject(object: any): ISaturationFilter;
    };
    Sepia2: {
        new (options?: any): ISepia2Filter;
        /**
         * Returns filter instance from an object representation
         * @param object Object to create an instance from
         */
        fromObject(object: any): ISepia2Filter;
    };
    Sepia: {
        new (options?: any): ISepiaFilter;
        /**
         * Returns filter instance from an object representation
         * @param object Object to create an instance from
         */
        fromObject(object: any): ISepiaFilter;
    };
    Tint: {
        new (options?: {
            /**
             * Color to tint the image with
             * @default #000000
             */
            color?: string | undefined;
            /** Opacity value that controls the tint effect's transparency (0..1) */
            opacity?: number | undefined;
        }): ITintFilter;
        /**
         * Returns filter instance from an object representation
         * @param object Object to create an instance from
         */
        fromObject(object: any): ITintFilter;
    };
}
interface IBaseFilter {
    /**
     * Sets filter's properties from options
     * @param [options] Options object
     */
    setOptions(options?: any): void;
    /**
     * Returns object representation of an instance
     */
    toObject(): any;
    /**
     * Returns a JSON representation of an instance
     */
    toJSON(): string;
    /**
     * Apply the operation to a Uint8Array representing the pixels of an image.
     *
     * @param {Object} options
     * @param {ImageData} options.imageData The Uint8Array to be filtered.
     */
    applyTo2d(options: any): void;
}
interface IBlendColorFilter extends IBaseFilter {
    color?: string | undefined;
    mode?: string | undefined;
    alpha?: number | undefined;
    /**
     * Applies filter to canvas element
     * @param canvasEl Canvas element to apply filter to
     */
    applyTo(canvasEl: HTMLCanvasElement): void;
}
interface IBlendImageFilter extends IBaseFilter {
    /**
     * Applies filter to canvas element
     * @param canvasEl Canvas element to apply filter to
     */
    applyTo(canvasEl: HTMLCanvasElement): void;
}
interface IBrightnessFilter extends IBaseFilter {
    /**
     * Applies filter to canvas element
     * @param canvasEl Canvas element to apply filter to
     */
    applyTo(canvasEl: HTMLCanvasElement): void;
}
interface IColorMatrix extends IBaseFilter {
    matrix?: number[] | undefined;
    /**
     * Applies filter to canvas element
     * @param canvasEl Canvas element to apply filter to
     */
    applyTo(canvasEl: HTMLCanvasElement): void;
}
interface IContrastFilter extends IBaseFilter {
    /**
     * Applies filter to canvas element
     * @param canvasEl Canvas element to apply filter to
     */
    applyTo(canvasEl: HTMLCanvasElement): void;
}
interface IConvoluteFilter extends IBaseFilter {
    /**
     * Applies filter to canvas element
     * @param canvasEl Canvas element to apply filter to
     */
    applyTo(canvasEl: HTMLCanvasElement): void;
}
interface IGradientTransparencyFilter extends IBaseFilter {
    /**
     * Applies filter to canvas element
     * @param canvasEl Canvas element to apply filter to
     */
    applyTo(canvasEl: HTMLCanvasElement): void;
}
interface IGrayscaleFilter extends IBaseFilter {
    /**
     * Applies filter to canvas element
     * @param canvasEl Canvas element to apply filter to
     */
    applyTo(canvasEl: HTMLCanvasElement): void;
}
interface IInvertFilter extends IBaseFilter {
    /**
     * Applies filter to canvas element
     * @param canvasEl Canvas element to apply filter to
     */
    applyTo(canvasEl: HTMLCanvasElement): void;
}
interface IMaskFilter extends IBaseFilter {
    /**
     * Applies filter to canvas element
     * @param canvasEl Canvas element to apply filter to
     */
    applyTo(canvasEl: HTMLCanvasElement): void;
}
interface IMultiplyFilter extends IBaseFilter {
    /**
     * Applies filter to canvas element
     * @param canvasEl Canvas element to apply filter to
     */
    applyTo(canvasEl: HTMLCanvasElement): void;
}
interface INoiseFilter extends IBaseFilter {
    /**
     * Applies filter to canvas element
     * @param canvasEl Canvas element to apply filter to
     */
    applyTo(canvasEl: HTMLCanvasElement): void;
}
interface IPixelateFilter extends IBaseFilter {
    /**
     * Applies filter to canvas element
     * @param canvasEl Canvas element to apply filter to
     */
    applyTo(canvasEl: HTMLCanvasElement): void;
}
interface IRemoveWhiteFilter extends IBaseFilter {
    /**
     * Applies filter to canvas element
     * @param canvasEl Canvas element to apply filter to
     */
    applyTo(canvasEl: HTMLCanvasElement): void;
}
interface IResizeFilter extends IBaseFilter {
    /**
     * Resize type
     */
    resizeType: string;

    /**
     * Scale factor for resizing, x axis
     */
    scaleX: number;

    /**
     * Scale factor for resizing, y axis
     */
    scaleY: number;

    /**
     * LanczosLobes parameter for lanczos filter
     */
    lanczosLobes: number;
    /**
     * Applies filter to canvas element
     * @param canvasEl Canvas element to apply filter to
     */
    applyTo(canvasEl: HTMLCanvasElement): void;
}
interface ISaturationFilter extends IBaseFilter {
    /**
     * Applies filter to canvas element
     * @param canvasEl Canvas element to apply filter to
     */
    applyTo(canvasEl: HTMLCanvasElement): void;
}
interface ISepiaFilter extends IBaseFilter {
    /**
     * Applies filter to canvas element
     * @param canvasEl Canvas element to apply filter to
     */
    applyTo(canvasEl: HTMLCanvasElement): void;
}
interface ISepia2Filter extends IBaseFilter {
    /**
     * Applies filter to canvas element
     * @param canvasEl Canvas element to apply filter to
     */
    applyTo(canvasEl: HTMLCanvasElement): void;
}
interface ITintFilter extends IBaseFilter {
    /**
     * Applies filter to canvas element
     * @param canvasEl Canvas element to apply filter to
     */
    applyTo(canvasEl: HTMLCanvasElement): void;
}

////////////////////////////////////////////////////////////
// Brushes
////////////////////////////////////////////////////////////
export class BaseBrush {
    /**
     * Color of a brush
     */
    color: string;

    /**
     * Width of a brush
     */
    width: number;

    /**
     * Shadow object representing shadow of this shape.
     * <b>Backwards incompatibility note:</b> This property replaces "shadowColor" (String), "shadowOffsetX" (Number),
     * "shadowOffsetY" (Number) and "shadowBlur" (Number) since v1.2.12
     */
    shadow: Shadow | string;
    /**
     * Line endings style of a brush (one of "butt", "round", "square")
     */
    strokeLineCap: string;

    /**
     * Corner style of a brush (one of "bevil", "round", "miter")
     */
    strokeLineJoin: string;

    /**
     * Stroke Dash Array.
     */
    strokeDashArray: any[];
}

export class CircleBrush extends BaseBrush {
    /**
     * Width of a brush
     */
    width: number;
    /**
     * Invoked inside on mouse down and mouse move
     */
    drawDot(pointer: any): void;

    /**
     * @return Just added pointer point
     */
    addPoint(pointer: any): Point;
}

export class SprayBrush extends BaseBrush {
    /**
     * Width of a brush
     */
    width: number;
    /**
     * Density of a spray (number of dots per chunk)
     */
    density: number;

    /**
     * Width of spray dots
     */
    dotWidth: number;
    /**
     * Width variance of spray dots
     */
    dotWidthVariance: number;

    /**
     * Whether opacity of a dot should be random
     */
    randomOpacity: boolean;
    /**
     * Whether overlapping dots (rectangles) should be removed (for performance reasons)
     */
    optimizeOverlapping: boolean;

    addSprayChunk(pointer: any): void;
}
export class PatternBrush extends PencilBrush {
    getPatternSrc(): HTMLCanvasElement;

    getPatternSrcFunction(): string;

    /**
     * Creates "pattern" instance property
     */
    getPattern(): any;
    /**
     * Creates path
     */
    createPath(pathData: string): Path;
}
export class PencilBrush extends BaseBrush {
    /**
     * Constructor
     * @param {Canvas} canvas
    */
    constructor(canvas: Canvas);
    /**
     * Constructor
     * @param {Canvas} canvas
     * @return {PencilBrush} Instance of a pencil brush
    */
    initialize(canvas: Canvas): PencilBrush;

    /**
     * Converts points to SVG path
     * @param points Array of points
     */
    convertPointsToSVGPath(points: Array<{ x: number; y: number }>, minX?: number, minY?: number): string[];

    /**
     * Creates fabric.Path object to add on canvas
     * @param pathData Path data
     */
    createPath(pathData: string): Path;
}

///////////////////////////////////////////////////////////////////////////////
// Fabric util Interface
//////////////////////////////////////////////////////////////////////////////
interface IUtilAnimationOptions {
    /**
     * Starting value
     */
    startValue?: number | undefined;
    /**
     * Ending value
     */
    endValue?: number | undefined;
    /**
     * Value to modify the property by
     */
    byValue?: number | undefined;
    /**
     * Duration of change (in ms)
     */
    duration?: number | undefined;
    /**
     * Callback; invoked on every value change
     */
    onChange?: ((value: number) => void) | undefined;
    /**
     * Callback; invoked when value change is completed
     */
    onComplete?: Function | undefined;
    /**
     * Easing function
     */
    easing?: Function | undefined;
}
interface IUtilAnimation {
    /**
     * Changes value from one to another within certain period of time, invoking callbacks as value is being changed.
     * @param [options] Animation options
     */
    animate(options?: IUtilAnimationOptions): void;
    /**
     * requestAnimationFrame polyfill based on http://paulirish.com/2011/requestanimationframe-for-smart-animating/
     * In order to get a precise start time, `requestAnimFrame` should be called as an entry into the method
     * @param callback Callback to invoke
     */
    requestAnimFrame(callback: Function): void;
}

type IUtilAminEaseFunction = (t: number, b: number, c: number, d: number) => number;

interface IUtilAnimEase {
    easeInBack: IUtilAminEaseFunction;
    easeInBounce: IUtilAminEaseFunction;
    easeInCirc: IUtilAminEaseFunction;
    easeInCubic: IUtilAminEaseFunction;
    easeInElastic: IUtilAminEaseFunction;
    easeInExpo: IUtilAminEaseFunction;
    easeInOutBack: IUtilAminEaseFunction;
    easeInOutBounce: IUtilAminEaseFunction;
    easeInOutCirc: IUtilAminEaseFunction;
    easeInOutCubic: IUtilAminEaseFunction;
    easeInOutElastic: IUtilAminEaseFunction;
    easeInOutExpo: IUtilAminEaseFunction;
    easeInOutQuad: IUtilAminEaseFunction;
    easeInOutQuart: IUtilAminEaseFunction;
    easeInOutQuint: IUtilAminEaseFunction;
    easeInOutSine: IUtilAminEaseFunction;
    easeInQuad: IUtilAminEaseFunction;
    easeInQuart: IUtilAminEaseFunction;
    easeInQuint: IUtilAminEaseFunction;
    easeInSine: IUtilAminEaseFunction;
    easeOutBack: IUtilAminEaseFunction;
    easeOutBounce: IUtilAminEaseFunction;
    easeOutCirc: IUtilAminEaseFunction;
    easeOutCubic: IUtilAminEaseFunction;
    easeOutElastic: IUtilAminEaseFunction;
    easeOutExpo: IUtilAminEaseFunction;
    easeOutQuad: IUtilAminEaseFunction;
    easeOutQuart: IUtilAminEaseFunction;
    easeOutQuint: IUtilAminEaseFunction;
    easeOutSine: IUtilAminEaseFunction;
}

interface IUtilImage {
    setImageSmoothing(ctx: CanvasRenderingContext2D, value: any): void;
}

interface IUtilArc {
    /**
     * Draws arc
     */
    drawArc(ctx: CanvasRenderingContext2D, fx: number, fy: number, coords: number[]): void;
    /**
     * Calculate bounding box of a elliptic-arc
     * @param fx start point of arc
     * @param rx horizontal radius
     * @param ry vertical radius
     * @param rot angle of horizontal axe
     * @param large 1 or 0, whatever the arc is the big or the small on the 2 points
     * @param sweep 1 or 0, 1 clockwise or counterclockwise direction
     * @param tx end point of arc
     */
    getBoundsOfArc(
        fx: number,
        fy: number,
        rx: number,
        ry: number,
        rot: number,
        large: number,
        sweep: number,
        tx: number,
        ty: number,
    ): Point[];
    /**
     * Calculate bounding box of a beziercurve
     * @param x0 starting point
     * @param x1 first control point
     * @param x2 secondo control point
     * @param x3 end of beizer
     */
    getBoundsOfCurve(
        x0: number,
        y0: number,
        x1: number,
        y1: number,
        x2: number,
        y2: number,
        x3: number,
        y3: number,
    ): Point[];
}

interface IUtilDomEvent {
    /**
     * Cross-browser wrapper for getting event's coordinates
     * @param event Event object
     * @param upperCanvasEl &lt;canvas> element on which object selection is drawn
     */
    getPointer(event: Event, upperCanvasEl: HTMLCanvasElement): Point;

    /**
     * Adds an event listener to an element
     */
    addListener(element: HTMLElement, eventName: string, handler: Function): void;

    /**
     * Removes an event listener from an element
     */
    removeListener(element: HTMLElement, eventName: string, handler: Function): void;
}

interface IUtilDomMisc {
    /**
     * Takes id and returns an element with that id (if one exists in a document)
     */
    getById(id: string | HTMLElement): HTMLElement;
    /**
     * Converts an array-like object (e.g. arguments or NodeList) to an array
     */
    toArray(arrayLike: any): any[];
    /**
     * Creates specified element with specified attributes
     * @param tagName Type of an element to create
     * @param [attributes] Attributes to set on an element
     * @return Newly created element
     */
    makeElement(tagName: string, attributes?: any): HTMLElement;
    /**
     * Adds class to an element
     * @param element Element to add class to
     * @param className Class to add to an element
     */
    addClass(element: HTMLElement, classname: string): void;
    /**
     * Wraps element with another element
     * @param element Element to wrap
     * @param wrapper Element to wrap with
     * @param [attributes] Attributes to set on a wrapper
     */
    wrapElement(element: HTMLElement, wrapper: HTMLElement | string, attributes?: any): HTMLElement;
    /**
     * Returns element scroll offsets
     * @param element Element to operate on
     */
    getScrollLeftTop(element: HTMLElement): { left: number; top: number };
    /**
     * Returns offset for a given element
     * @param element Element to get offset for
     */
    getElementOffset(element: HTMLElement): { left: number; top: number };
    /**
     * Returns style attribute value of a given element
     * @param element Element to get style attribute for
     * @param attr Style attribute to get for element
     */
    getElementStyle(elment: HTMLElement, attr: string): string;
    /**
     * Inserts a script element with a given url into a document; invokes callback, when that script is finished loading
     * @param url URL of a script to load
     * @param callback Callback to execute when script is finished loading
     */
    getScript(url: string, callback: Function): void;
    /**
     * Makes element unselectable
     * @param element Element to make unselectable
     */
    makeElementUnselectable(element: HTMLElement): HTMLElement;
    /**
     * Makes element selectable
     * @param element Element to make selectable
     */
    makeElementSelectable(element: HTMLElement): HTMLElement;
}

interface IUtilDomRequest {
    /**
     * Cross-browser abstraction for sending XMLHttpRequest
     * @param url URL to send XMLHttpRequest to
     */
    request(
        url: string,
        options?: {
            /** @default "GET" */
            method?: string | undefined;
            /** Callback to invoke when request is completed */
            onComplete: Function;
        },
    ): XMLHttpRequest;
}

interface IUtilDomStyle {
    /**
     * Cross-browser wrapper for setting element's style
     */
    setStyle(element: HTMLElement, styles: any): HTMLElement;
}

interface IUtilArray {
    /**
     * Invokes method on all items in a given array
     * @param array Array to iterate over
     * @param method Name of a method to invoke
     */
    invoke(array: any[], method: string): any[];
    /**
     * Finds minimum value in array (not necessarily "first" one)
     * @param array Array to iterate over
     */
    min(array: any[], byProperty: string): any;
    /**
     * Finds maximum value in array (not necessarily "first" one)
     * @param array Array to iterate over
     */
    max(array: any[], byProperty: string): any;
}

interface IUtilClass {
    /**
     * Helper for creation of "classes".
     * @param [parent] optional "Class" to inherit from
     * @param [properties] Properties shared by all instances of this class
     *                  (be careful modifying objects defined here as this would affect all instances)
     */
    createClass(parent: Function, properties?: any): any;
    /**
     * Helper for creation of "classes".
     * @param [properties] Properties shared by all instances of this class
     *                  (be careful modifying objects defined here as this would affect all instances)
     */
    createClass(properties?: any): any;
}

interface IUtilObject {
    /**
     * Copies all enumerable properties of one object to another
     * @param destination Where to copy to
     * @param source Where to copy from
     */
    extend(destination: any, source: any): any;

    /**
     * Creates an empty object and copies all enumerable properties of another object to it
     * @param object Object to clone
     */
    clone(object: any): any;
}

interface IUtilString {
    /**
     * Camelizes a string
     * @param string String to camelize
     */
    camelize(string: string): string;

    /**
     * Capitalizes a string
     * @param string String to capitalize
     * @param [firstLetterOnly] If true only first letter is capitalized
     * and other letters stay untouched, if false first letter is capitalized
     * and other letters are converted to lowercase.
     */
    capitalize(string: string, firstLetterOnly: boolean): string;

    /**
     * Escapes XML in a string
     * @param string String to escape
     */
    escapeXml(string: string): string;

    /**
     * Divide a string in the user perceived single units
     * @param {String} textstring String to escape
     * @return {Array} array containing the graphemes
     */
    graphemeSplit(string: string): string[];
}

interface IUtilMisc {
    /**
     * Removes value from an array.
     * Presence of value (and its position in an array) is determined via `Array.prototype.indexOf`
     */
    removeFromArray(array: any[], value: any): any[];

    /**
     * Returns random number between 2 specified ones.
     * @param min lower limit
     * @param max upper limit
     */
    getRandomInt(min: number, max: number): number;

    /**
     * Transforms degrees to radians.
     * @param degrees value in degrees
     */
    degreesToRadians(degrees: number): number;

    /**
     * Transforms radians to degrees.
     * @param radians value in radians
     */
    radiansToDegrees(radians: number): number;

    /**
     * Rotates `point` around `origin` with `radians`
     * @param point The point to rotate
     * @param origin The origin of the rotation
     * @param radians The radians of the angle for the rotation
     */
    rotatePoint(point: Point, origin: Point, radians: number): Point;

    /**
     * Rotates `vector` with `radians`
     * @param vector The vector to rotate (x and y)
     * @param radians The radians of the angle for the rotation
     */
    rotateVector(vector: { x: number; y: number }, radians: number): { x: number; y: number };

    /**
     * Apply transform t to point p
     * @param  p The point to transform
     * @param  t The transform
     * @param  [ignoreOffset] Indicates that the offset should not be applied
     */
    transformPoint(p: Point, t: any[], ignoreOffset?: boolean): Point;

    /**
     * Invert transformation t
     * @param t The transform
     */
    invertTransform(t: any[]): any[];

    /**
     * A wrapper around Number#toFixed, which contrary to native method returns number, not string.
     * @param number number to operate on
     * @param fractionDigits number of fraction digits to "leave"
     */
    toFixed(number: number, fractionDigits: number): number;

    /**
     * Converts from attribute value to pixel value if applicable.
     * Returns converted pixels or original value not converted.
     * @param value number to operate on
     */
    parseUnit(value: number | string, fontSize?: number): number | string;

    /**
     * Function which always returns `false`.
     */
    falseFunction(): boolean;

    /**
     * Returns klass "Class" object of given namespace
     * @param type Type of object (eg. 'circle')
     * @param namespace Namespace to get klass "Class" object from
     */
    getKlass(type: string, namespace: string): any;

    /**
     * Returns object of given namespace
     * @param namespace Namespace string e.g. 'fabric.Image.filter' or 'fabric'
     */
    resolveNamespace(namespace: string): any;

    /**
     * Loads image element from given url and passes it to a callback
     * @param url URL representing an image
     * @param callback Callback; invoked with loaded image
     * @param [context] Context to invoke callback in
     * @param [crossOrigin] crossOrigin value to set image element to
     */
    loadImage(url: string, callback: (image: HTMLImageElement) => void, context?: any, crossOrigin?: string): void;

    /**
     * Creates corresponding fabric instances from their object representations
     * @param objects Objects to enliven
     * @param callback Callback to invoke when all objects are created
     * @param namespace Namespace to get klass "Class" object from
     * @param reviver Method for further parsing of object elements, called after each fabric object created.
     */
    enlivenObjects(objects: any[], callback: Function, namespace: string, reviver?: Function): void;

    /**
     * Groups SVG elements (usually those retrieved from SVG document)
     * @param elements SVG elements to group
     * @param [options] Options object
     */
    groupSVGElements(elements: any[], options?: any, path?: string): Object | Group;

    /**
     * Clear char widths cache for the given font family or all the cache if no
     * fontFamily is specified.
     * Use it if you know you are loading fonts in a lazy way and you are not waiting
     * for custom fonts to load properly when adding text objects to the canvas.
     * If a text object is added when its own font is not loaded yet, you will get wrong
     * measurement and so wrong bounding boxes.
     * After the font cache is cleared, either change the textObject text content or call
     * initDimensions() to trigger a recalculation
     * @memberOf fabric.util
     * @param {String} [fontFamily] font family to clear
     */
    clearFabricFontCache(fontFamily?: string): void;

    /**
     * Populates an object with properties of another object
     * @param source Source object
     * @param destination Destination object
     * @param properties Propertie names to include
     */
    populateWithProperties(source: any, destination: any, properties: any): void;

    /**
     * Draws a dashed line between two points
     * This method is used to draw dashed line around selection area.
     * @param ctx context
     * @param x  start x coordinate
     * @param y start y coordinate
     * @param x2 end x coordinate
     * @param y2 end y coordinate
     * @param da dash array pattern
     */
    drawDashedLine(ctx: CanvasRenderingContext2D, x: number, y: number, x2: number, y2: number, da: any[]): void;

    /**
     * Creates canvas element and initializes it via excanvas if necessary
     * @param [canvasEl] optional canvas element to initialize;
     * when not given, element is created implicitly
     */
    createCanvasElement(canvasEl?: HTMLCanvasElement): HTMLCanvasElement;

    /**
     * Creates image element (works on client and node)
     */
    createImage(): HTMLImageElement;

    /**
     * Creates accessors (getXXX, setXXX) for a "class", based on "stateProperties" array
     * @param klass "Class" to create accessors for
     */
    createAccessors(klass: any): any;

    /**
     * @param receiver Object implementing `clipTo` method
     * @param ctx Context to clip
     */
    clipContext(receiver: Object, ctx: CanvasRenderingContext2D): void;

    /**
     * Multiply matrix A by matrix B to nest transformations
     * @param  a First transformMatrix
     * @param  b Second transformMatrix
     */
    multiplyTransformMatrices(a: number[], b: number[]): number[];

    /**
     * Decomposes standard 2x2 matrix into transform componentes
     * @param a transformMatrix
     */
    qrDecompose(
        a: number[],
    ): {
        angle: number;
        scaleX: number;
        scaleY: number;
        skewX: number;
        skewY: number;
        translateX: number;
        translateY: number;
    };

    /**
     * Extract Object transform values
     * @param  {fabric.Object} target object to read from
     * @return {Object} Components of transform
     */
    saveObjectTransform(
        target: Object,
    ): {
        scaleX: number;
        scaleY: number;
        skewX: number;
        skewY: number;
        angle: number;
        left: number;
        flipX: boolean;
        flipY: boolean;
        top: number;
    };

    /**
     * Returns a transform matrix starting from an object of the same kind of
     * the one returned from qrDecompose, useful also if you want to calculate some
     * transformations from an object that is not enlived yet
     * @static
     * @memberOf fabric.util
     * @param  {Object} options
     * @param  {Number} [options.angle]
     * @param  {Number} [options.scaleX]
     * @param  {Number} [options.scaleY]
     * @param  {Boolean} [options.flipX]
     * @param  {Boolean} [options.flipY]
     * @param  {Number} [options.skewX]
     * @param  {Number} [options.skewX]
     * @param  {Number} [options.translateX]
     * @param  {Number} [options.translateY]
     * @return {Number[]} transform matrix
     */
    composeMatrix(options: {
        angle: number;
        scaleX: number;
        scaleY: number;
        flipX: boolean;
        flipY: boolean;
        skewX: number;
        skewY: number;
        translateX: number;
        translateY: number;
    }): number[];

    /**
     * Returns string representation of function body
     * @param fn Function to get body of
     */
    getFunctionBody(fn: Function): string;

    /**
     * Returns true if context has transparent pixel
     * at specified location (taking tolerance into account)
     * @param ctx context
     * @param x x coordinate
     * @param y y coordinate
     * @param tolerance Tolerance
     */
    isTransparent(ctx: CanvasRenderingContext2D, x: number, y: number, tolerance: number): boolean;

    /**
     * reset an object transform state to neutral. Top and left are not accounted for
     * @static
     * @memberOf fabric.util
     * @param  {fabric.Object} target object to transform
     */
    resetObjectTransform(target: Object): void;
}

export const util: IUtil;
interface IUtil
    extends IUtilImage,
        IUtilAnimation,
        IUtilArc,
        IObservable<IUtil>,
        IUtilDomEvent,
        IUtilDomMisc,
        IUtilDomRequest,
        IUtilDomStyle,
        IUtilClass,
        IUtilMisc {
    ease: IUtilAnimEase;
    array: IUtilArray;
    object: IUtilObject;
    string: IUtilString;
}

export interface Resources {
    [key: string]: HTMLCanvasElement;
}
export interface FilterBackend {
    resources: Resources;

    applyFilters(
        filters: IBaseFilter[],
        sourceElement: HTMLImageElement | HTMLCanvasElement,
        sourceWidth: number,
        sourceHeight: number,
        targetCanvas: HTMLCanvasElement,
        cacheKey?: string,
    ): any;

    evictCachesForKey(cacheKey: string): void;

    dispose(): void;

    clearWebGLCaches(): void;
}
export let filterBackend: FilterBackend | undefined;
export interface Canvas2dFilterBackend extends FilterBackend {}
export class Canvas2dFilterBackend {
    constructor();
}

export interface GPUInfo {
    renderer: string;
    vendor: string;
}

export interface WebglFilterBackendOptions {
    tileSize: number;
}
export interface WebglFilterBackend extends FilterBackend, WebglFilterBackendOptions {
    setupGLContext(width: number, height: number): void;

    chooseFastestCopyGLTo2DMethod(width: number, height: number): void;

    createWebGLCanvas(width: number, height: number): void;

    applyFiltersDebug(
        filters: IBaseFilter[],
        sourceElement: HTMLImageElement | HTMLCanvasElement,
        sourceWidth: number,
        sourceHeight: number,
        targetCanvas: HTMLCanvasElement,
        cacheKey?: string,
    ): any;

    glErrorToString(context: any, errorCode: any): string;

    createTexture(
        gl: WebGLRenderingContext,
        width: number,
        height: number,
        textureImageSource?: HTMLImageElement | HTMLCanvasElement,
    ): WebGLTexture;

    getCachedTexture(uniqueId: string, textureImageSource: HTMLImageElement | HTMLCanvasElement): WebGLTexture;

    copyGLTo2D(gl: WebGLRenderingContext, pipelineState: any): void;

    captureGPUInfo(): GPUInfo;
}

export class WebglFilterBackend {
    constructor(options?: WebglFilterBackendOptions);
}

export class Control {
    constructor(options?: Partial<Control>);

    /**
     * keep track of control visibility.
     * mainly for backward compatibility.
     * if you do not want to see a control, you can remove it
     * from the controlset.
     * @type {Boolean}
     * @default true
     */
    visible: boolean;

    /**
     * Name of the action that the control will likely execute.
     * This is optional. FabricJS uses to identify what the user is doing for some
     * extra optimizations. If you are writing a custom control and you want to know
     * somewhere else in the code what is going on, you can use this string here.
     * you can also provide a custom getActionName if your control run multiple actions
     * depending on some external state.
     * default to scale since is the most common, used on 4 corners by default
     * @default 'scale'
     */
    actionName: string;

    /**
     * Drawing angle of the control.
     * NOT used for now, but name marked as needed for internal logic
     * example: to reuse the same drawing function for different rotated controls
     * @default 0
     */
    angle: number;

    /**
     * Relative position of the control. X
     * 0,0 is the center of the Object, while -0.5 (left) or 0.5 (right) are the extremities
     * of the bounding box.
     * @default 0
     */
    x: number;

    /**
     * Relative position of the control. Y
     * 0,0 is the center of the Object, while -0.5 (top) or 0.5 (bottom) are the extremities
     * of the bounding box.
     * @default 0
     */
    y: number;

    /**
     * Horizontal offset of the control from the defined position. In pixels
     * Positive offset moves the control to the right, negative to the left.
     * It used when you want to have position of control that does not scale with
     * the bounding box. Example: rotation control is placed at x:0, y: 0.5 on
     * the boundindbox, with an offset of 30 pixels vertically. Those 30 pixels will
     * stay 30 pixels no matter how the object is big. Another example is having 2
     * controls in the corner, that stay in the same position when the object scale.
     * of the bounding box.
     * @default 0
     */
    offsetX: number;

    /**
     * Vertical offset of the control from the defined position. In pixels
     * Positive offset moves the control to the bottom, negative to the top.
     * @default 0
     */
    offsetY: number;

    /**
     * Sets the length of the control. If null, defaults to object's cornerSize.
     * Expects both sizeX and sizeY to be set when set.
     * @type {?Number}
     */
    sizeX?: number | undefined;

    /**
     * Sets the height of the control. If null, defaults to object's cornerSize.
     * Expects both sizeX and sizeY to be set when set.
     */
    sizeY?: number | undefined;

    /**
     * Sets the length of the touch area of the control. If null, defaults to object's touchCornerSize.
     * Expects both touchSizeX and touchSizeY to be set when set.
     * @type {?Number}
     * @default null
     */
    touchSizeX?: number | undefined;

    /**
     * Sets the height of the touch area of the control. If null, defaults to object's touchCornerSize.
     * Expects both touchSizeX and touchSizeY to be set when set.
     * @type {?Number}
     * @default null
     */
    touchSizeY?: number | undefined;

    /**
     * Css cursor style to display when the control is hovered.
     * if the method `cursorStyleHandler` is provided, this property is ignored.
     * @default 'crosshair'
     */
    cursorStyle: string;

    /**
     * If controls has an offsetY or offsetX, draw a line that connects
     * the control to the bounding box
     * @default false
     */
    withConnection: boolean;

    /**
     * The control actionHandler, provide one to handle action ( control being moved )
     * @return {Boolean} true if the action/event modified the object
     */
    actionHandler(eventData: MouseEvent, transformData: Transform, x: number, y: number): boolean;

    /**
     * The control handler for mouse down, provide one to handle mouse down on control
     */
    mouseDownHandler(eventData: MouseEvent, transformData: Transform, x: number, y: number): boolean;

    /**
     * The control mouseUpHandler, provide one to handle an effect on mouse up.
     */
    mouseUpHandler(eventData: MouseEvent, transformData: Transform, x: number, y: number): boolean;

    /**
     * Returns control actionHandler
     */
    getActionHandler(eventData: MouseEvent, fabricObject: Object, control: Control): ControlMouseEventHandler;

    /**
     * Returns control mouseDown handler
     */
    getMouseDownHandler(eventData: MouseEvent, fabricObject: Object, control: Control): ControlMouseEventHandler;

    /**
     * Returns control mouseUp handler
     */
    getMouseUpHandler(eventData: MouseEvent, fabricObject: Object, control: Control): ControlMouseEventHandler;

    /**
     * Returns control cursorStyle for css using cursorStyle. If you need a more elaborate
     * function you can pass one in the constructor
     * the cursorStyle property
     */
    cursorStyleHandler(eventData: MouseEvent, control: Control, fabricObject: Object): string;

    /**
     * Returns the action name. The basic implementation just return the actionName property.
     */
    getActionName(eventData: MouseEvent, control: Control, fabricObject: Object): string;

    /**
     * Returns controls visibility
     */
    getVisibility(fabricObject: Object, controlKey: string): boolean;

    /**
     * Sets controls visibility
     */
    setVisibility(visibility: boolean): void;

    positionHandler(dim: { x: number, y: number }, finalMatrix: any, fabricObject: Object, currentControl: Control): Point;

    /**
     * Returns the coords for this control based on object values.
     */
    calcCornerCoords(objectAngle: number, objectCornerSize: number, centerX: number, centerY: number, isTouch: boolean): void;

    /**
     * Render function for the control.
     * When this function runs the context is unscaled. unrotate. Just retina scaled.
     * all the functions will have to translate to the point left,top before starting Drawing
     * if they want to draw a control where the position is detected.
     * left and top are the result of the positionHandler function
     */
    render(ctx: CanvasRenderingContext2D, left: number, top: number, styleOverride: any, fabricObject: Object): void;
}

type ControlMouseEventHandler = (eventData: MouseEvent, transformData: Transform, x: number, y: number) => boolean;

export interface Transform {
    target: Object;
    action: string;
    actionHandler: ControlMouseEventHandler;
    altKey: boolean;
    corner: string;
    ex: number;
    ey: number;
    lastX: number;
    lastY: number;
    offsetX: number;
    offsetY: number;
    originX: "left" | "right";
    originY: "top" | "bottom";
    original: any;
    scaleX: number;
    scaleY: number;
    shiftKey: boolean;
    skewX: number;
    skewY: number;
    theta: number;
    width: number;
}