Skip to content

BaseFabricObject

Root object class from which all 2d shape classes inherit from

Tutorial

http://fabricjs.com/fabric-intro-part-1#objects

Fires

added

Fires

removed

Fires

selected

Fires

deselected

Fires

rotating

Fires

scaling

Fires

moving

Fires

skewing

Fires

modified

Fires

mousedown

Fires

mouseup

Fires

mouseover

Fires

mouseout

Fires

mousewheel

Fires

mousedblclick

Fires

dragover

Fires

dragenter

Fires

dragleave

Fires

drop

Extends

  • ObjectGeometry<EventSpec>

Extended by

Type Parameters

Props extends TOptions<ObjectProps> = Partial<ObjectProps>

SProps extends SerializedObjectProps = SerializedObjectProps

EventSpec extends ObjectEvents = ObjectEvents

Implements

  • ObjectProps

Constructors

new BaseFabricObject()

new BaseFabricObject<Props, SProps, EventSpec>(options?): BaseFabricObject<Props, SProps, EventSpec>

Constructor

Parameters

options?: Props

Options object

Returns

BaseFabricObject<Props, SProps, EventSpec>

Overrides

ObjectGeometry<EventSpec>.constructor

Defined in

src/shapes/Object/Object.ts:373

Properties

aCoords

aCoords: TCornerPoint

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

Inherited from

ObjectGeometry.aCoords

Defined in

src/shapes/Object/ObjectGeometry.ts:63


absolutePositioned

absolutePositioned: boolean

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

Default

false

Implementation of

ObjectProps.absolutePositioned

Defined in

src/shapes/Object/Object.ts:218


angle

angle: TDegree

Angle of rotation of an object (in degrees)

Default

0

Implementation of

ObjectProps.angle

Inherited from

ObjectGeometry.angle

Defined in

src/shapes/Object/ObjectGeometry.ts:581


backgroundColor

backgroundColor: string

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

Default

Implementation of

ObjectProps.backgroundColor

Defined in

src/shapes/Object/Object.ts:205


centeredRotation

centeredRotation: boolean

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.

Since

1.3.4

Default

Implementation of

ObjectProps.centeredRotation

Defined in

src/shapes/Object/Object.ts:219


centeredScaling

centeredScaling: boolean

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

Since

1.3.4

Default

Implementation of

ObjectProps.centeredScaling

Defined in

src/shapes/Object/Object.ts:220


clipPath?

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

Implementation of

ObjectProps.clipPath

Defined in

src/shapes/Object/Object.ts:216


dirty

dirty: boolean

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

Default

true

Defined in

src/shapes/Object/Object.ts:245


excludeFromExport

excludeFromExport: boolean

When true, object is not exported in OBJECT/JSON

Since

1.6.3

Default

Implementation of

ObjectProps.excludeFromExport

Defined in

src/shapes/Object/Object.ts:212


fill

fill: null | string | TFiller

Implementation of

ObjectProps.fill

Defined in

src/shapes/Object/Object.ts:195


fillRule

fillRule: CanvasFillRule

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)

Default

nonzero

Implementation of

ObjectProps.fillRule

Defined in

src/shapes/Object/Object.ts:196


flipX

flipX: boolean

When true, an object is rendered as flipped horizontally

Default

false

Implementation of

ObjectProps.flipX

Inherited from

ObjectGeometry.flipX

Defined in

src/shapes/Object/ObjectGeometry.ts:567


flipY

flipY: boolean

When true, an object is rendered as flipped vertically

Default

false

Implementation of

ObjectProps.flipY

Inherited from

ObjectGeometry.flipY

Defined in

src/shapes/Object/ObjectGeometry.ts:568


globalCompositeOperation

globalCompositeOperation: GlobalCompositeOperation

Composite rule used for canvas globalCompositeOperation

Default

Implementation of

ObjectProps.globalCompositeOperation

Defined in

src/shapes/Object/Object.ts:204


height

height: number

Object height

Default

Implementation of

ObjectProps.height

Inherited from

ObjectGeometry.height

Defined in

src/shapes/Object/ObjectGeometry.ts:566


includeDefaultValues

includeDefaultValues: boolean

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

Default

Implementation of

ObjectProps.includeDefaultValues

