Skip to content

Group

Defined in: src/shapes/Group.ts:82

object:added

object:removed

layout:before

layout:after

new Group(objects?, options?): Group

Defined in: src/shapes/Group.ts:139

Constructor

FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[] = []

instance objects

Partial<GroupProps> = {}

Options object

Group

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).constructor

optional __corner: string

Defined in: src/shapes/Object/InteractiveObject.ts:105

keeps the value of the last hovered corner during mouse move. 0 is no corner, or ‘mt’, ‘ml’, ‘mtr’ etc.. It should be private, but there is no harm in using it as a read-only property. this isn’t cleaned automatically. Non selected objects may have wrong values

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).__corner


_controlsVisibility: Record<string, boolean>

Defined in: src/shapes/Object/InteractiveObject.ts:112

a map of control visibility for this object. this was left when controls were introduced to not break the api too much this takes priority over the generic control visibility

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, )._controlsVisibility


_objects: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[] = []

Defined in: src/Collection.ts:21

needs to end up in the constructor too

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, )._objects


optional _scaling: boolean

Defined in: src/shapes/Object/InteractiveObject.ts:134

A boolean used from the gesture module to keep tracking of a scaling action when there is no scaling transform in place. This is an edge case and is used twice in all codebase. Probably added to keep track of some performance issues

use git blame to investigate why it was added DON’T USE IT. WE WILL TRY TO REMOVE IT

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, )._scaling


absolutePositioned: boolean

Defined in: src/shapes/Object/Object.ts:215

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

false

GroupProps.absolutePositioned

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).absolutePositioned


aCoords: TCornerPoint

Defined in: src/shapes/Object/ObjectGeometry.ts:63

Describe object’s corner position in scene coordinates. The coordinates are derived from the following: left, top, width, height, scaleX, scaleY, skewX, skewY, angle, strokeWidth. The coordinates do not depend on viewport changes. The coordinates get updated with setCoords. You can calculate them without updating with ()

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).aCoords


angle: TDegree

Defined in: src/shapes/Object/ObjectGeometry.ts:583

Angle of rotation of an object (in degrees)

0

GroupProps.angle

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).angle


backgroundColor: string

Defined in: src/shapes/Object/Object.ts:202

Background color of an object. takes css colors https://www.w3.org/TR/css-color-3/

GroupProps.backgroundColor

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).backgroundColor


borderColor: string

Defined in: src/shapes/Object/InteractiveObject.ts:74

Color of controlling borders of an object (when it’s active)

rgb(178,204,255)

GroupProps.borderColor

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).borderColor


borderDashArray: null | number[]

Defined in: src/shapes/Object/InteractiveObject.ts:75

Array specifying dash pattern of an object’s borders (hasBorder must be true)

1.6.2

GroupProps.borderDashArray

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).borderDashArray


borderOpacityWhenMoving: number

Defined in: src/shapes/Object/InteractiveObject.ts:76

Opacity of object’s controlling borders when object is active and moving

0.4

GroupProps.borderOpacityWhenMoving

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).borderOpacityWhenMoving


borderScaleFactor: number

Defined in: src/shapes/Object/InteractiveObject.ts:77

Scale factor for the border of the objects ( selection box and controls stroke ). Bigger number will make a thicker border border default value is 1, so this scale value is equal to a border and control strokeWidth. If you need to divide border from control strokeWidth you will need to write your own render function for controls

1

GroupProps.borderScaleFactor

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).borderScaleFactor


centeredRotation: boolean

Defined in: src/shapes/Object/Object.ts:216

When true the object will rotate on its center. When false will rotate around the origin point defined by originX and originY. The value of this property is IGNORED during a transform if the canvas has already centeredRotation set to true The object method rotate will always consider this property and never the canvas’s one.

1.3.4

GroupProps.centeredRotation

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).centeredRotation


centeredScaling: boolean

Defined in: src/shapes/Object/Object.ts:217

When true, this object will use center point as the origin of transformation when being scaled via the controls.

1.3.4

GroupProps.centeredScaling

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).centeredScaling


optional clipPath: BaseFabricObject<Partial<ObjectProps>, SerializedObjectProps, ObjectEvents>

Defined in: src/shapes/Object/Object.ts:213

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’

GroupProps.clipPath

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).clipPath


optional clipPathId: string

Defined in: src/shapes/Object/FabricObjectSVGExportMixin.ts:15

When an object is being exported as SVG as a clippath, a reference inside the SVG is needed. This reference is a UID in the fabric namespace and is temporary stored here.

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).clipPathId


controls: TControlSet

Defined in: src/shapes/Object/InteractiveObject.ts:118

holds the controls for the object. controls are added by default_controls.js

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).controls


cornerColor: string

Defined in: src/shapes/Object/InteractiveObject.ts:68

Color of controlling corners of an object (when it’s active)

rgb(178,204,255)

GroupProps.cornerColor

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).cornerColor


cornerDashArray: null | number[]

Defined in: src/shapes/Object/InteractiveObject.ts:71

Array specifying dash pattern of an object’s control (hasBorder must be true)

1.6.2

null

GroupProps.cornerDashArray

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).cornerDashArray


cornerSize: number

Defined in: src/shapes/Object/InteractiveObject.ts:65

Size of object’s controlling corners (in pixels)

13

GroupProps.cornerSize

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).cornerSize


cornerStrokeColor: string

Defined in: src/shapes/Object/InteractiveObject.ts:69

Color of controlling corners of an object (when it’s active and transparentCorners false)

1.6.2

''

GroupProps.cornerStrokeColor

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).cornerStrokeColor


cornerStyle: "circle" | "rect"

Defined in: src/shapes/Object/InteractiveObject.ts:70

Specify style of control, ‘rect’ or ‘circle’ This is deprecated. In the future there will be a standard control render And you can swap it with one of the alternative proposed with the control api

1.6.2

'rect'

GroupProps.cornerStyle

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).cornerStyle


dirty: boolean

Defined in: src/shapes/Object/Object.ts:242

When set to true, object’s cache will be rerendered next render call. since 1.7.0

true

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).dirty


evented: boolean

Defined in: src/shapes/Object/InteractiveObject.ts:82

When set to false, an object can not be a target of events. All events propagate through it. Introduced in v1.3.4

GroupProps.evented

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).evented


excludeFromExport: boolean

Defined in: src/shapes/Object/Object.ts:209

When true, object is not exported in OBJECT/JSON

1.6.3

GroupProps.excludeFromExport

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).excludeFromExport


fill: null | string | TFiller

Defined in: src/shapes/Object/Object.ts:192

Color of object’s fill takes css colors https://www.w3.org/TR/css-color-3/

rgb(0,0,0)

GroupProps.fill

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).fill


fillRule: CanvasFillRule

Defined in: src/shapes/Object/Object.ts:193

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)

nonzero

GroupProps.fillRule

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).fillRule


flipX: boolean

Defined in: src/shapes/Object/ObjectGeometry.ts:569

When true, an object is rendered as flipped horizontally

false

GroupProps.flipX

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).flipX


flipY: boolean

Defined in: src/shapes/Object/ObjectGeometry.ts:570

When true, an object is rendered as flipped vertically

false

GroupProps.flipY

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).flipY


globalCompositeOperation: GlobalCompositeOperation

Defined in: src/shapes/Object/Object.ts:201

Composite rule used for canvas globalCompositeOperation

GroupProps.globalCompositeOperation

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).globalCompositeOperation


hasBorders: boolean

Defined in: src/shapes/Object/InteractiveObject.ts:78

When set to false, object’s controlling borders are not rendered

