Group

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

Returns

void

Overrides

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

_onStackOrderChanged()

_onStackOrderChanged(): void

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

Returns

void

Overrides

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

_removeCacheCanvas()

_removeCacheCanvas(): void

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

Remove cacheCanvas and its dimensions from the objects

Returns

void

Inherited from

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

_renderControls()

_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

Parameters

ctx

CanvasRenderingContext2D

Context to render on

styleOverride?

TStyleOverride = {}

properties to override the object style

Returns

void

Todo

move to interactivity

Inherited from

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

_setClippingProperties()

_setClippingProperties(ctx): void

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

Parameters

ctx

CanvasRenderingContext2D

Returns

void

Inherited from

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

_setFillStyles()

_setFillStyles(ctx, __namedParameters): void

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

Parameters

ctx

CanvasRenderingContext2D

__namedParameters

Pick<Group, "fill">

Returns

void

Inherited from

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

_setStrokeStyles()

_setStrokeStyles(ctx, decl): void

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

Parameters

ctx

CanvasRenderingContext2D

decl

Returns

void

Inherited from

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

_setupCompositeOperation()

_setupCompositeOperation(ctx): void

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

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

Parameters

ctx

CanvasRenderingContext2D

Rendering canvas context

Returns

void

Inherited from

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

_toSVG()

_toSVG(reviver?): string[]

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

Returns svg representation of an instance

Parameters

reviver?

TSVGReviver

Method for further parsing of svg representation.

Returns

string[]

svg representation of an instance

Overrides

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

add()

add(…objects): number

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

Add objects

Parameters

objects

…FabricObject[]

Returns

number

Overrides

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

addPaintOrder()

addPaintOrder(this): string

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

Parameters

this

FabricObjectSVGExportMixin & FabricObject

Returns

string

Inherited from

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

animate()

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

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

Animates object’s properties

Type Parameters

• T extends number | number[] | TColorArg

Parameters

animatable

Record<string, T>

map of keys and end values

options?

Partial<AnimationOptions<T>>

Returns

Record<string, TAnimation<T>>

map of animation contexts

As object — multiple properties

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

Tutorial

Inherited from

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

bringObjectForward()

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.

Parameters

object

Object to send

intersecting?

boolean

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

Returns

boolean

true if change occurred

Inherited from

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

bringObjectToFront()

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

Parameters

object

InteractiveFabricObject[]

Object to send

Returns

boolean

true if change occurred

Inherited from

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

calcACoords()

calcACoords(): TCornerPoint

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

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

Returns

TCornerPoint

Inherited from

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

calcOCoords()

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

Returns

Record<string, TOCoord>

Inherited from

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

calcOwnMatrix()

calcOwnMatrix(): TMat2D

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

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

Returns

TMat2D

transform matrix for the object

Inherited from

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

calcTransformMatrix()

calcTransformMatrix(skipGroup?): TMat2D

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

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

Parameters

skipGroup?

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.

Returns

TMat2D

transform matrix for the object

Inherited from

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

canDrop()

canDrop(_e): boolean

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

Override to customize drag and drop behavior

Parameters

_e

DragEvent

Returns

boolean

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

Inherited from

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

clearContextTop()

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.

Parameters

restoreManually?

boolean

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

Returns

undefined | CanvasRenderingContext2D

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

Todo

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

Inherited from

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

clone()

clone(propertiesToInclude?): Promise<Group>

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

Clones an instance.

Parameters

propertiesToInclude?

string[]

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

Returns

Promise<Group>

Inherited from

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

cloneAsImage()

cloneAsImage(options?): FabricImage

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

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.

Parameters

options?

ObjectToCanvasElementOptions

for clone as image, passed to toDataURL

Returns

FabricImage

Object cloned as image.

Todo

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

Inherited from

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

collectObjects()

collectObjects(bbox, options): InteractiveFabricObject[]

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.

Parameters

bbox

TBBox

a bounding box in scene coordinates

options

an object with includeIntersecting

includeIntersecting

boolean = true

Returns

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

Inherited from

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

complexity()