Defined in

src/shapes/Object/Object.ts:211


inverted

inverted: boolean

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

Default

false

Implementation of

ObjectProps.inverted

Defined in

src/shapes/Object/Object.ts:217


left

left: number

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

Default

0

Implementation of

ObjectProps.left

Inherited from

ObjectGeometry.left

Defined in

src/shapes/Object/ObjectGeometry.ts:564


matrixCache?

optional matrixCache: TMatrixCache

storage cache for object full transform matrix

Inherited from

ObjectGeometry.matrixCache

Defined in

src/shapes/Object/ObjectGeometry.ts:73


minScaleLimit

minScaleLimit: number

Minimum allowed scale value of an object

Default

0

Implementation of

ObjectProps.minScaleLimit

Defined in

src/shapes/Object/Object.ts:190


objectCaching

objectCaching: boolean

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

Since

1.7.0

Default

true

Implementation of

ObjectProps.objectCaching

Defined in

src/shapes/Object/Object.ts:214


opacity

opacity: number

Opacity of an object

Default

1

Implementation of

ObjectProps.opacity

Defined in

src/shapes/Object/Object.ts:192


originX

originX: TOriginX

Implementation of

ObjectProps.originX

Inherited from

ObjectGeometry.originX

Defined in

src/shapes/Object/ObjectGeometry.ts:576


originY

originY: TOriginY

Implementation of

ObjectProps.originY

Inherited from

ObjectGeometry.originY

Defined in

src/shapes/Object/ObjectGeometry.ts:580


ownMatrixCache?

optional ownMatrixCache: TMatrixCache

storage cache for object transform matrix

Inherited from

ObjectGeometry.ownMatrixCache

Defined in

src/shapes/Object/ObjectGeometry.ts:68


padding

padding: number

Padding between object and its controlling borders (in pixels)

Default

0

Inherited from

ObjectGeometry.padding

Defined in

src/shapes/Object/ObjectGeometry.ts:53


paintFirst

paintFirst: "fill" | "stroke"

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

Default

Implementation of

ObjectProps.paintFirst

Defined in

src/shapes/Object/Object.ts:194


parent?

optional parent: Group

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

Defined in

src/shapes/Object/Object.ts:1636


scaleX

scaleX: number

Object scale factor (horizontal)

Default

1

Implementation of

ObjectProps.scaleX

Inherited from

ObjectGeometry.scaleX

Defined in

src/shapes/Object/ObjectGeometry.ts:569


scaleY

scaleY: number

Object scale factor (vertical)

Default

1

Implementation of

ObjectProps.scaleY

Inherited from

ObjectGeometry.scaleY

Defined in

src/shapes/Object/ObjectGeometry.ts:570


shadow

shadow: null | Shadow

Implementation of

ObjectProps.shadow

Defined in

src/shapes/Object/Object.ts:207


skewX

skewX: number

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

Default

0

Implementation of

ObjectProps.skewX

Inherited from

ObjectGeometry.skewX

Defined in

src/shapes/Object/ObjectGeometry.ts:571


skewY

skewY: number

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

Default

0

Implementation of

ObjectProps.skewY

Inherited from

ObjectGeometry.skewY

Defined in

src/shapes/Object/ObjectGeometry.ts:572


stroke

stroke: null | string | TFiller

Implementation of

ObjectProps.stroke

Defined in

src/shapes/Object/Object.ts:197


strokeDashArray

strokeDashArray: null | number[]

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

Default

null;

Implementation of

ObjectProps.strokeDashArray

Defined in

src/shapes/Object/Object.ts:198


strokeDashOffset

strokeDashOffset: number

Line offset of an object’s stroke

Default

0

Implementation of

ObjectProps.strokeDashOffset

Defined in

src/shapes/Object/Object.ts:199


strokeLineCap

strokeLineCap: CanvasLineCap

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

Default

butt

Implementation of

ObjectProps.strokeLineCap

Defined in

src/shapes/Object/Object.ts:200


strokeLineJoin

strokeLineJoin: CanvasLineJoin

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

Default

Implementation of

ObjectProps.strokeLineJoin

Defined in

src/shapes/Object/Object.ts:201


strokeMiterLimit

strokeMiterLimit: number

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

Default

4