GroupProps.hasBorders

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).hasBorders


hasControls: boolean

Defined in: src/shapes/Object/InteractiveObject.ts:72

When set to false, object’s controls are not displayed and can not be used to manipulate object

true

GroupProps.hasControls

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).hasControls


height: number

Defined in: src/shapes/Object/ObjectGeometry.ts:568

Object height

GroupProps.height

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).height


hoverCursor: null | string

Defined in: src/shapes/Object/InteractiveObject.ts:86

Default cursor value used when hovering over this object on canvas

null

GroupProps.hoverCursor

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).hoverCursor


includeDefaultValues: boolean

Defined in: src/shapes/Object/Object.ts:208

When false, default object’s values are not included in its serialization

GroupProps.includeDefaultValues

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).includeDefaultValues


interactive: boolean

Defined in: src/shapes/Group.ts:108

Used to allow targeting of object inside groups. set to true if you want to select an object inside a group.
REQUIRES subTargetCheck set to true This will be not removed but slowly replaced with a method setInteractive that will take care of enabling subTargetCheck and necessary object events. There is too much attached to group interactivity to just be evaluated by a boolean in the code

GroupProps.interactive


inverted: boolean

Defined in: src/shapes/Object/Object.ts:214

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

false

GroupProps.inverted

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).inverted


optional isMoving: boolean

Defined in: src/shapes/Object/InteractiveObject.ts:124

internal boolean to signal the code that the object is part of the move action.

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).isMoving


layoutManager: LayoutManager

Defined in: src/shapes/Group.ts:110

GroupProps.layoutManager


left: number

Defined in: src/shapes/Object/ObjectGeometry.ts:566

Left position of an object. Note that by default it’s relative to object left. You can change this by setting FabricObject#originX

0

GroupProps.left

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).left


lockMovementX: boolean

Defined in: src/shapes/Object/InteractiveObject.ts:56

When true, object horizontal movement is locked

GroupProps.lockMovementX

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).lockMovementX


lockMovementY: boolean

Defined in: src/shapes/Object/InteractiveObject.ts:57

When true, object vertical movement is locked

GroupProps.lockMovementY

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).lockMovementY


lockRotation: boolean

Defined in: src/shapes/Object/InteractiveObject.ts:58

When true, object rotation is locked

GroupProps.lockRotation

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).lockRotation


lockScalingFlip: boolean

Defined in: src/shapes/Object/InteractiveObject.ts:63

When true, object cannot be flipped by scaling into negative values

GroupProps.lockScalingFlip

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).lockScalingFlip


lockScalingX: boolean

Defined in: src/shapes/Object/InteractiveObject.ts:59

When true, object horizontal scaling is locked

GroupProps.lockScalingX

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).lockScalingX


lockScalingY: boolean

Defined in: src/shapes/Object/InteractiveObject.ts:60

When true, object vertical scaling is locked

GroupProps.lockScalingY

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).lockScalingY


lockSkewingX: boolean

Defined in: src/shapes/Object/InteractiveObject.ts:61

When true, object horizontal skewing is locked

GroupProps.lockSkewingX

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).lockSkewingX


lockSkewingY: boolean

Defined in: src/shapes/Object/InteractiveObject.ts:62

When true, object vertical skewing is locked

GroupProps.lockSkewingY

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).lockSkewingY


optional matrixCache: TMatrixCache

Defined in: src/shapes/Object/ObjectGeometry.ts:73

storage cache for object full transform matrix

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).matrixCache


minScaleLimit: number

Defined in: src/shapes/Object/Object.ts:187

Minimum allowed scale value of an object

0

GroupProps.minScaleLimit

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).minScaleLimit


moveCursor: null | string

Defined in: src/shapes/Object/InteractiveObject.ts:87

Default cursor value used when moving this object on canvas

null

GroupProps.moveCursor

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).moveCursor


noScaleCache: boolean

Defined in: src/shapes/Object/InteractiveObject.ts:51

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

true

GroupProps.noScaleCache

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).noScaleCache


objectCaching: boolean

Defined in: src/shapes/Object/Object.ts:211

When true, object is cached on an additional canvas. When false, object is not cached unless necessary ( clipPath ) default to true

1.7.0

true

GroupProps.objectCaching

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).objectCaching


oCoords: Record<string, TOCoord>

Defined in: src/shapes/Object/InteractiveObject.ts:95

The object’s controls’ position in viewport coordinates Calculated by Control#positionHandler and Control#calcCornerCoords, depending on padding. corner/touchCorner describe the 4 points forming the interactive area of the corner. Used to draw and locate controls.

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).oCoords


opacity: number

Defined in: src/shapes/Object/Object.ts:189

Opacity of an object

1

GroupProps.opacity

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).opacity


originX: TOriginX

Defined in: src/shapes/Object/ObjectGeometry.ts:578

GroupProps.originX

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).originX


originY: TOriginY

Defined in: src/shapes/Object/ObjectGeometry.ts:582

GroupProps.originY

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).originY


optional ownMatrixCache: TMatrixCache

Defined in: src/shapes/Object/ObjectGeometry.ts:68

storage cache for object transform matrix

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).ownMatrixCache


padding: number

Defined in: src/shapes/Object/ObjectGeometry.ts:53

Padding between object and its controlling borders (in pixels)

0

GroupProps.padding

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).padding


paintFirst: "fill" | "stroke"

Defined in: src/shapes/Object/Object.ts:191

Determines if the fill or the stroke is drawn first (one of “fill” or “stroke”)

GroupProps.paintFirst

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).paintFirst


optional parent: Group

Defined in: src/shapes/Object/Object.ts:1606

A reference to the parent of the object Used to keep the original parent ref when the object has been added to an ActiveSelection, hence loosing the group ref

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).parent


perPixelTargetFind: boolean

Defined in: src/shapes/Object/InteractiveObject.ts:83

When set to true, objects are “found” on canvas on per-pixel basis rather than according to bounding box

GroupProps.perPixelTargetFind

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).perPixelTargetFind


scaleX: number

Defined in: src/shapes/Object/ObjectGeometry.ts:571

Object scale factor (horizontal)

1

GroupProps.scaleX

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).scaleX


scaleY: number

Defined in: src/shapes/Object/ObjectGeometry.ts:572

Object scale factor (vertical)

1

GroupProps.scaleY

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).scaleY


selectable: boolean

Defined in: src/shapes/Object/InteractiveObject.ts:81

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.

GroupProps.selectable

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).selectable


selectionBackgroundColor: string

Defined in: src/shapes/Object/InteractiveObject.ts:79

Selection Background color of an object. colored layer behind the object when it is active. does not mix good with globalCompositeOperation methods.

GroupProps.selectionBackgroundColor

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).selectionBackgroundColor


shadow: null | Shadow

Defined in: src/shapes/Object/Object.ts:204

Shadow object representing shadow of this shape

null

GroupProps.shadow

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).shadow


skewX: number

Defined in: src/shapes/Object/ObjectGeometry.ts:573

Angle of skew on x axes of an object (in degrees)

0

GroupProps.skewX

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).skewX


skewY: number

Defined in: src/shapes/Object/ObjectGeometry.ts:574

Angle of skew on y axes of an object (in degrees)

0

GroupProps.skewY

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).skewY


optional snapAngle: TDegree

Defined in: src/shapes/Object/InteractiveObject.ts:53

The angle that an object will lock to while rotating.

GroupProps.snapAngle

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).snapAngle


optional snapThreshold: TDegree

Defined in: src/shapes/Object/InteractiveObject.ts:54