complexity(): number

Defined in: src/Collection.ts:165

Returns number representation of a collection complexity

Returns

number

complexity

Inherited from

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

contains()

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)

Parameters

object

Object to check against

deep?

boolean

true to check all descendants, false to check only _objects

Returns

boolean

true if collection contains an object

Inherited from

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

containsPoint()

containsPoint(point): boolean

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

Checks if point is inside the object

Parameters

point

Point to check against

Returns

boolean

true if point is inside the object

Inherited from

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

dispose()

dispose(): void

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

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

Returns

void

Overrides

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

drawBorders()

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

Parameters

ctx

CanvasRenderingContext2D

Context to draw on

options

Required<Omit<TComposeMatrixArgs, "flipY" | "flipX">>

object representing current object parameters

styleOverride?

TStyleOverride

object to override the object style

Returns

void

Inherited from

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

drawCacheOnCanvas()

drawCacheOnCanvas(this, ctx): void

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

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

Parameters

this

TCachedFabricObject<BaseFabricObject>

ctx

CanvasRenderingContext2D

Context to render on

Returns

void

Inherited from

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

drawClipPathOnCache()

drawClipPathOnCache(ctx, clipPath, canvasWithClipPath): void

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

Execute the drawing operation for an object clipPath

Parameters

ctx

CanvasRenderingContext2D

Context to render on

clipPath

BaseFabricObject

canvasWithClipPath

HTMLCanvasElement

Returns

void

Inherited from

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

drawControls()

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.

Parameters

ctx

CanvasRenderingContext2D

Context to draw on

styleOverride

Partial<Pick<InteractiveFabricObject, "cornerStyle" | "cornerSize" | "cornerColor" | "cornerStrokeColor" | "cornerDashArray" | "transparentCorners">> = {}

object to override the object style

Returns

void

Inherited from

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

drawControlsConnectingLines()

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

Parameters

ctx

CanvasRenderingContext2D

Context to draw on

size

object size x = width, y = height

Returns

void

Inherited from

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

drawObject()

drawObject(ctx, forClipping, context): void

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

Execute the drawing operation for an object on a specified context

Parameters

ctx

CanvasRenderingContext2D

Context to render on

forClipping

undefined | boolean

context

DrawContext

Returns

void

Overrides

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

drawSelectionBackground()

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

Parameters

ctx

CanvasRenderingContext2D

Context to draw on

Returns

void

Todo

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

Inherited from

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

findCommonAncestors()

findCommonAncestors<T>(other): AncestryComparison

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

Compare ancestors

Type Parameters

• T extends Group

Parameters

other

T

Returns

AncestryComparison

an object that represent the ancestry situation.

Inherited from

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

findNewLowerIndex()

findNewLowerIndex(object, idx, intersecting?): number

Defined in: src/Collection.ts:272

Parameters

object

idx

number

intersecting?

boolean

Returns

number

Inherited from

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

findNewUpperIndex()

findNewUpperIndex(object, idx, intersecting?): number

Defined in: src/Collection.ts:295

Parameters

object

idx

number

intersecting?

boolean

Returns

number

Inherited from

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

fire()

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

Defined in: src/Observable.ts:167

Fires event with an optional options object

Type Parameters

• K extends keyof GroupEvents

Parameters

eventName

K

Event name to fire

options?

GroupEvents[K]

Options object

Returns

void

Inherited from

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

forEachControl()

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

Parameters

fn

(control, key, fabricObject) => any

function to iterate over the controls over

Returns

void

Inherited from

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

forEachObject()

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.

Parameters

callback

(object, index, array) => any

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

Returns

void

Inherited from

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

get()

get(property): any

Defined in: src/CommonMethods.ts:59

Basic getter

Parameters

property

string

Property name

Returns

any

value of a property

Inherited from

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

getActiveControl()

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

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

Returns

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

Inherited from

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

getAncestors()

getAncestors(): Ancestors

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

Returns

Ancestors

ancestors (excluding ActiveSelection) from bottom to top

Inherited from

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

getBoundingRect()