Implementation of

ObjectProps.strokeMiterLimit

Defined in

src/shapes/Object/Object.ts:202


strokeUniform

strokeUniform: boolean

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

Since

2.6.0

Default

false

Default

false

Implementation of

ObjectProps.strokeUniform

Inherited from

ObjectGeometry.strokeUniform

Defined in

src/shapes/Object/ObjectGeometry.ts:583


strokeWidth

strokeWidth: number

Width of a stroke used to render this object

Default

1

Implementation of

ObjectProps.strokeWidth

Inherited from

ObjectGeometry.strokeWidth

Defined in

src/shapes/Object/ObjectGeometry.ts:582


top

top: number

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

Default

0

Implementation of

ObjectProps.top

Inherited from

ObjectGeometry.top

Defined in

src/shapes/Object/ObjectGeometry.ts:563


visible

visible: boolean

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

Default

Implementation of

ObjectProps.visible

Defined in

src/shapes/Object/Object.ts:209


width

width: number

Object width

Default

Implementation of

ObjectProps.width

Inherited from

ObjectGeometry.width

Defined in

src/shapes/Object/ObjectGeometry.ts:565


cacheProperties

static cacheProperties: string[]

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

Defined in

src/shapes/Object/Object.ts:237


colorProperties

static colorProperties: string[]

List of properties to consider for animating colors.

Defined in

src/shapes/Object/Object.ts:1543


customProperties

static customProperties: string[] = []

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

Defined in

src/shapes/Object/Object.ts:1784


ownDefaults

static ownDefaults: Partial<TClassProperties<BaseFabricObject<Partial<ObjectProps>, SerializedObjectProps, ObjectEvents>>> = fabricObjectDefaultValues

Defined in

src/shapes/Object/Object.ts:330


stateProperties

static stateProperties: string[]

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

Defined in

src/shapes/Object/Object.ts:228


type

static type: string = 'FabricObject'

The class type. This is used for serialization and deserialization purposes and internally it can be used to identify classes. When we transform a class in a plain JS object we need a way to recognize which class it was, and the type is the way we do that. It has no other purposes and you should not give one. Hard to reach on instances and please do not use to drive instance’s logic (this.constructor.type). To idenfity a class use instanceof class ( instanceof Rect ). We do not do that in fabricJS code because we want to try to have code splitting possible.

Defined in

src/shapes/Object/Object.ts:346

Accessors

type

get type(): string

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

TODO

add sustainable warning message

set type(value): void

Parameters

value: string

Returns

string

Defined in

src/shapes/Object/Object.ts:357

Methods

_drawClipPath()

_drawClipPath(ctx, clipPath, context): void

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

Parameters

ctx: CanvasRenderingContext2D

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

context: DrawContext

Returns

void

Defined in

src/shapes/Object/Object.ts:920


_limitCacheSize()

_limitCacheSize(dims): any

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.

Parameters

dims: any

Returns

any

.width width of canvas

.height height of canvas

.zoomX zoomX zoom value to unscale the canvas before drawing cache

.zoomY zoomY zoom value to unscale the canvas before drawing cache

Defined in

src/shapes/Object/Object.ts:406


_removeCacheCanvas()

_removeCacheCanvas(): void

Remove cacheCanvas and its dimensions from the objects

Returns

void

Defined in

src/shapes/Object/Object.ts:756


_setClippingProperties()

_setClippingProperties(ctx): void

Parameters

ctx: CanvasRenderingContext2D

Returns

void

Defined in

src/shapes/Object/Object.ts:1062


_setFillStyles()

_setFillStyles(ctx, __namedParameters): void

Parameters

ctx: CanvasRenderingContext2D

__namedParameters: Pick<BaseFabricObject<Props, SProps, EventSpec>, "fill">

Returns

void

Defined in

src/shapes/Object/Object.ts:1051


_setStrokeStyles()

_setStrokeStyles(ctx, decl): void

Parameters

ctx: CanvasRenderingContext2D

decl: Pick<BaseFabricObject<Props, SProps, EventSpec>, "stroke" | "strokeDashOffset" | "strokeLineCap" | "strokeLineJoin" | "strokeMiterLimit" | "strokeWidth">

Returns

void

Defined in