The angle difference from the current snapped angle in which snapping should occur. When undefined, the snapThreshold will default to the snapAngle.

GroupProps.snapThreshold

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).snapThreshold


stroke: null | string | TFiller

Defined in: src/shapes/Object/Object.ts:194

When defined, an object is rendered via stroke and this property specifies its color takes css colors https://www.w3.org/TR/css-color-3/

null

GroupProps.stroke

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).stroke


strokeDashArray: null | number[]

Defined in: src/shapes/Object/Object.ts:195

Array specifying dash pattern of an object’s stroke (stroke must be defined)

null;

GroupProps.strokeDashArray

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).strokeDashArray


strokeDashOffset: number

Defined in: src/shapes/Object/Object.ts:196

Line offset of an object’s stroke

0

GroupProps.strokeDashOffset

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).strokeDashOffset


strokeLineCap: CanvasLineCap

Defined in: src/shapes/Object/Object.ts:197

Line endings style of an object’s stroke (one of “butt”, “round”, “square”)

butt

GroupProps.strokeLineCap

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).strokeLineCap


strokeLineJoin: CanvasLineJoin

Defined in: src/shapes/Object/Object.ts:198

Corner style of an object’s stroke (one of “bevel”, “round”, “miter”)

GroupProps.strokeLineJoin

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).strokeLineJoin


strokeMiterLimit: number

Defined in: src/shapes/Object/Object.ts:199

Maximum miter length (used for strokeLineJoin = “miter”) of an object’s stroke

4

GroupProps.strokeMiterLimit

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).strokeMiterLimit


strokeUniform: boolean

Defined in: src/shapes/Object/ObjectGeometry.ts:585

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. this Property does not work on Text classes or drawing call that uses strokeText,fillText methods default to false

2.6.0

false
false

GroupProps.strokeUniform

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).strokeUniform


strokeWidth: number

Defined in: src/shapes/Object/ObjectGeometry.ts:584

Width of a stroke used to render this object

1

GroupProps.strokeWidth

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).strokeWidth


subTargetCheck: boolean

Defined in: src/shapes/Group.ts:94

Used to optimize performance set to false if you don’t need contained objects to be targets of events

GroupProps.subTargetCheck


top: number

Defined in: src/shapes/Object/ObjectGeometry.ts:565

Top position of an object. Note that by default it’s relative to object top. You can change this by setting FabricObject#originY

0

GroupProps.top

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).top


touchCornerSize: number

Defined in: src/shapes/Object/InteractiveObject.ts:66

Size of object’s controlling corners when touch interaction is detected

24

GroupProps.touchCornerSize

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).touchCornerSize


transparentCorners: boolean

Defined in: src/shapes/Object/InteractiveObject.ts:67

When true, object’s controlling corners are rendered as transparent inside (i.e. stroke instead of fill)

true

GroupProps.transparentCorners

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).transparentCorners


visible: boolean

Defined in: src/shapes/Object/Object.ts:206

When set to false, an object is not rendered on canvas

GroupProps.visible

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).visible


width: number

Defined in: src/shapes/Object/ObjectGeometry.ts:567

Object width

GroupProps.width

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).width


static cacheProperties: string[]

Defined in: src/shapes/Object/Object.ts:234

List of properties to consider when checking if cache needs refresh Those properties are checked by 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

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).cacheProperties


static colorProperties: string[]

Defined in: src/shapes/Object/Object.ts:1513

List of properties to consider for animating colors.

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).colorProperties


static customProperties: string[] = []

Defined in: src/shapes/Object/Object.ts:1754

Define a list of custom properties that will be serialized when instance.toObject() gets called

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).customProperties


static ownDefaults: Record<string, any> = groupDefaultValues

Defined in: src/shapes/Group.ts:122

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).ownDefaults


static stateProperties: string[]

Defined in: src/shapes/Object/Object.ts:225

This list of properties is used to check if the state of an object is changed. This state change now is only used for children of groups to understand if a group needs its cache regenerated during a .set call

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).stateProperties


static type: string = 'Group'

Defined in: src/shapes/Group.ts:120

Legacy identifier of the class. Prefer using utils like isType or instanceOf Will be removed in fabric 7 or 8. The setter exists to avoid type errors in old code and possibly current deserialization code. DO NOT build new code around this type value

add sustainable warning message

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).type

get type(): string

Defined in: src/shapes/Object/Object.ts:354

Legacy identifier of the class. Prefer using utils like isType or instanceOf Will be removed in fabric 7 or 8. The setter exists to avoid type errors in old code and possibly current deserialization code. DO NOT build new code around this type value

add sustainable warning message

string

set type(value): void

Defined in: src/shapes/Object/Object.ts:362

string

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).type

_drawClipPath(ctx, clipPath, context): void

Defined in: src/shapes/Object/Object.ts:884

Prepare clipPath state and cache and draw it on instance’s cache

CanvasRenderingContext2D

undefined | BaseFabricObject<Partial<ObjectProps>, SerializedObjectProps, ObjectEvents>

DrawContext

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, )._drawClipPath


_limitCacheSize(dims): any

Defined in: src/shapes/Object/Object.ts:403

Limit the cache dimensions so that X * Y do not cross config.perfLimitSizeTotal and each side do not cross fabric.cacheSideLimit those numbers are configurable so that you can get as much detail as you want making bargain with performances.

any

any

.width width of canvas

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, )._limitCacheSize


_onObjectAdded(object): void

Defined in: src/shapes/Group.ts:258

FabricObject

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, )._onObjectAdded


_onStackOrderChanged(): void

Defined in: src/shapes/Group.ts:288

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, )._onStackOrderChanged


_removeCacheCanvas(): void

Defined in: src/shapes/Object/Object.ts:720

Remove cacheCanvas and its dimensions from the objects

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, )._removeCacheCanvas


_renderControls(ctx, styleOverride?): void

Defined in: src/shapes/Object/InteractiveObject.ts:435

Renders controls and borders for the object the context here is not transformed

CanvasRenderingContext2D

Context to render on

TStyleOverride = {}

properties to override the object style

void

move to interactivity

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, )._renderControls


_setClippingProperties(ctx): void

Defined in: src/shapes/Object/Object.ts:1029

CanvasRenderingContext2D

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, )._setClippingProperties


_setFillStyles(ctx, __namedParameters): void

Defined in: src/shapes/Object/Object.ts:1018

CanvasRenderingContext2D

Pick<Group, "fill">

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, )._setFillStyles


_setStrokeStyles(ctx, decl): void

Defined in: src/shapes/Object/Object.ts:976

CanvasRenderingContext2D

Pick<Group, "stroke" | "strokeWidth" | "strokeDashOffset" | "strokeLineCap" | "strokeLineJoin" | "strokeMiterLimit">

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, )._setStrokeStyles


_setupCompositeOperation(ctx): void

Defined in: src/shapes/Object/Object.ts:1488

Sets canvas globalCompositeOperation for specific object custom composition operation for the particular object can be specified using globalCompositeOperation property

CanvasRenderingContext2D

Rendering canvas context

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, )._setupCompositeOperation


_toSVG(reviver?): string[]

Defined in: src/shapes/Group.ts:637

Returns svg representation of an instance

TSVGReviver

Method for further parsing of svg representation.

string[]

svg representation of an instance

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, )._toSVG


add(…objects): number

Defined in: src/shapes/Group.ts:228

Add objects

FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]

number

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).add


addPaintOrder(this): string

Defined in: src/shapes/Object/FabricObjectSVGExportMixin.ts:250

FabricObjectSVGExportMixin & FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>