getBoundingRect(): TBBox

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

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

Returns

TBBox

Object with left, top, width, height properties

Inherited from

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

getCanvasRetinaScaling()

getCanvasRetinaScaling(): number

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

Returns

number

Inherited from

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

getCenterPoint()

getCenterPoint(): Point

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

Returns the center coordinates of the object relative to canvas

Returns

Inherited from

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

getCoords()

getCoords(): Point[]

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

Returns

Point[]

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

Inherited from

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

getObjectOpacity()

getObjectOpacity(): number

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

Return the object opacity counting also the group property

Returns

number

Inherited from

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

getObjects()

getObjects(…types?): FabricObject[]

Defined in: src/Collection.ts:108

Returns an array of children objects of this instance

Parameters

types?

…string[]

When specified, only objects of these types are returned

Returns

FabricObject[]

Inherited from

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

getObjectScaling()

getObjectScaling(): Point

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

Return the object scale factor counting also the group scaling

Returns

Inherited from

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

getPointByOrigin()

getPointByOrigin(originX, originY): Point

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

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? )

Parameters

originX

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

originY

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

Returns

Inherited from

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

getRelativeCenterPoint()

getRelativeCenterPoint(): Point

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

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

Returns

Inherited from

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

getRelativeX()

getRelativeX(): number

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

Returns

number

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

Inherited from

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

getRelativeXY()

getRelativeXY(): Point

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

Returns

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

Inherited from

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

getRelativeY()

getRelativeY(): number

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

Returns

number

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

Inherited from

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

getScaledHeight()

getScaledHeight(): number

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

Returns height of an object bounding box counting transformations

Returns

number

height value

Todo

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

Inherited from

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

getScaledWidth()

getScaledWidth(): number

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

Returns width of an object’s bounding box counting transformations

Returns

number

width value

Todo

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

Inherited from

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

getSvgCommons()

getSvgCommons(this): string

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

Returns id attribute for svg output

Parameters

this

FabricObjectSVGExportMixin & FabricObject & object

Returns

string

Inherited from

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

getSvgFilter()

getSvgFilter(this): string

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

Returns filter for svg shadow

Parameters

this

FabricObjectSVGExportMixin & FabricObject

Returns

string

Inherited from

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

getSvgStyles()

getSvgStyles(): string

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

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

Returns

string

Overrides

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

getSvgTransform()

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

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

Returns transform-string for svg-export

Parameters

this

FabricObjectSVGExportMixin & FabricObject

full?

boolean

additionalTransform?

string = ''

Returns

string

Inherited from

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

getTotalAngle()

getTotalAngle(): TDegree

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

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

Returns

TDegree

Inherited from

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

getTotalObjectScaling()

getTotalObjectScaling(): Point

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

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

Returns

object with scaleX and scaleY properties

Inherited from

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

getViewportTransform()

getViewportTransform(): TMat2D

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

Retrieves viewportTransform from Object’s canvas if available

Returns

TMat2D

Inherited from

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

getX()

getX(): number

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

Returns

number

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

Inherited from

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

getXY()

getXY(): Point

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

Returns

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

Inherited from

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

getY()

getY(): number

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

Returns

number

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

Inherited from

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

hasCommonAncestors()

hasCommonAncestors<T>(other): boolean

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

Type Parameters

• T extends Group

Parameters

other

T

Returns

boolean

Inherited from

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

hasFill()

hasFill(): null | boolean | ""

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

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.

Returns

null | boolean | ""

Boolean

Since

3.0.0

Inherited from

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

hasStroke()

hasStroke(): null | boolean | ""

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

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.

Returns

null | boolean | ""

Boolean

Since

3.0.0

Inherited from

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

insertAt()

insertAt(index, …objects): number

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

Inserts an object into collection at specified index

Parameters

index

number

Index to insert object at

objects

…FabricObject[]

Object to insert

Returns

number

Overrides

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

intersectsWithObject()

intersectsWithObject(other): boolean

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

Checks if object intersects with another object

Parameters

other

ObjectGeometry

Object to test

Returns

boolean

true if object intersects with another object