src/shapes/Object/Object.ts:1009


_setupCompositeOperation()

_setupCompositeOperation(ctx): void

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

Defined in

src/shapes/Object/Object.ts:1518


animate()

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

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

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

Defined in

src/shapes/Object/Object.ts:1557


calcACoords()

calcACoords(): TCornerPoint

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

ObjectGeometry.calcACoords

Defined in

src/shapes/Object/ObjectGeometry.ts:427


calcOwnMatrix()

calcOwnMatrix(): TMat2D

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

ObjectGeometry.calcOwnMatrix

Defined in

src/shapes/Object/ObjectGeometry.ts:513


calcTransformMatrix()

calcTransformMatrix(skipGroup?): TMat2D

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

ObjectGeometry.calcTransformMatrix

Defined in

src/shapes/Object/ObjectGeometry.ts:485


clone()

clone(propertiesToInclude?): Promise<BaseFabricObject<Props, SProps, EventSpec>>

Clones an instance.

Parameters

propertiesToInclude?: string[]

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

Returns

Promise<BaseFabricObject<Props, SProps, EventSpec>>

Defined in

src/shapes/Object/Object.ts:1292


cloneAsImage()

cloneAsImage(options?): FabricImage<Partial<ImageProps>, SerializedImageProps, ObjectEvents>

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<Partial<ImageProps>, SerializedImageProps, ObjectEvents>

Object cloned as image.

Todo

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

Defined in

src/shapes/Object/Object.ts:1318


complexity()

complexity(): number

Returns complexity of an instance

Returns

number

complexity of this instance (is 1 unless subclassed)

Defined in

src/shapes/Object/Object.ts:1460


containsPoint()

containsPoint(point): boolean

Checks if point is inside the object

Parameters

point: Point

Point to check against

Returns

boolean

true if point is inside the object

Inherited from

ObjectGeometry.containsPoint

Defined in

src/shapes/Object/ObjectGeometry.ts:282


dispose()

dispose(): void

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

Returns

void

Defined in

src/shapes/Object/Object.ts:1528


drawCacheOnCanvas()

drawCacheOnCanvas(this, ctx): void

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

Parameters

this: TCachedFabricObject<BaseFabricObject<Partial<ObjectProps>, SerializedObjectProps, ObjectEvents>>

ctx: CanvasRenderingContext2D

Context to render on

Returns

void

Defined in

src/shapes/Object/Object.ts:942


drawClipPathOnCache()

drawClipPathOnCache(ctx, clipPath, canvasWithClipPath): void

Execute the drawing operation for an object clipPath

Parameters

ctx: CanvasRenderingContext2D

Context to render on

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

canvasWithClipPath: HTMLCanvasElement

Returns

void

Defined in

src/shapes/Object/Object.ts:847


drawObject()

drawObject(ctx, forClipping, context): void

Execute the drawing operation for an object on a specified context

Parameters

ctx: CanvasRenderingContext2D

Context to render on

forClipping: undefined | boolean

apply clipping styles

context: DrawContext

additional context for rendering

Returns

void

Defined in

src/shapes/Object/Object.ts:872


drawSelectionBackground()

drawSelectionBackground(_ctx): void

Parameters

_ctx: CanvasRenderingContext2D

Returns

void

Defined in

src/shapes/Object/Object.ts:728


findCommonAncestors()

findCommonAncestors<T>(other): AncestryComparison

Compare ancestors

Type Parameters

T extends BaseFabricObject<Props, SProps, EventSpec>

Parameters

other: T

Returns

AncestryComparison

an object that represent the ancestry situation.

Defined in

src/shapes/Object/Object.ts:1675


fire()

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

Fires event with an optional options object

Type Parameters

K extends string | number | symbol

Parameters

eventName: K

Event name to fire

options?: EventSpec[K]

Options object

Returns

void

Inherited from

ObjectGeometry.fire

Defined in

src/Observable.ts:167


get()

get(property): any

Basic getter

Parameters

property: string

Property name

Returns

any

value of a property

Inherited from

ObjectGeometry.get

Defined in

src/CommonMethods.ts:59


getAncestors()

getAncestors(): Ancestors

Returns

Ancestors

ancestors (excluding ActiveSelection) from bottom to top

Defined in