string

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).addPaintOrder


animate<T>(animatable, options?): Record<string, TAnimation<T>>

Defined in: src/shapes/Object/Object.ts:1527

Animates object’s properties

T extends number | number[] | TColorArg

Record<string, T>

map of keys and end values

Partial<AnimationOptions<T>>

Record<string, TAnimation<T>>

map of animation contexts

As object — multiple properties

object.animate({ left: …, top: … }); object.animate({ left: …, top: … }, { duration: … });

http://fabricjs.com/fabric-intro-part-2#animation

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).animate


bringObjectForward(object, intersecting?): boolean

Defined in: src/Collection.ts:240

Moves an object or a selection up in stack of drawn objects An optional parameter, intersecting allows 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.

FabricObject

Object to send

boolean

If true, send object in front of next upper intersecting object

boolean

true if change occurred

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).bringObjectForward


bringObjectToFront(object): boolean

Defined in: src/Collection.ts:194

Moves an object or the objects of a multiple selection to the top of the stack of drawn objects

FabricObject

Object to send

boolean

true if change occurred

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).bringObjectToFront


calcACoords(): TCornerPoint

Defined in: src/shapes/Object/ObjectGeometry.ts:429

Calculates the coordinates of the 4 corner of the bbox, in absolute coordinates. those never change with zoom or viewport changes.

TCornerPoint

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).calcACoords


calcOCoords(): Record<string, TOCoord>

Defined in: src/shapes/Object/InteractiveObject.ts:255

Calculates the coordinates of the center of each control plus the corners of the control itself This basically just delegates to each control positionHandler WARNING: changing what is passed to positionHandler is a breaking change, since position handler is a public api and should be done just if extremely necessary

Record<string, TOCoord>

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).calcOCoords


calcOwnMatrix(): TMat2D

Defined in: src/shapes/Object/ObjectGeometry.ts:515

calculate transform matrix that represents the current transformations from the object’s properties, this matrix does not include the group transformation

TMat2D

transform matrix for the object

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).calcOwnMatrix


calcTransformMatrix(skipGroup?): TMat2D

Defined in: src/shapes/Object/ObjectGeometry.ts:487

calculate transform matrix that represents the current transformations from the object’s properties.

boolean = false

return transform matrix for object not counting parent transformations There are some situation in which this is useful to avoid the fake rotation.

TMat2D

transform matrix for the object

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).calcTransformMatrix


canDrop(_e): boolean

Defined in: src/shapes/Object/InteractiveObject.ts:701

Override to customize drag and drop behavior

DragEvent

boolean

true if the object currently dragged can be dropped on the target

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).canDrop


clearContextTop(restoreManually?): undefined | CanvasRenderingContext2D

Defined in: src/shapes/Object/InteractiveObject.ts:627

Clears the canvas.contextTop in a specific area that corresponds to the object’s bounding box that is in the canvas.contextContainer. This function is used to clear pieces of contextTop where we render ephemeral effects on top of the object. Example: blinking cursor text selection, drag effects.

boolean

When true won’t restore the context after clear, in order to draw something else.

undefined | CanvasRenderingContext2D

canvas.contextTop that is either still transformed with the object transformMatrix, or restored to neutral transform

discuss swapping restoreManually with a renderCallback, but think of async issues

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).clearContextTop


clone(propertiesToInclude?): Promise<Group>

Defined in: src/shapes/Object/Object.ts:1255

Clones an instance.

string[]

Any properties that you might want to additionally include in the output

Promise<Group>

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).clone


cloneAsImage(options?): FabricImage

Defined in: src/shapes/Object/Object.ts:1281

Creates an instance of Image out of an object makes use of toCanvasElement. Once this method was based on toDataUrl and loadImage, so it also had a quality and format option. toCanvasElement is faster and produce no loss of quality. If you need to get a real Jpeg or Png from an object, using toDataURL is the right way to do it. toCanvasElement and then toBlob from the obtained canvas is also a good option.

ObjectToCanvasElementOptions

for clone as image, passed to toDataURL

FabricImage

Object cloned as image.

fix the export type, it could not be Image but the type that getClass return for ‘image’.

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).cloneAsImage


collectObjects(bbox, options): InteractiveFabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]

Defined in: src/Collection.ts:326

Given a bounding box, return all the objects of the collection that are contained in the bounding box. If includeIntersecting is true, return also the objects that intersect the bounding box as well. This is meant to work with selection. Is not a generic method.

TBBox

a bounding box in scene coordinates

an object with includeIntersecting

boolean = true

InteractiveFabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]

array of objects contained in the bounding box, ordered from top to bottom stacking wise

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).collectObjects


complexity(): number

Defined in: src/Collection.ts:165

Returns number representation of a collection complexity

number

complexity

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).complexity


contains(object, deep?): boolean

Defined in: src/Collection.ts:148

Returns true if collection contains an object.
Prefer using FabricObject#isDescendantOf for performance reasons instead of a.contains(b) use b.isDescendantOf(a)

FabricObject

Object to check against

boolean

true to check all descendants, false to check only _objects

boolean

true if collection contains an object

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).contains


containsPoint(point): boolean

Defined in: src/shapes/Object/ObjectGeometry.ts:284

Checks if point is inside the object

Point

Point to check against

boolean

true if point is inside the object

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).containsPoint


dispose(): void

Defined in: src/shapes/Group.ts:605

cancel instance’s running animations override if necessary to dispose artifacts such as clipPath

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).dispose


drawBorders(ctx, options, styleOverride?): void

Defined in: src/shapes/Object/InteractiveObject.ts:478

Draws borders of an object’s bounding box. Requires public properties: width, height Requires public options: padding, borderColor

CanvasRenderingContext2D

Context to draw on

Required

object representing current object parameters

TStyleOverride

object to override the object style

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).drawBorders


drawCacheOnCanvas(this, ctx): void

Defined in: src/shapes/Object/Object.ts:906

Paint the cached copy of the object on the target context.

TCachedFabricObject

CanvasRenderingContext2D

Context to render on

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).drawCacheOnCanvas


drawClipPathOnCache(ctx, clipPath, canvasWithClipPath): void

Defined in: src/shapes/Object/Object.ts:812

Execute the drawing operation for an object clipPath

CanvasRenderingContext2D

Context to render on

BaseFabricObject

HTMLCanvasElement

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).drawClipPathOnCache


drawControls(ctx, styleOverride): void

Defined in: src/shapes/Object/InteractiveObject.ts:550

Draws corners of an object’s bounding box. Requires public properties: width, height Requires public options: cornerSize, padding Be aware that since fabric 6.0 this function does not call setCoords anymore. setCoords needs to be called manually if the object of which we are rendering controls is outside the standard selection and transform process.

CanvasRenderingContext2D

Context to draw on

Partial = {}

object to override the object style

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).drawControls


drawControlsConnectingLines(ctx, size): void

Defined in: src/shapes/Object/InteractiveObject.ts:517

Draws lines from a borders of an object’s bounding box to controls that have withConnection property set. Requires public properties: width, height Requires public options: padding, borderColor

CanvasRenderingContext2D

Context to draw on

Point

object size x = width, y = height

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).drawControlsConnectingLines


drawObject(ctx, forClipping, context): void

Defined in: src/shapes/Group.ts:496

Execute the drawing operation for an object on a specified context

CanvasRenderingContext2D

Context to render on

undefined | boolean

DrawContext

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).drawObject


drawSelectionBackground(ctx): void

Defined in: src/shapes/Object/InteractiveObject.ts:375

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

CanvasRenderingContext2D