Inherited from

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

intersectsWithRect()

intersectsWithRect(tl, br): boolean

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

Checks if object intersects with the scene rect formed by tl and br

Parameters

tl

br

Returns

boolean

Inherited from

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

isCacheDirty()

isCacheDirty(skipCanvas): boolean

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

Check if cache is dirty

Parameters

skipCanvas

boolean = false

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

Returns

boolean

Inherited from

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

isContainedWithinObject()

isContainedWithinObject(other): boolean

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

Checks if object is fully contained within area of another object

Parameters

other

ObjectGeometry

Object to test

Returns

boolean

true if object is fully contained within area of another object

Inherited from

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

isContainedWithinRect()

isContainedWithinRect(tl, br): boolean

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

Checks if object is fully contained within the scene rect formed by tl and br

Parameters

tl

br

Returns

boolean

Inherited from

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

isControlVisible()

isControlVisible(controlKey): boolean

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

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

Parameters

controlKey

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.

Returns

boolean

true if the specified control is visible, false otherwise

Inherited from

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

isDescendantOf()

isDescendantOf(target): boolean

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

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

Parameters

target

TAncestor

Returns

boolean

Inherited from

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

isEmpty()

isEmpty(): boolean

Defined in: src/Collection.ts:128

Returns true if collection contains no objects

Returns

boolean

true if collection is empty

Inherited from

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

isInFrontOf()

isInFrontOf<T>(other): undefined | boolean

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

Type Parameters

• T extends Group

Parameters

other

T

object to compare against

Returns

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

Inherited from

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

isNotVisible()

isNotVisible(): boolean

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

Returns

boolean

Inherited from

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

isOnACache()

isOnACache(): boolean

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

Check if instance or its group are caching, recursively up

Returns

boolean

isOnScreen()

isOnScreen(): boolean

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

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

Returns

boolean

true if object is fully or partially contained within canvas

Inherited from

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

isOverlapping()

isOverlapping<T>(other): boolean

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

Type Parameters

• T extends ObjectGeometry

Parameters

other

T

Returns

boolean

Inherited from

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

isPartiallyOnScreen()

isPartiallyOnScreen(): boolean

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

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

Returns

boolean

true if object is partially contained within canvas

Inherited from

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

isType()

isType(…types): boolean

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

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

Parameters

types

…string[]

Returns

boolean

Inherited from

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

item()

item(index): FabricObject

Defined in: src/Collection.ts:120

Returns object at specified index

Parameters

index

number

Returns

object at index

Inherited from

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

moveObjectTo()

moveObjectTo(object, index): boolean

Defined in: src/Collection.ts:262

Moves an object to specified level in stack of drawn objects

Parameters

object

InteractiveFabricObject

Object to send

index

number

Position to move to

Returns

boolean

true if change occurred

Inherited from

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

needsItsOwnCache()

needsItsOwnCache(): boolean

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

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

boolean

Boolean

Inherited from

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

off()

Call Signature

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

Type Parameters

• K extends keyof GroupEvents

Parameters

eventName

K

event name (eg. ‘after:render’)

Returns

void

Inherited from

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

Call Signature

off<K>(eventName, handler): void

Defined in: src/Observable.ts:128

unsubscribe an event listener

Type Parameters

• K extends keyof GroupEvents

Parameters

eventName

K

event name (eg. ‘after:render’)

handler

TEventCallback<any>

event listener to unsubscribe

Returns

void

Inherited from

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

Call Signature

off(handlers): void

Defined in: src/Observable.ts:133

unsubscribe event listeners

Parameters

handlers

EventRegistryObject<GroupEvents>

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

Returns

void

Inherited from

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

Call Signature

off(): void

Defined in: src/Observable.ts:137

unsubscribe all event listeners

Returns

void

Inherited from

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

on()

Call Signature

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

Defined in: src/Observable.ts:23

Observes specified event

Type Parameters

• K extends keyof GroupEvents

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

Parameters

eventName

K

Event name (eg. ‘after:render’)

handler

TEventCallback<E>

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

Returns