src/shapes/Object/Object.ts:1658


getBoundingRect()

getBoundingRect(): TBBox

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

ObjectGeometry.getBoundingRect

Defined in

src/shapes/Object/ObjectGeometry.ts:343


getCanvasRetinaScaling()

getCanvasRetinaScaling(): number

Returns

number

Inherited from

ObjectGeometry.getCanvasRetinaScaling

Defined in

src/shapes/Object/ObjectGeometry.ts:400


getCenterPoint()

getCenterPoint(): Point

Returns the center coordinates of the object relative to canvas

Returns

Point

Inherited from

ObjectGeometry.getCenterPoint

Defined in

src/shapes/Object/ObjectGeometry.ts:732


getCoords()

getCoords(): Point[]

Returns

Point[]

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

Inherited from

ObjectGeometry.getCoords

Defined in

src/shapes/Object/ObjectGeometry.ts:204


getObjectOpacity()

getObjectOpacity(): number

Return the object opacity counting also the group property

Returns

number

Defined in

src/shapes/Object/Object.ts:607


getObjectScaling()

getObjectScaling(): Point

Return the object scale factor counting also the group scaling

Returns

Point

Defined in

src/shapes/Object/Object.ts:576


getPointByOrigin()

getPointByOrigin(originX, originY): Point

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: TOriginX

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

originY: TOriginY

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

Returns

Point

Inherited from

ObjectGeometry.getPointByOrigin

Defined in

src/shapes/Object/ObjectGeometry.ts:762


getRelativeCenterPoint()

getRelativeCenterPoint(): Point

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

Returns

Point

Inherited from

ObjectGeometry.getRelativeCenterPoint

Defined in

src/shapes/Object/ObjectGeometry.ts:743


getRelativeX()

getRelativeX(): number

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

ObjectGeometry.getRelativeX

Defined in

src/shapes/Object/ObjectGeometry.ts:115


getRelativeXY()

getRelativeXY(): Point

Returns

Point

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

Inherited from

ObjectGeometry.getRelativeXY

Defined in

src/shapes/Object/ObjectGeometry.ts:176


getRelativeY()

getRelativeY(): number

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

ObjectGeometry.getRelativeY

Defined in

src/shapes/Object/ObjectGeometry.ts:131


getScaledHeight()

getScaledHeight(): number

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

ObjectGeometry.getScaledHeight

Defined in

src/shapes/Object/ObjectGeometry.ts:361


getScaledWidth()

getScaledWidth(): number

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

ObjectGeometry.getScaledWidth

Defined in

src/shapes/Object/ObjectGeometry.ts:352


getTotalAngle()

getTotalAngle(): TDegree

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

Returns

TDegree

Inherited from

ObjectGeometry.getTotalAngle

Defined in

src/shapes/Object/ObjectGeometry.ts:408


getTotalObjectScaling()

getTotalObjectScaling(): Point

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

Returns

Point

object with scaleX and scaleY properties

Defined in

src/shapes/Object/Object.ts:593


getViewportTransform()

getViewportTransform(): TMat2D

Retrieves viewportTransform from Object’s canvas if available

Returns

TMat2D

Inherited from

ObjectGeometry.getViewportTransform

Defined in

src/shapes/Object/ObjectGeometry.ts:418


getX()

getX(): number

Returns

number

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

Inherited from

ObjectGeometry.getX

Defined in

src/shapes/Object/ObjectGeometry.ts:86


getXY()

getXY(): Point

Returns

Point

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

Inherited from

ObjectGeometry.getXY

Defined in

src/shapes/Object/ObjectGeometry.ts:146


getY()

getY(): number

Returns

number

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

Inherited from

ObjectGeometry.getY

Defined in

src/shapes/Object/ObjectGeometry.ts:100


hasCommonAncestors()

hasCommonAncestors<T>(other): boolean

Type Parameters

T extends BaseFabricObject<Props, SProps, EventSpec>

Parameters

other: T

Returns

boolean

Defined in

src/shapes/Object/Object.ts:1740


hasFill()

hasFill(): null | boolean | ""

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

Defined in

src/shapes/Object/Object.ts:787


hasStroke()

hasStroke(): null | boolean | ""

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

Defined in

src/shapes/Object/Object.ts:771