Context to draw on

void

evaluate if make this disappear in favor of a pre-render hook for objects this was added by Andrea Bogazzi to make possible some feature for work reasons it seemed a good option, now is an edge case

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).drawSelectionBackground


findCommonAncestors<T>(other): AncestryComparison

Defined in: src/shapes/Object/Object.ts:1645

Compare ancestors

T extends Group

T

AncestryComparison

an object that represent the ancestry situation.

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).findCommonAncestors


findNewLowerIndex(object, idx, intersecting?): number

Defined in: src/Collection.ts:272

FabricObject

number

boolean

number

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).findNewLowerIndex


findNewUpperIndex(object, idx, intersecting?): number

Defined in: src/Collection.ts:295

FabricObject

number

boolean

number

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).findNewUpperIndex


fire<K>(eventName, options?): void

Defined in: src/Observable.ts:167

Fires event with an optional options object

K extends keyof GroupEvents

K

Event name to fire

GroupEvents[K]

Options object

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).fire


forEachControl(fn): void

Defined in: src/shapes/Object/InteractiveObject.ts:353

Calls a function for each control. The function gets called, with the control, the control’s key and the object that is calling the iterator

(control, key, fabricObject) => any

function to iterate over the controls over

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).forEachControl


forEachObject(callback): void

Defined in: src/Collection.ts:91

Executes given function for each object in this group A simple shortcut for getObjects().forEach, before es6 was more complicated, now is just a shortcut.

(object, index, array) => any

Callback invoked with current object as first argument, index - as second and an array of all objects - as third.

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).forEachObject


get(property): any

Defined in: src/CommonMethods.ts:59

Basic getter

string

Property name

any

value of a property

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).get


getActiveControl(): undefined | { control: Control; coord: TOCoord; key: string; }

Defined in: src/shapes/Object/InteractiveObject.ts:194

undefined | { control: Control; coord: TOCoord; key: string; }

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).getActiveControl


getAncestors(): Ancestors

Defined in: src/shapes/Object/Object.ts:1628

Ancestors

ancestors (excluding ActiveSelection) from bottom to top

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).getAncestors


getBoundingRect(): TBBox

Defined in: src/shapes/Object/ObjectGeometry.ts:345

Returns coordinates of object’s bounding rectangle (left, top, width, height) the box is intended as aligned to axis of canvas.

TBBox

Object with left, top, width, height properties

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).getBoundingRect


getCanvasRetinaScaling(): number

Defined in: src/shapes/Object/ObjectGeometry.ts:402

number

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).getCanvasRetinaScaling


getCenterPoint(): Point

Defined in: src/shapes/Object/ObjectGeometry.ts:735

Returns the center coordinates of the object relative to canvas

Point

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).getCenterPoint


getCoords(): Point[]

Defined in: src/shapes/Object/ObjectGeometry.ts:204

Point[]

[tl, tr, br, bl] in the scene plane

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).getCoords


getObjectOpacity(): number

Defined in: src/shapes/Object/Object.ts:571

Return the object opacity counting also the group property

number

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).getObjectOpacity


getObjects(…types?): FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]

Defined in: src/Collection.ts:108

Returns an array of children objects of this instance

string[]

When specified, only objects of these types are returned

FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).getObjects


getObjectScaling(): Point

Defined in: src/shapes/Object/Object.ts:540

Return the object scale factor counting also the group scaling

Point

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).getObjectScaling


getPointByOrigin(originX, originY): Point

Defined in: src/shapes/Object/ObjectGeometry.ts:765

Returns the position of the object as if it has a different origin. Take an object that has left, top set to 100, 100 with origin ‘left’, ‘top’. Return the values of left top ( wrapped in a point ) that you would need to keep the same position if origin where different. Alternatively you can use this to also find which point in the parent plane is a specific origin ( where is the bottom right corner of my object? )

TOriginX

Horizontal origin: ‘left’, ‘center’ or ‘right’

TOriginY

Vertical origin: ‘top’, ‘center’ or ‘bottom’

Point

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).getPointByOrigin


getRelativeCenterPoint(): Point

Defined in: src/shapes/Object/ObjectGeometry.ts:746

Returns the center coordinates of the object relative to it’s parent

Point

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).getRelativeCenterPoint


getRelativeX(): number

Defined in: src/shapes/Object/ObjectGeometry.ts:115

number

x position according to object’s FabricObject#originX property in parent’s coordinate plane
if parent is canvas then this property is identical to getX

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).getRelativeX


getRelativeXY(): Point

Defined in: src/shapes/Object/ObjectGeometry.ts:176

Point

x,y position according to object’s FabricObject#originX FabricObject#originY properties in parent’s coordinate plane

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).getRelativeXY


getRelativeY(): number

Defined in: src/shapes/Object/ObjectGeometry.ts:131

number

y position according to object’s FabricObject#originY property in parent’s coordinate plane
if parent is canvas then this property is identical to getY

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).getRelativeY


getScaledHeight(): number

Defined in: src/shapes/Object/ObjectGeometry.ts:363

Returns height of an object bounding box counting transformations

number

height value

shouldn’t this account for group transform and return the actual size in canvas coordinate plane?

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).getScaledHeight


getScaledWidth(): number

Defined in: src/shapes/Object/ObjectGeometry.ts:354

Returns width of an object’s bounding box counting transformations

number

width value

shouldn’t this account for group transform and return the actual size in canvas coordinate plane?

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).getScaledWidth


getSvgCommons(this): string

Defined in: src/shapes/Object/FabricObjectSVGExportMixin.ts:85

Returns id attribute for svg output

FabricObjectSVGExportMixin & FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents> & object

string

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).getSvgCommons


getSvgFilter(this): string

Defined in: src/shapes/Object/FabricObjectSVGExportMixin.ts:77

Returns filter for svg shadow

FabricObjectSVGExportMixin & FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>

string

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).getSvgFilter


getSvgStyles(): string

Defined in: src/shapes/Group.ts:652

Returns styles-string for svg-export, specific version for group

string

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).getSvgStyles


getSvgTransform(this, full?, additionalTransform?): string

Defined in: src/shapes/Object/FabricObjectSVGExportMixin.ts:104

Returns transform-string for svg-export

FabricObjectSVGExportMixin & FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>

boolean

string = ''

string

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).getSvgTransform


getTotalAngle(): TDegree

Defined in: src/shapes/Object/ObjectGeometry.ts:410

Returns the object angle relative to canvas counting also the group property

TDegree

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).getTotalAngle


getTotalObjectScaling(): Point

Defined in: src/shapes/Object/Object.ts:557

Return the object scale factor counting also the group scaling, zoom and retina

Point

object with scaleX and scaleY properties

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).getTotalObjectScaling


getViewportTransform(): TMat2D

Defined in: src/shapes/Object/ObjectGeometry.ts:420

Retrieves viewportTransform from Object’s canvas if available

TMat2D

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).getViewportTransform


getX(): number

Defined in: src/shapes/Object/ObjectGeometry.ts:86

number

x position according to object’s FabricObject#originX property in canvas coordinate plane

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).getX


getXY(): Point

Defined in: src/shapes/Object/ObjectGeometry.ts:146

Point

x position according to object’s FabricObject#originX FabricObject#originY properties in canvas coordinate plane

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).getXY


getY(): number

Defined in: src/shapes/Object/ObjectGeometry.ts:100

number

y position according to object’s FabricObject#originY property in canvas coordinate plane

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).getY


hasCommonAncestors<T>(other): boolean

Defined in: src/shapes/Object/Object.ts:1710

T extends Group

T