VoidFunction

disposer

Alias

Inherited from

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

Call Signature

on(handlers): VoidFunction

Defined in: src/Observable.ts:27

Observes specified event

Parameters

handlers

EventRegistryObject<GroupEvents>

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

Returns

VoidFunction

disposer

Alias

Inherited from

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

once()

Call Signature

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

Defined in: src/Observable.ts:62

Observes specified event once

Type Parameters

• K extends keyof GroupEvents

Parameters

eventName

K

Event name (eg. ‘after:render’)

handler

TEventCallback<E>

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

Returns

VoidFunction

disposer

Alias

once

Inherited from

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

Call Signature

once(handlers): VoidFunction

Defined in: src/Observable.ts:66

Observes specified event once

Parameters

handlers

EventRegistryObject<GroupEvents>

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

Returns

VoidFunction

disposer

Alias

once

Inherited from

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

onDeselect()

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

Parameters

_options?

options sent from the upper functions

e

TPointerEvent

object

Returns

boolean

Inherited from

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

onDragStart()

onDragStart(_e): boolean

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

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

Parameters

_e

DragEvent

Returns

boolean

true to handle the drag event

Inherited from

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

onSelect()

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

Parameters

_options?

options sent from the upper functions

e

TPointerEvent

event if the process is generated by an event

Returns

boolean

Inherited from

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

remove()

remove(…objects): FabricObject[]

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

Remove objects

Parameters

objects

…FabricObject[]

Returns

FabricObject[]

removed objects

Overrides

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

removeAll()

removeAll(): FabricObject[]

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

Remove all objects

Returns

FabricObject[]

removed objects

render()

render(ctx): void

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

Renders instance on a given context

Parameters

ctx

CanvasRenderingContext2D

context to render instance on

Returns

void

Overrides

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

renderCache()

renderCache(this, options?): void

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

Parameters

this

TCachedFabricObject<BaseFabricObject>

options?

any

Returns

void

Inherited from

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

renderDragSourceEffect()

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

Parameters

_e

DragEvent

Returns

void

Inherited from

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

renderDropTargetEffect()

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

Parameters

_e

DragEvent

Returns

void

Inherited from

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

rotate()

rotate(angle): void

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

Sets “angle” of an instance with centered rotation

Parameters

angle

TDegree

Angle value (in degrees)

Returns

void

Inherited from

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

scale()

scale(value): void

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

Scales an object (equally by x and y)

Parameters

value

number

Scale factor

Returns

void

Inherited from

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

scaleToHeight()

scaleToHeight(value): void

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

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

Parameters

value

number

New height value

Returns

void

Inherited from

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

scaleToWidth()

scaleToWidth(value): void

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

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

Parameters

value

number

New width value

Returns

void

Inherited from

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

sendObjectBackwards()

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.

Parameters

object

Object to send

intersecting?

boolean

If true, send object behind next lower intersecting object

Returns

boolean

true if change occurred

Inherited from

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

sendObjectToBack()

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

Parameters

object

Object to send to back

Returns

boolean

true if change occurred

Inherited from

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

set()

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

Parameters

key

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

string | Record<string, any>

value?

any

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

Returns

Group

Inherited from

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

setControlsVisibility()

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;

Parameters

options?

Record<string, boolean> = {}

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

Returns

void

Inherited from

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

setControlVisible()

setControlVisible(controlKey, visible): void

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

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

Parameters

controlKey

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.

visible

boolean

true to set the specified control visible, false otherwise

Returns

void

Todo

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

Inherited from

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

setCoords()

setCoords(): void

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

Returns

void

Overrides

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

setOnGroup()

setOnGroup(): void

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

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.

Returns

void

Inherited from

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

setPositionByOrigin()

setPositionByOrigin(pos, originX, originY): void

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

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

Parameters

pos

The new position of the object

originX

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

originY

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

Returns

void

Inherited from

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

setRelativeX()

setRelativeX(value): void

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

Parameters

value

number

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

Returns

void

Inherited from

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

setRelativeXY()

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)

Parameters

point

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

originX?