intersectsWithObject()

intersectsWithObject(other): boolean

Checks if object intersects with another object

Parameters

other: ObjectGeometry<ObjectEvents>

Object to test

Returns

boolean

true if object intersects with another object

Inherited from

ObjectGeometry.intersectsWithObject

Defined in

src/shapes/Object/ObjectGeometry.ts:232


intersectsWithRect()

intersectsWithRect(tl, br): boolean

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

Parameters

tl: Point

br: Point

Returns

boolean

Inherited from

ObjectGeometry.intersectsWithRect

Defined in

src/shapes/Object/ObjectGeometry.ts:218


isCacheDirty()

isCacheDirty(skipCanvas): boolean

Check if cache is dirty

Parameters

skipCanvas: boolean = false

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

Returns

boolean

Defined in

src/shapes/Object/Object.ts:956


isContainedWithinObject()

isContainedWithinObject(other): boolean

Checks if object is fully contained within area of another object

Parameters

other: ObjectGeometry<ObjectEvents>

Object to test

Returns

boolean

true if object is fully contained within area of another object

Inherited from

ObjectGeometry.isContainedWithinObject

Defined in

src/shapes/Object/ObjectGeometry.ts:251


isContainedWithinRect()

isContainedWithinRect(tl, br): boolean

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

Parameters

tl: Point

br: Point

Returns

boolean

Inherited from

ObjectGeometry.isContainedWithinRect

Defined in

src/shapes/Object/ObjectGeometry.ts:259


isDescendantOf()

isDescendantOf(target): boolean

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

Defined in

src/shapes/Object/Object.ts:1644


isInFrontOf()

isInFrontOf<T>(other): undefined | boolean

Type Parameters

T extends BaseFabricObject<Props, SProps, EventSpec>

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

Defined in

src/shapes/Object/Object.ts:1750


isNotVisible()

isNotVisible(): boolean

Returns

boolean

Defined in

src/shapes/Object/Object.ts:686


isOnScreen()

isOnScreen(): boolean

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

ObjectGeometry.isOnScreen

Defined in

src/shapes/Object/ObjectGeometry.ts:291


isOverlapping()

isOverlapping<T>(other): boolean

Type Parameters

T extends ObjectGeometry<ObjectEvents>

Parameters

other: T

Returns

boolean

Inherited from

ObjectGeometry.isOverlapping

Defined in

src/shapes/Object/ObjectGeometry.ts:269


isPartiallyOnScreen()

isPartiallyOnScreen(): boolean

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

Returns

boolean

true if object is partially contained within canvas

Inherited from

ObjectGeometry.isPartiallyOnScreen

Defined in

src/shapes/Object/ObjectGeometry.ts:321


isType()

isType(…types): boolean

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

Parameters

• …types: string[]

Returns

boolean

Defined in

src/shapes/Object/Object.ts:1449


needsItsOwnCache()

needsItsOwnCache(): boolean

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

Defined in

src/shapes/Object/Object.ts:799


off()

off(eventName)

off<K>(eventName): void

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 string | number | symbol

Parameters

eventName: K

event name (eg. ‘after:render’)

Returns

void

Inherited from

ObjectGeometry.off

Defined in

src/Observable.ts:122

off(eventName, handler)

off<K>(eventName, handler): void

unsubscribe an event listener

Type Parameters

K extends string | number | symbol

Parameters

eventName: K

event name (eg. ‘after:render’)

handler: TEventCallback<any>

event listener to unsubscribe

Returns

void

Inherited from

ObjectGeometry.off

Defined in

src/Observable.ts:128

off(handlers)

off(handlers): void

unsubscribe event listeners

Parameters

handlers: EventRegistryObject<EventSpec>

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

Returns

void

Inherited from

ObjectGeometry.off

Defined in

src/Observable.ts:133

off()

off(): void

unsubscribe all event listeners

Returns

void

Inherited from

ObjectGeometry.off

Defined in

src/Observable.ts:137


on()

on(eventName, handler)

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

Observes specified event

Type Parameters

K extends string | number | symbol

E

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

on

Inherited from

ObjectGeometry.on

Defined in

src/Observable.ts:23

on(handlers)

on(handlers): VoidFunction

Parameters