boolean

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).hasCommonAncestors


hasFill(): null | boolean | ""

Defined in: src/shapes/Object/Object.ts:751

return true if the object will draw a fill Does not consider text styles. This is just a shortcut used at rendering time We want it to be an approximation and be fast. wrote to avoid extra caching, it has to return true when fill happens, can guess when it will not happen at 100% chance, does not matter if it misses some use case where the fill is invisible.

null | boolean | ""

Boolean

3.0.0

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).hasFill


hasStroke(): null | boolean | ""

Defined in: src/shapes/Object/Object.ts:735

return true if the object will draw a stroke Does not consider text styles. This is just a shortcut used at rendering time We want it to be an approximation and be fast. wrote to avoid extra caching, it has to return true when stroke happens, can guess when it will not happen at 100% chance, does not matter if it misses some use case where the stroke is invisible.

null | boolean | ""

Boolean

3.0.0

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).hasStroke


insertAt(index, …objects): number

Defined in: src/shapes/Group.ts:240

Inserts an object into collection at specified index

number

Index to insert object at

FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]

Object to insert

number

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).insertAt


intersectsWithObject(other): boolean

Defined in: src/shapes/Object/ObjectGeometry.ts:234

Checks if object intersects with another object

ObjectGeometry

Object to test

boolean

true if object intersects with another object

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).intersectsWithObject


intersectsWithRect(tl, br): boolean

Defined in: src/shapes/Object/ObjectGeometry.ts:220

Checks if object intersects with the scene rect formed by TL and BR In this case the rect is meant aligned with the axis of the canvas. TL is the TOP LEFT point while br is the BOTTOM RIGHT point

Point

Point

boolean

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).intersectsWithRect


isCacheDirty(skipCanvas): boolean

Defined in: src/shapes/Object/Object.ts:923

Check if cache is dirty and if is dirty clear the context. This check has a big side effect, it changes the underlying cache canvas if necessary. Do not call this method on your own to check if the cache is dirty, because if it is, it is also going to wipe the cache. This is badly designed and needs to be fixed.

boolean = false

skip canvas checks because this object is painted on parent canvas.

boolean

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).isCacheDirty


isContainedWithinObject(other): boolean

Defined in: src/shapes/Object/ObjectGeometry.ts:253

Checks if object is fully contained within area of another object

ObjectGeometry

Object to test

boolean

true if object is fully contained within area of another object

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).isContainedWithinObject


isContainedWithinRect(tl, br): boolean

Defined in: src/shapes/Object/ObjectGeometry.ts:261

Checks if object is fully contained within the scene rect formed by TL and BR

Point

Point

boolean

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).isContainedWithinRect


isControlVisible(controlKey): boolean

Defined in: src/shapes/Object/InteractiveObject.ts:584

Returns true if the specified control is visible, false otherwise.

string

The key of the control. Possible values are usually ‘tl’, ‘tr’, ‘br’, ‘bl’, ‘ml’, ‘mt’, ‘mr’, ‘mb’, ‘mtr’, but since the control api allow for any control name, can be any string.

boolean

true if the specified control is visible, false otherwise

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).isControlVisible


isDescendantOf(target): boolean

Defined in: src/shapes/Object/Object.ts:1614

Checks if object is descendant of target Should be used instead of Group.contains or StaticCanvas.contains for performance reasons

TAncestor

boolean

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).isDescendantOf


isEmpty(): boolean

Defined in: src/Collection.ts:128

Returns true if collection contains no objects

boolean

true if collection is empty

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).isEmpty


isInFrontOf<T>(other): undefined | boolean

Defined in: src/shapes/Object/Object.ts:1720

T extends Group

T

object to compare against

undefined | boolean

if objects do not share a common ancestor or they are strictly equal it is impossible to determine which is in front of the other; in such cases the function returns undefined

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).isInFrontOf


isNotVisible(): boolean

Defined in: src/shapes/Object/Object.ts:650

boolean

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).isNotVisible


isOnACache(): boolean

Defined in: src/shapes/Group.ts:488

Check if instance or its group are caching, recursively up

boolean


isOnScreen(): boolean

Defined in: src/shapes/Object/ObjectGeometry.ts:293

Checks if object is contained within the canvas with current viewportTransform the check is done stopping at first point that appears on screen

boolean

true if object is fully or partially contained within canvas

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).isOnScreen


isOverlapping<T>(other): boolean

Defined in: src/shapes/Object/ObjectGeometry.ts:271

T extends ObjectGeometry<ObjectEvents>

T

boolean

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).isOverlapping


isPartiallyOnScreen(): boolean

Defined in: src/shapes/Object/ObjectGeometry.ts:323

Checks if object is partially contained within the canvas with current viewportTransform

boolean

true if object is partially contained within canvas

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).isPartiallyOnScreen


isType(…types): boolean

Defined in: src/shapes/Object/Object.ts:1419

Returns true if any of the specified types is identical to the type of an instance

string[]

boolean

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).isType


item(index): FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>

Defined in: src/Collection.ts:120

Returns object at specified index

number

FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>

object at index

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).item


moveObjectTo(object, index): boolean

Defined in: src/Collection.ts:262

Moves an object to specified level in stack of drawn objects

FabricObject

Object to send

number

Position to move to

boolean

true if change occurred

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).moveObjectTo


needsItsOwnCache(): boolean

Defined in: src/shapes/Object/Object.ts:763

When returns 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

boolean

Boolean

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).needsItsOwnCache


off<K>(eventName): void

Defined in: src/Observable.ts:122

Unsubscribe all event listeners for eventname. Do not use this pattern. You could kill internal fabricJS events. We know we should have protected events for internal flows, but we don’t have yet

K extends keyof GroupEvents

K

event name (eg. ‘after:render’)

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).off

off<K>(eventName, handler): void

Defined in: src/Observable.ts:128

unsubscribe an event listener

K extends keyof GroupEvents

K

event name (eg. ‘after:render’)

TEventCallback

event listener to unsubscribe

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).off

off(handlers): void

Defined in: src/Observable.ts:133

unsubscribe event listeners

EventRegistryObject<GroupEvents>

handlers key/value pairs (eg. {‘after:render’: handler, ‘selection:cleared’: handler})

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).off

off(): void

Defined in: src/Observable.ts:137

unsubscribe all event listeners

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).off


on<K, E>(eventName, handler): VoidFunction

Defined in: src/Observable.ts:23

Observes specified event

K extends keyof GroupEvents

E extends TPointerEventInfo<TPointerEvent> | TPointerEventInfo<TPointerEvent> & object | TPointerEventInfo<WheelEvent> | TPointerEventInfo<TPointerEvent> & InEvent | TPointerEventInfo<TPointerEvent> & OutEvent | TPointerEventInfo<TPointerEvent> & TPointerEventInfo<TPointerEvent> & object | Partial<TEvent<TPointerEvent>> & object | Partial<TEvent<TPointerEvent>> & object | { target: Canvas | Group | StaticCanvas<StaticCanvasEvents>; } | { target: Canvas | Group | StaticCanvas<StaticCanvasEvents>; } | { path: FabricObject; } | TEventWithTarget<DragEvent> | DragEventData | DragEventData & InEvent | DragEventData & OutEvent | DropEventData | SimpleEventHandler<Event> | BasicTransformEvent<TPointerEvent> | BasicTransformEvent<TPointerEvent> & ModifyPathEvent | ModifiedEvent<TPointerEvent> | { target: FabricObject; } | { target: FabricObject; } | LayoutBeforeEvent | LayoutAfterEvent

K