TOriginX = ...

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

originY?

TOriginY = ...

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

Returns

void

Inherited from

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

setRelativeY()

setRelativeY(value): void

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

Parameters

value

number

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

Returns

void

Inherited from

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

setX()

setX(value): void

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

Parameters

value

number

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

Returns

void

Inherited from

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

setXY()

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 originX and originY values, that otherwise are the object’s current values.

Parameters

point

position in scene coordinate plane

originX?

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

originY?

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

Returns

void

Example

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

Inherited from

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

setY()

setY(value): void

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

Parameters

value

number

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

Returns

void

Inherited from

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

shouldCache()

shouldCache(): boolean

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

Decide if the object should cache or not. Create its own cache level 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 is already cached.

Returns

boolean

Overrides

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

shouldStartDragging()

shouldStartDragging(_e): boolean

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

Override to customize Drag behavior Fired from Canvas#_onMouseMove

Parameters

_e

TPointerEvent

Returns

boolean

true in order for the window to start a drag session

Inherited from

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

size()

size(): number

Defined in: src/Collection.ts:136

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

Returns

number

Collection size

Inherited from

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

strokeBorders()

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.

Parameters

ctx

CanvasRenderingContext2D

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

size

the control box size used

Returns

void

Inherited from

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

toCanvasElement()

toCanvasElement(options): HTMLCanvasElement

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

Converts an object into a HTMLCanvas element

Parameters

options

ObjectToCanvasElementOptions = {}

Options object

Returns

HTMLCanvasElement

Returns DOM element

Inherited from

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

toClipPathSVG()

toClipPathSVG(reviver?): string

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

Returns svg clipPath representation of an instance

Parameters

reviver?

TSVGReviver

Method for further parsing of svg representation.

Returns

string

svg representation of an instance

Overrides

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

toDatalessObject()

toDatalessObject(propertiesToInclude?): any

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

Returns (dataless) object representation of an instance

Parameters

propertiesToInclude?

any[]

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

Returns

any

Object representation of an instance

Inherited from

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

toDataURL()

toDataURL(options): string

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

Converts an object into a data-url-like string

Parameters

options

toDataURLOptions = {}

Options object

Returns

string

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

Inherited from

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

toggle()

toggle(property): Group

Defined in: src/CommonMethods.ts:46

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

Parameters

property

string

Property to toggle

Returns

Group

Inherited from

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

toJSON()

toJSON(): any

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

Returns a JSON representation of an instance

Returns

any

JSON

Inherited from

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

toObject()

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

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

Returns object representation of an instance

Type Parameters

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

• K extends string | number | symbol = never

Parameters

propertiesToInclude?

K[] = []

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

Returns

Pick<T, K> & SerializedGroupProps

object representation of an instance

Overrides

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

toString()

toString(): string

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

Returns a string representation of an instance

Returns

string

Overrides

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

toSVG()

toSVG(this, reviver?): string

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

Returns svg representation of an instance

Parameters

this

FabricObjectSVGExportMixin & FabricObject

reviver?

TSVGReviver

Method for further parsing of svg representation.

Returns

string

svg representation of an instance

Inherited from

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

transform()

transform(ctx): void

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

Transforms context when rendering an object

Parameters

ctx

CanvasRenderingContext2D

Context

Returns

void

Inherited from

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

transformMatrixKey()

transformMatrixKey(skipGroup): number[]

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

Parameters

skipGroup

boolean = false

Returns

number[]

Inherited from

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

translateToCenterPoint()

translateToCenterPoint(point, originX, originY): Point

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

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

Parameters

point

The point which corresponds to the originX and originY params

originX

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

originY

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

Returns

Inherited from

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

translateToGivenOrigin()

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

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

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

Parameters

point

The point which corresponds to the originX and originY params

fromOriginX

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

fromOriginY

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

toOriginX

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

toOriginY

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

Returns

Inherited from

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

translateToOriginPoint()

translateToOriginPoint(center, originX, originY): Point

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

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

Parameters

center

The point which corresponds to center of the object

originX

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

originY

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

Returns