handlers: EventRegistryObject<EventSpec>

Returns

VoidFunction

Inherited from

ObjectGeometry.on

Defined in

src/Observable.ts:27


once()

once(eventName, handler)

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

Observes specified event once

Type Parameters

K extends string | number | symbol

E

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

ObjectGeometry.once

Defined in

src/Observable.ts:62

once(handlers)

once(handlers): VoidFunction

Parameters

handlers: EventRegistryObject<EventSpec>

Returns

VoidFunction

Inherited from

ObjectGeometry.once

Defined in

src/Observable.ts:66


render()

render(ctx): void

Renders an object on a specified context

Parameters

ctx: CanvasRenderingContext2D

Context to render on

Returns

void

Defined in

src/shapes/Object/Object.ts:698


renderCache()

renderCache(this, options?): void

Parameters

this: TCachedFabricObject<BaseFabricObject<Partial<ObjectProps>, SerializedObjectProps, ObjectEvents>>

options?: any

Returns

void

Defined in

src/shapes/Object/Object.ts:732


rotate()

rotate(angle): void

Sets “angle” of an instance with centered rotation

Parameters

angle: TDegree

Angle value (in degrees)

Returns

void

Defined in

src/shapes/Object/Object.ts:1477


scale()

scale(value): void

Scales an object (equally by x and y)

Parameters

value: number

Scale factor

Returns

void

Inherited from

ObjectGeometry.scale

Defined in

src/shapes/Object/ObjectGeometry.ts:370


scaleToHeight()

scaleToHeight(value): void

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

ObjectGeometry.scaleToHeight

Defined in

src/shapes/Object/ObjectGeometry.ts:393


scaleToWidth()

scaleToWidth(value): void

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

ObjectGeometry.scaleToWidth

Defined in

src/shapes/Object/ObjectGeometry.ts:381


set()

set(key, value?): BaseFabricObject<Props, SProps, EventSpec>

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: string | Record<string, any>

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

value?: any

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

Returns

BaseFabricObject<Props, SProps, EventSpec>

Inherited from

ObjectGeometry.set

Defined in

src/CommonMethods.ts:29


setCoords()

setCoords(): void

Sets corner and controls position coordinates based on current angle, width and height, left and top. aCoords are used to quickly find an object on the canvas. See https://github.com/fabricjs/fabric.js/wiki/When-to-call-setCoords and http://fabricjs.com/fabric-gotchas

Returns

void

Inherited from

ObjectGeometry.setCoords

Defined in

src/shapes/Object/ObjectGeometry.ts:449


setOnGroup()

setOnGroup(): void

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

Defined in

src/shapes/Object/Object.ts:1509


setPositionByOrigin()

setPositionByOrigin(pos, originX, originY): void

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

Parameters

pos: Point

The new position of the object

originX: TOriginX

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

originY: TOriginY

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

Returns

void

Inherited from

ObjectGeometry.setPositionByOrigin

Defined in

src/shapes/Object/ObjectGeometry.ts:777


setRelativeX()

setRelativeX(value): void

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

ObjectGeometry.setRelativeX

Defined in

src/shapes/Object/ObjectGeometry.ts:123


setRelativeXY()

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

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

Parameters

point: 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

ObjectGeometry.setRelativeXY

Defined in

src/shapes/Object/ObjectGeometry.ts:186


setRelativeY()

setRelativeY(value): void

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

ObjectGeometry.setRelativeY

Defined in

src/shapes/Object/ObjectGeometry.ts:139


setX()

setX(value): void

Parameters

value: number

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

Returns

void

Inherited from

ObjectGeometry.setX

Defined in

src/shapes/Object/ObjectGeometry.ts:93


setXY()

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

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: Point

position in scene coordinate plane

originX?: TOriginX

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

originY?: TOriginY

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

Returns

void

Example

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

Inherited from

ObjectGeometry.setXY

Defined in

src/shapes/Object/ObjectGeometry.ts:163


setY()

setY(value): void

Parameters

value: number

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

Returns

void

Inherited from

ObjectGeometry.setY

Defined in

src/shapes/Object/ObjectGeometry.ts:107


shouldCache()

shouldCache(): boolean