Event name (eg. ‘after:render’)

TEventCallback<E>

Function that receives a notification when an event of the specified type occurs

VoidFunction

disposer

on

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).on

on(handlers): VoidFunction

Defined in: src/Observable.ts:27

Observes specified event

EventRegistryObject<GroupEvents>

key/value pairs (eg. {‘after:render’: handler, ‘selection:cleared’: handler})

VoidFunction

disposer

on

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).on


once<K, E>(eventName, handler): VoidFunction

Defined in: src/Observable.ts:62

Observes specified event once

K extends keyof GroupEvents

E extends TPointerEventInfo<TPointerEvent> | TPointerEventInfo<TPointerEvent> & object | TPointerEventInfo<WheelEvent> | TPointerEventInfo<TPointerEvent> & InEvent | TPointerEventInfo<TPointerEvent> & OutEvent | TPointerEventInfo<TPointerEvent> & TPointerEventInfo<TPointerEvent> & object | Partial<TEvent<TPointerEvent>> & object | Partial<TEvent<TPointerEvent>> & object | { target: Canvas | Group | StaticCanvas<StaticCanvasEvents>; } | { target: Canvas | Group | StaticCanvas<StaticCanvasEvents>; } | { path: FabricObject; } | TEventWithTarget<DragEvent> | DragEventData | DragEventData & InEvent | DragEventData & OutEvent | DropEventData | SimpleEventHandler<Event> | BasicTransformEvent<TPointerEvent> | BasicTransformEvent<TPointerEvent> & ModifyPathEvent | ModifiedEvent<TPointerEvent> | { target: FabricObject; } | { target: FabricObject; } | LayoutBeforeEvent | LayoutAfterEvent

K

Event name (eg. ‘after:render’)

TEventCallback<E>

Function that receives a notification when an event of the specified type occurs

VoidFunction

disposer

once

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).once

once(handlers): VoidFunction

Defined in: src/Observable.ts:66

Observes specified event once

EventRegistryObject<GroupEvents>

key/value pairs (eg. {‘after:render’: handler, ‘selection:cleared’: handler})

VoidFunction

disposer

once

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).once


onDeselect(_options?): boolean

Defined in: src/shapes/Object/InteractiveObject.ts:658

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

options sent from the upper functions

TPointerEvent

InteractiveFabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>

boolean

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).onDeselect


onDragStart(_e): boolean

Defined in: src/shapes/Object/InteractiveObject.ts:691

Override to customize Drag behavior
Fired once a drag session has started

DragEvent

boolean

true to handle the drag event

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).onDragStart


onSelect(_options?): boolean

Defined in: src/shapes/Object/InteractiveObject.ts:672

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

options sent from the upper functions

TPointerEvent

event if the process is generated by an event

boolean

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).onSelect


remove(…objects): FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]

Defined in: src/shapes/Group.ts:252

Remove objects

FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]

FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]

removed objects

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).remove


removeAll(): FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]

Defined in: src/shapes/Group.ts:319

Remove all objects

FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]

removed objects


render(ctx): void

Defined in: src/shapes/Group.ts:539

Renders instance on a given context

CanvasRenderingContext2D

context to render instance on

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).render


renderCache(this, options?): void

Defined in: src/shapes/Object/Object.ts:696

TCachedFabricObject

any

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).renderCache


renderDragSourceEffect(_e): void

Defined in: src/shapes/Object/InteractiveObject.ts:712

Override to customize drag and drop behavior render a specific effect when an object is the source of a drag event example: render the selection status for the part of text that is being dragged from a text object

DragEvent

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).renderDragSourceEffect


renderDropTargetEffect(_e): void

Defined in: src/shapes/Object/InteractiveObject.ts:724

Override to customize drag and drop behavior render a specific effect when an object is the target of a drag event used to show that the underly object can receive a drop, or to show how the object will change when dropping. example: show the cursor where the text is about to be dropped

DragEvent

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).renderDropTargetEffect


rotate(angle): void

Defined in: src/shapes/Object/Object.ts:1447

Sets “angle” of an instance with centered rotation

TDegree

Angle value (in degrees)

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).rotate


scale(value): void

Defined in: src/shapes/Object/ObjectGeometry.ts:372

Scales an object (equally by x and y)

number

Scale factor

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).scale


scaleToHeight(value): void

Defined in: src/shapes/Object/ObjectGeometry.ts:395

Scales an object to a given height, with respect to bounding box (scaling by x/y equally)

number

New height value

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).scaleToHeight


scaleToWidth(value): void

Defined in: src/shapes/Object/ObjectGeometry.ts:383

Scales an object to a given width, with respect to bounding box (scaling by x/y equally)

number

New width value

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).scaleToWidth


sendObjectBackwards(object, intersecting?): boolean

Defined in: src/Collection.ts:214

Moves an object or a selection down in stack of drawn objects An optional parameter, intersecting allows 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.

FabricObject

Object to send

boolean

If true, send object behind next lower intersecting object

boolean

true if change occurred

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).sendObjectBackwards


sendObjectToBack(object): boolean

Defined in: src/Collection.ts:178

Moves an object or the objects of a multiple selection to the bottom of the stack of drawn objects

FabricObject

Object to send to back

boolean

true if change occurred

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).sendObjectToBack


set(key, value?): Group

Defined in: src/CommonMethods.ts:29

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().

Property name or object (if object, iterate over the object properties)

string | Record<string, any>

any

Property value (if function, the value is passed into it and its return value is used as a new one)

Group

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).set


setControlsVisibility(options?): void

Defined in: src/shapes/Object/InteractiveObject.ts:611

Sets the visibility state of object controls, this is just a bulk option for setControlVisible;

Record<string, boolean> = {}

with an optional key per control example: {Boolean} [options.bl] true to enable the bottom-left control, false to disable it

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).setControlsVisibility


setControlVisible(controlKey, visible): void

Defined in: src/shapes/Object/InteractiveObject.ts:599

Sets the visibility of the specified control. please do not use.

string

The key of the control. Possible values are ‘tl’, ‘tr’, ‘br’, ‘bl’, ‘ml’, ‘mt’, ‘mr’, ‘mb’, ‘mtr’. but since the control api allow for any control name, can be any string.

boolean

true to set the specified control visible, false otherwise

void

discuss this overlap of priority here with the team. Andrea Bogazzi for details

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).setControlVisible


setCoords(): void

Defined in: src/shapes/Group.ts:521

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).setCoords


setOnGroup(): void

Defined in: src/shapes/Object/Object.ts:1479

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.

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).setOnGroup


setPositionByOrigin(pos, originX, originY): void

Defined in: src/shapes/Object/ObjectGeometry.ts:780

Sets the position of the object taking into consideration the object’s origin

Point

The new position of the object

TOriginX

Horizontal origin: ‘left’, ‘center’ or ‘right’

TOriginY

Vertical origin: ‘top’, ‘center’ or ‘bottom’

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).setPositionByOrigin


setRelativeX(value): void

Defined in: src/shapes/Object/ObjectGeometry.ts:123

number

x position according to object’s FabricObject#originX property in parent’s coordinate plane
if parent is canvas then this method is identical to setX

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).setRelativeX


setRelativeXY(point, originX?, originY?): void

Defined in: src/shapes/Object/ObjectGeometry.ts:186

As setXY, but in current parent’s coordinate plane (the current group if any or the canvas)

Point

position according to object’s FabricObject#originX FabricObject#originY properties in parent’s coordinate plane

TOriginX = ...

Horizontal origin: ‘left’, ‘center’ or ‘right’

TOriginY = ...