Decide if the object should cache or not. Create its own cache level objectCaching is a global flag, wins over everything needsItsOwnCache should be used when the object drawing method requires a cache step. None of the fabric classes requires it. Generally you do not cache objects in groups because the group outside is cached. Read as: cache if is needed, or if the feature is enabled but we are not already caching.

Returns

boolean

Defined in

src/shapes/Object/Object.ts:823


toCanvasElement()

toCanvasElement(options): HTMLCanvasElement

Converts an object into a HTMLCanvas element

Parameters

options: ObjectToCanvasElementOptions = {}

Options object

Returns

HTMLCanvasElement

Returns DOM element with the FabricObject

Defined in

src/shapes/Object/Object.ts:1340


toDataURL()

toDataURL(options): string

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

Defined in

src/shapes/Object/Object.ts:1436


toDatalessObject()

toDatalessObject(propertiesToInclude?): any

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

Defined in

src/shapes/Object/Object.ts:1884


toJSON()

toJSON(): any

Returns a JSON representation of an instance

Returns

any

JSON

Defined in

src/shapes/Object/Object.ts:1468


toObject()

toObject(propertiesToInclude?): any

Returns an 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

Defined in

src/shapes/Object/Object.ts:1791


toString()

toString(): string

Returns a string representation of an instance

Returns

string

Defined in

src/shapes/Object/Object.ts:1924


toggle()

toggle(property): BaseFabricObject<Props, SProps, EventSpec>

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

Parameters

property: string

Property to toggle

Returns

BaseFabricObject<Props, SProps, EventSpec>

Inherited from

ObjectGeometry.toggle

Defined in

src/CommonMethods.ts:46


transform()

transform(ctx): void

Transforms context when rendering an object

Parameters

ctx: CanvasRenderingContext2D

Context

Returns

void

Defined in

src/shapes/Object/Object.ts:564


transformMatrixKey()

transformMatrixKey(skipGroup): number[]

Parameters

skipGroup: boolean = false

Returns

number[]

Inherited from

ObjectGeometry.transformMatrixKey

Defined in

src/shapes/Object/ObjectGeometry.ts:453


translateToCenterPoint()

translateToCenterPoint(point, originX, originY): Point

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

Parameters

point: Point

The point which corresponds to the originX and originY params

originX: TOriginX

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

originY: TOriginY

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

Returns

Point

Inherited from

ObjectGeometry.translateToCenterPoint

Defined in

src/shapes/Object/ObjectGeometry.ts:682


translateToGivenOrigin()

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

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

Parameters

point: Point

The point which corresponds to the originX and originY params

fromOriginX: TOriginX

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

fromOriginY: TOriginY

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

toOriginX: TOriginX

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

toOriginY: TOriginY

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

Returns

Point

Inherited from

ObjectGeometry.translateToGivenOrigin

Defined in

src/shapes/Object/ObjectGeometry.ts:654


translateToOriginPoint()

translateToOriginPoint(center, originX, originY): Point

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

Parameters

center: Point

The point which corresponds to center of the object

originX: TOriginX

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

originY: TOriginY

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

Returns

Point

Inherited from

ObjectGeometry.translateToOriginPoint

Defined in

src/shapes/Object/ObjectGeometry.ts:710


willDrawShadow()

willDrawShadow(): boolean

Check if this object will cast a shadow with an offset. used by Group.shouldCache to know if child has a shadow recursively

Returns

boolean

Defined in

src/shapes/Object/Object.ts:836


_fromObject()

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

Type Parameters

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

Parameters

__namedParameters: Record<string, unknown>

__namedParameters: Abortable & object = {}

Returns

Promise<S>

Defined in

src/shapes/Object/Object.ts:1937


fromObject()

static fromObject<T>(object, options?): Promise<BaseFabricObject<Partial<ObjectProps>, SerializedObjectProps, ObjectEvents>>

Type Parameters

T extends TOptions<SerializedObjectProps>

Parameters

object: T

options?: Abortable

Returns

Promise<BaseFabricObject<Partial<ObjectProps>, SerializedObjectProps, ObjectEvents>>

Defined in

src/shapes/Object/Object.ts:1966


getDefaults()

static getDefaults(): Record<string, any>

Returns

Record<string, any>

Defined in

src/shapes/Object/Object.ts:332