Vertical origin: ‘top’, ‘center’ or ‘bottom’

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).setRelativeXY


setRelativeY(value): void

Defined in: src/shapes/Object/ObjectGeometry.ts:139

number

y position according to object’s FabricObject#originY property in parent’s coordinate plane
if parent is canvas then this property is identical to setY

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).setRelativeY


setX(value): void

Defined in: src/shapes/Object/ObjectGeometry.ts:93

number

x position according to object’s FabricObject#originX property in canvas coordinate plane

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).setX


setXY(point, originX?, originY?): void

Defined in: src/shapes/Object/ObjectGeometry.ts:163

Set an object position to a particular point, the point is intended in absolute ( canvas ) coordinate. You can specify FabricObject#originX and FabricObject#originY values, that otherwise are the object’s current values.

Point

position in scene coordinate plane

TOriginX

Horizontal origin: ‘left’, ‘center’ or ‘right’

TOriginY

Vertical origin: ‘top’, ‘center’ or ‘bottom’

void

object.setXY(new Point(5, 5), 'left', 'bottom').

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).setXY


setY(value): void

Defined in: src/shapes/Object/ObjectGeometry.ts:107

number

y position according to object’s FabricObject#originY property in canvas coordinate plane

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).setY


shouldCache(): boolean

Defined in: src/shapes/Group.ts:455

Decide if the group should cache or not. Create its own cache level needsItsOwnCache should be used when the object drawing method requires a cache step. Generally you do not cache objects in groups because the group is already cached.

boolean

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).shouldCache


shouldStartDragging(_e): boolean

Defined in: src/shapes/Object/InteractiveObject.ts:682

Override to customize Drag behavior Fired from Canvas#_onMouseMove

TPointerEvent

boolean

true in order for the window to start a drag session

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).shouldStartDragging


size(): number

Defined in: src/Collection.ts:136

Returns a size of a collection (i.e: length of an array containing its objects)

number

Collection size

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).size


strokeBorders(ctx, size): void

Defined in: src/shapes/Object/InteractiveObject.ts:399

override this function in order to customize the drawing of the control box, e.g. rounded corners, different border style.

CanvasRenderingContext2D

ctx is rotated and translated so that (0,0) is at object’s center

Point

the control box size used

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).strokeBorders


toBlob(options): Promise<null | Blob>

Defined in: src/shapes/Object/Object.ts:1406

toDataURLOptions = {}

Promise<null | Blob>

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).toBlob


toCanvasElement(options): HTMLCanvasElement

Defined in: src/shapes/Object/Object.ts:1303

Converts an object into a HTMLCanvas element

ObjectToCanvasElementOptions = {}

Options object

HTMLCanvasElement

Returns DOM element with the FabricObject

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).toCanvasElement


toClipPathSVG(reviver?): string

Defined in: src/shapes/Group.ts:666

Returns svg clipPath representation of an instance

TSVGReviver

Method for further parsing of svg representation.

string

svg representation of an instance

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).toClipPathSVG


toDatalessObject(propertiesToInclude?): any

Defined in: src/shapes/Object/Object.ts:1854

Returns (dataless) object representation of an instance

any[]

Any properties that you might want to additionally include in the output

any

Object representation of an instance

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).toDatalessObject


toDataURL(options): string

Defined in: src/shapes/Object/Object.ts:1399

Converts an object into a data-url-like string

toDataURLOptions = {}

Options object

string

Returns a data: URL containing a representation of the object in the format specified by options.format

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).toDataURL


toggle(property): Group

Defined in: src/CommonMethods.ts:46

Toggles specified property from true to false or from false to true

string

Property to toggle

Group

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).toggle


toJSON(): any

Defined in: src/shapes/Object/Object.ts:1438

Returns a JSON representation of an instance

any

JSON

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).toJSON


toObject<T, K>(propertiesToInclude?): Pick<T, K> & SerializedGroupProps

Defined in: src/shapes/Group.ts:576

Returns object representation of an instance

T extends Omit<GroupProps & TClassProperties<Group>, keyof SerializedGroupProps>

K extends string | number | symbol = never

K[] = []

Any properties that you might want to additionally include in the output

Pick<T, K> & SerializedGroupProps

object representation of an instance

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).toObject


toString(): string

Defined in: src/shapes/Group.ts:601

Returns a string representation of an instance

string

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).toString


toSVG(this, reviver?): string

Defined in: src/shapes/Object/FabricObjectSVGExportMixin.ts:130

Returns svg representation of an instance

FabricObjectSVGExportMixin & FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>

TSVGReviver

Method for further parsing of svg representation.

string

svg representation of an instance

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).toSVG


transform(ctx): void

Defined in: src/shapes/Object/Object.ts:528

Transforms context when rendering an object

CanvasRenderingContext2D

Context

void

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).transform


transformMatrixKey(skipGroup): number[]

Defined in: src/shapes/Object/ObjectGeometry.ts:455

boolean = false

number[]

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).transformMatrixKey


translateToCenterPoint(point, originX, originY): Point

Defined in: src/shapes/Object/ObjectGeometry.ts:685

Translates the coordinates from origin to center coordinates (based on the object’s dimensions)

Point

The point which corresponds to the originX and originY params

TOriginX

Horizontal origin: ‘left’, ‘center’ or ‘right’

TOriginY

Vertical origin: ‘top’, ‘center’ or ‘bottom’

Point

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).translateToCenterPoint


translateToGivenOrigin(point, fromOriginX, fromOriginY, toOriginX, toOriginY): Point

Defined in: src/shapes/Object/ObjectGeometry.ts:657

Translates the coordinates from a set of origin to another (based on the object’s dimensions)

Point

The point which corresponds to the originX and originY params

TOriginX

Horizontal origin: ‘left’, ‘center’ or ‘right’

TOriginY

Vertical origin: ‘top’, ‘center’ or ‘bottom’

TOriginX

Horizontal origin: ‘left’, ‘center’ or ‘right’

TOriginY

Vertical origin: ‘top’, ‘center’ or ‘bottom’

Point

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).translateToGivenOrigin


translateToOriginPoint(center, originX, originY): Point

Defined in: src/shapes/Object/ObjectGeometry.ts:713

Translates the coordinates from center to origin coordinates (based on the object’s dimensions)

Point

The point which corresponds to center of the object

TOriginX

Horizontal origin: ‘left’, ‘center’ or ‘right’

TOriginY

Vertical origin: ‘top’, ‘center’ or ‘bottom’

Point

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).translateToOriginPoint


triggerLayout(options): void

Defined in: src/shapes/Group.ts:527

ImperativeLayoutOptions = {}

void


willDrawShadow(): boolean

Defined in: src/shapes/Group.ts:472

Check if this object or a child object will cast a shadow

boolean

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).willDrawShadow


static _fromObject<S>(__namedParameters, __namedParameters): Promise<S>

Defined in: src/shapes/Object/Object.ts:1907

S extends BaseFabricObject<Partial<ObjectProps>, SerializedObjectProps, ObjectEvents>

Record<string, unknown>

Abortable & object = {}

Promise<S>

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, )._fromObject


static createControls(): object

Defined in: src/shapes/Object/InteractiveObject.ts:167

Creates the default control object. If you prefer to have on instance of controls shared among all objects make this function return an empty object and add controls to the ownDefaults

object

controls: Record<string, Control>

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).createControls


static getDefaults(): Record<string, any>

Defined in: src/shapes/Group.ts:126

Record<string, any>

createCollectionMixin( FabricObject<GroupProps, SerializedGroupProps, GroupEvents>, ).getDefaults