Ellipse

Defined in: src/shapes/Ellipse.ts:29

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

• FabricObject<Props, SProps, EventSpec>

Type Parameters

• Props extends TOptions<EllipseProps> = Partial<EllipseProps>

• SProps extends SerializedEllipseProps = SerializedEllipseProps

• EventSpec extends ObjectEvents = ObjectEvents

Implements

• EllipseProps

Constructors

new Ellipse()

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

Defined in: src/shapes/Ellipse.ts:68

Constructor

Parameters

options?

Props

Options object

Returns

Ellipse<Props, SProps, EventSpec>

Overrides

FabricObject.constructor

Properties

__corner?

optional __corner: string

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

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

Inherited from

FabricObject.__corner

---

_controlsVisibility

_controlsVisibility: Record<string, boolean>

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

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

Inherited from

FabricObject._controlsVisibility

---

_scaling?

optional _scaling: boolean

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

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

TODO

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

Inherited from

FabricObject._scaling

---

absolutePositioned

absolutePositioned: boolean

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

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

EllipseProps.absolutePositioned

Inherited from

FabricObject.absolutePositioned

---

aCoords

aCoords: TCornerPoint

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

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

Inherited from

FabricObject.aCoords

---

angle

angle: TDegree

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

Angle of rotation of an object (in degrees)

Default

0

Implementation of

EllipseProps.angle

Inherited from

FabricObject.angle

---

backgroundColor

backgroundColor: string

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

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

Default

Implementation of

EllipseProps.backgroundColor

Inherited from

FabricObject.backgroundColor

---

borderColor

borderColor: string

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

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

Default

rgb(178,204,255)

Implementation of

EllipseProps.borderColor

Inherited from

FabricObject.borderColor

---

borderDashArray

borderDashArray: null | number[]

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

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

Since

1.6.2

Implementation of

EllipseProps.borderDashArray

Inherited from

FabricObject.borderDashArray

---

borderOpacityWhenMoving

borderOpacityWhenMoving: number

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

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

Default

0.4

Implementation of

EllipseProps.borderOpacityWhenMoving

Inherited from

FabricObject.borderOpacityWhenMoving

---

borderScaleFactor

borderScaleFactor: number

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

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

Default

1

Implementation of

EllipseProps.borderScaleFactor

Inherited from

FabricObject.borderScaleFactor

---

centeredRotation

centeredRotation: boolean

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

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

EllipseProps.centeredRotation

Inherited from

FabricObject.centeredRotation

---

centeredScaling

centeredScaling: boolean

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

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

EllipseProps.centeredScaling

Inherited from

FabricObject.centeredScaling

---

clipPath?

optional clipPath: BaseFabricObject

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

a fabricObject that, without stroke define a clipping area with their shape. filled in black the clipPath object gets used when the object has rendered, and the context is placed in the center of the object cacheCanvas. If you want 0,0 of a clipPath to align with an object center, use clipPath.originX/Y to ‘center’

Implementation of

EllipseProps.clipPath

Inherited from

FabricObject.clipPath

---

clipPathId?

optional clipPathId: string

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

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

Inherited from

FabricObject.clipPathId

---

controls

controls: TControlSet

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

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

Inherited from

FabricObject.controls

---

cornerColor

cornerColor: string

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

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

Default

rgb(178,204,255)

Implementation of

EllipseProps.cornerColor

Inherited from

FabricObject.cornerColor

---

cornerDashArray

cornerDashArray: null | number[]

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

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

Since

1.6.2

Default

null

Implementation of

EllipseProps.cornerDashArray

Inherited from

FabricObject.cornerDashArray

---

cornerSize

cornerSize: number

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

Size of object’s controlling corners (in pixels)

Default

13

Implementation of

EllipseProps.cornerSize

Inherited from

FabricObject.cornerSize

---

cornerStrokeColor

cornerStrokeColor: string

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

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

Since

1.6.2

Default

''

Implementation of

EllipseProps.cornerStrokeColor

Inherited from

FabricObject.cornerStrokeColor

---

cornerStyle

cornerStyle: "circle" | "rect"

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

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

Deprecated

This API is no longer supported and may be removed in a future release.

Since

1.6.2

Default

'rect'

Implementation of

EllipseProps.cornerStyle

Inherited from

FabricObject.cornerStyle

---

dirty

dirty: boolean

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

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

Default

true

Inherited from

FabricObject.dirty

---

evented

evented: boolean

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

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

Default

Implementation of

EllipseProps.evented

Inherited from

FabricObject.evented

---

excludeFromExport

excludeFromExport: boolean

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

When true, object is not exported in OBJECT/JSON

Since

1.6.3

Default

Implementation of

EllipseProps.excludeFromExport

Inherited from

FabricObject.excludeFromExport

---

fill

fill: null | string | TFiller

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

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

Default

rgb(0,0,0)

Implementation of

EllipseProps.fill

Inherited from

FabricObject.fill

---

fillRule

fillRule: CanvasFillRule

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

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

EllipseProps.fillRule

Inherited from

FabricObject.fillRule

---

flipX

flipX: boolean

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

When true, an object is rendered as flipped horizontally

Default

false

Implementation of

EllipseProps.flipX

Inherited from

FabricObject.flipX

---

flipY

flipY: boolean

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

When true, an object is rendered as flipped vertically

Default

false

Implementation of

EllipseProps.flipY

Inherited from

FabricObject.flipY

---

globalCompositeOperation

globalCompositeOperation: GlobalCompositeOperation

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

Composite rule used for canvas globalCompositeOperation

Default

Implementation of

EllipseProps.globalCompositeOperation

Inherited from

FabricObject.globalCompositeOperation

---

hasBorders

hasBorders: boolean

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

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

Default

Implementation of

EllipseProps.hasBorders

Inherited from

FabricObject.hasBorders

---

hasControls

hasControls: boolean

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

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

Default

true

Implementation of

EllipseProps.hasControls

Inherited from

FabricObject.hasControls

---

height

height: number

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

Object height

Default

Implementation of

EllipseProps.height

Inherited from

FabricObject.height

---

hoverCursor

hoverCursor: null | string

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

Default cursor value used when hovering over this object on canvas

Default

null

Implementation of

EllipseProps.hoverCursor

Inherited from

FabricObject.hoverCursor

---

includeDefaultValues

includeDefaultValues: boolean

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

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

Default

Implementation of

EllipseProps.includeDefaultValues

Inherited from

FabricObject.includeDefaultValues

---

inverted

inverted: boolean

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

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

EllipseProps.inverted

Inherited from

FabricObject.inverted

---

isMoving?

optional isMoving: boolean

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

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

Inherited from

FabricObject.isMoving

---

left

left: number

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

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

EllipseProps.left

Inherited from

FabricObject.left

---

lockMovementX

lockMovementX: boolean

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

When true, object horizontal movement is locked

Default

Implementation of

EllipseProps.lockMovementX

Inherited from

FabricObject.lockMovementX

---

lockMovementY

lockMovementY: boolean

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

When true, object vertical movement is locked

Default

Implementation of

EllipseProps.lockMovementY

Inherited from

FabricObject.lockMovementY

---

lockRotation

lockRotation: boolean

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

When true, object rotation is locked

Default

Implementation of

EllipseProps.lockRotation

Inherited from

FabricObject.lockRotation

---

lockScalingFlip

lockScalingFlip: boolean

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

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

Default

Implementation of

EllipseProps.lockScalingFlip

Inherited from

FabricObject.lockScalingFlip

---

lockScalingX

lockScalingX: boolean

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

When true, object horizontal scaling is locked

Default

Implementation of

EllipseProps.lockScalingX

Inherited from

FabricObject.lockScalingX

---

lockScalingY

lockScalingY: boolean

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

When true, object vertical scaling is locked

Default

Implementation of

EllipseProps.lockScalingY

Inherited from

FabricObject.lockScalingY

---

lockSkewingX

lockSkewingX: boolean

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

When true, object horizontal skewing is locked

Default

Implementation of

EllipseProps.lockSkewingX

Inherited from

FabricObject.lockSkewingX

---

lockSkewingY

lockSkewingY: boolean

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

When true, object vertical skewing is locked

Default

Implementation of

EllipseProps.lockSkewingY

Inherited from

FabricObject.lockSkewingY

---

matrixCache?

optional matrixCache: TMatrixCache

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

storage cache for object full transform matrix

Inherited from

FabricObject.matrixCache

---

minScaleLimit

minScaleLimit: number

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

Minimum allowed scale value of an object

Default

0

Implementation of

EllipseProps.minScaleLimit

Inherited from

FabricObject.minScaleLimit

---

moveCursor

moveCursor: null | string

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

Default cursor value used when moving this object on canvas

Default

null

Implementation of

EllipseProps.moveCursor

Inherited from

FabricObject.moveCursor

---

noScaleCache

noScaleCache: boolean

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

When true, cache does not get updated during scaling. The picture will get blocky if scaled too much and will be redrawn with correct details at the end of scaling. this setting is performance and application dependant. default to true since 1.7.0

Default

true

Implementation of

EllipseProps.noScaleCache

Inherited from

FabricObject.noScaleCache

---

objectCaching

objectCaching: boolean

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

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

EllipseProps.objectCaching

Inherited from

FabricObject.objectCaching

---

oCoords

oCoords: Record<string, TOCoord>

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

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

Inherited from

FabricObject.oCoords

---

opacity

opacity: number

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

Opacity of an object

Default

1

Implementation of

EllipseProps.opacity

Inherited from

FabricObject.opacity

---

originX

originX: TOriginX

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

Deprecated

please use ‘center’ as value in new projects

Implementation of

EllipseProps.originX

Inherited from

FabricObject.originX

---

originY

originY: TOriginY

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

Deprecated

please use ‘center’ as value in new projects

Implementation of

EllipseProps.originY

Inherited from

FabricObject.originY

---

ownMatrixCache?

optional ownMatrixCache: TMatrixCache

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

storage cache for object transform matrix

Inherited from

FabricObject.ownMatrixCache

---

padding

padding: number

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

Padding between object and its controlling borders (in pixels)

Default

0

Implementation of

EllipseProps.padding

Inherited from

FabricObject.padding

---

paintFirst

paintFirst: "fill" | "stroke"

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

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

Default

Implementation of

EllipseProps.paintFirst

Inherited from

FabricObject.paintFirst

---

parent?

optional parent: Group

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

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

Inherited from

FabricObject.parent

---

perPixelTargetFind

perPixelTargetFind: boolean

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

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

Default

Implementation of

EllipseProps.perPixelTargetFind

Inherited from

FabricObject.perPixelTargetFind

---

rx

rx: number

Defined in: src/shapes/Ellipse.ts:42

Horizontal radius

Default

Implementation of

EllipseProps.rx

---

ry

ry: number

Defined in: src/shapes/Ellipse.ts:49

Vertical radius

Default

Implementation of

EllipseProps.ry

---

scaleX

scaleX: number

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

Object scale factor (horizontal)

Default

1

Implementation of

EllipseProps.scaleX

Inherited from

FabricObject.scaleX

---

scaleY

scaleY: number

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

Object scale factor (vertical)

Default

1

Implementation of

EllipseProps.scaleY

Inherited from

FabricObject.scaleY

---

selectable

selectable: boolean

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

When set to false, an object can not be selected for modification (using either point-click-based or group-based selection). But events still fire on it.

Default

Implementation of

EllipseProps.selectable

Inherited from

FabricObject.selectable

---

selectionBackgroundColor

selectionBackgroundColor: string

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

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

Deprecated

This API is no longer supported and may be removed in a future release.

Default

Implementation of

EllipseProps.selectionBackgroundColor

Inherited from

FabricObject.selectionBackgroundColor

---

shadow

shadow: null | Shadow

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

Shadow object representing shadow of this shape

Default

null

Implementation of

EllipseProps.shadow

Inherited from

FabricObject.shadow

---

skewX

skewX: number

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

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

Default

0

Implementation of

EllipseProps.skewX

Inherited from

FabricObject.skewX

---

skewY

skewY: number

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

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

Default

0

Implementation of

EllipseProps.skewY

Inherited from

FabricObject.skewY

---

snapAngle?

optional snapAngle: TDegree

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

The angle that an object will lock to while rotating.

Implementation of

EllipseProps.snapAngle

Inherited from

FabricObject.snapAngle

---

snapThreshold?

optional snapThreshold: TDegree

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

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

Implementation of

EllipseProps.snapThreshold

Inherited from

FabricObject.snapThreshold

---

stroke

stroke: null | string | TFiller

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

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

Default

null

Implementation of

EllipseProps.stroke

Inherited from

FabricObject.stroke

---

strokeDashArray

strokeDashArray: null | number[]

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

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

Default

null;

Implementation of

EllipseProps.strokeDashArray

Inherited from

FabricObject.strokeDashArray

---

strokeDashOffset

strokeDashOffset: number

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

Line offset of an object’s stroke

Default

0

Implementation of

EllipseProps.strokeDashOffset

Inherited from

FabricObject.strokeDashOffset

---

strokeLineCap

strokeLineCap: CanvasLineCap

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

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

Default

butt

Implementation of

EllipseProps.strokeLineCap

Inherited from

FabricObject.strokeLineCap

---

strokeLineJoin

strokeLineJoin: CanvasLineJoin

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

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

Default

Implementation of

EllipseProps.strokeLineJoin

Inherited from

FabricObject.strokeLineJoin

---

strokeMiterLimit

strokeMiterLimit: number

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

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

Default

4

Implementation of

EllipseProps.strokeMiterLimit

Inherited from

FabricObject.strokeMiterLimit

---

strokeUniform

strokeUniform: boolean

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

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

EllipseProps.strokeUniform

Inherited from

FabricObject.strokeUniform

---

strokeWidth

strokeWidth: number

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

Width of a stroke used to render this object

Default

1

Implementation of

EllipseProps.strokeWidth

Inherited from

FabricObject.strokeWidth

---

top

top: number

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

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

EllipseProps.top

Inherited from

FabricObject.top

---

touchCornerSize

touchCornerSize: number

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

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

Default

24

Implementation of

EllipseProps.touchCornerSize

Inherited from

FabricObject.touchCornerSize

---

transparentCorners

transparentCorners: boolean

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

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

Default

true

Implementation of

EllipseProps.transparentCorners

Inherited from

FabricObject.transparentCorners

---

visible

visible: boolean

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

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

Default

Implementation of

EllipseProps.visible

Inherited from

FabricObject.visible

---

width

width: number

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

Object width

Default

Implementation of

EllipseProps.width

Inherited from

FabricObject.width

---

ATTRIBUTE_NAMES

static ATTRIBUTE_NAMES: string[]

Defined in: src/shapes/Ellipse.ts:158

List of attribute names to account for when parsing SVG element (used by Ellipse.fromElement)

Static

Member Of

Ellipse

See

http://www.w3.org/TR/SVG/shapes.html#EllipseElement

---

cacheProperties

static cacheProperties: string[]

Defined in: src/shapes/Ellipse.ts:53

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

Overrides

FabricObject.cacheProperties

---

colorProperties

static colorProperties: string[]

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

List of properties to consider for animating colors.

Inherited from

FabricObject.colorProperties

---

customProperties

static customProperties: string[] = []

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

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

Inherited from

FabricObject.customProperties

---

ownDefaults

static ownDefaults: Partial<TClassProperties<Ellipse>> = ellipseDefaultValues

Defined in: src/shapes/Ellipse.ts:55

Overrides

FabricObject.ownDefaults

---

stateProperties

static stateProperties: string[]

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

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

Inherited from

FabricObject.stateProperties

---

type

static type: string = 'Ellipse'

Defined in: src/shapes/Ellipse.ts:51

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.

Overrides

FabricObject.type

Accessors

type

Get Signature

get type(): string

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

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

Deprecated

This API is no longer supported and may be removed in a future release.

Returns

string

Set Signature

set type(value): void

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

Parameters

value

string

Returns

void

Inherited from

FabricObject.type

Methods

_drawClipPath()

_drawClipPath(ctx, clipPath, context): void

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

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

Parameters

ctx

CanvasRenderingContext2D

clipPath

undefined | BaseFabricObject

context

DrawContext

Returns

void

Inherited from

FabricObject._drawClipPath

---

_limitCacheSize()

_limitCacheSize(dims): any

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

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

Inherited from

FabricObject._limitCacheSize

---

_removeCacheCanvas()

_removeCacheCanvas(): void

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

Remove cacheCanvas and its dimensions from the objects

Returns

void

Inherited from

FabricObject._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

FabricObject._renderControls

---

_setClippingProperties()

_setClippingProperties(ctx): void

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

Parameters

ctx

CanvasRenderingContext2D

Returns

void

Inherited from

FabricObject._setClippingProperties

---

_setFillStyles()

_setFillStyles(ctx, __namedParameters): void

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

Parameters

ctx

CanvasRenderingContext2D

__namedParameters

Pick<Ellipse<Props, SProps, EventSpec>, "fill">

Returns

void

Inherited from

FabricObject._setFillStyles

---

_setStrokeStyles()

_setStrokeStyles(ctx, decl): void

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

Parameters

ctx

CanvasRenderingContext2D

decl

Pick<Ellipse<Props, SProps, EventSpec>, "stroke" | "strokeWidth" | "strokeDashOffset" | "strokeLineCap" | "strokeLineJoin" | "strokeMiterLimit">

Returns

void

Inherited from

FabricObject._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

FabricObject._setupCompositeOperation

---

_toSVG()

_toSVG(): string[]

Defined in: src/shapes/Ellipse.ts:129

Returns svg representation of an instance

Returns

string[]

an array of strings with the specific svg representation of the instance

Overrides

FabricObject._toSVG

---

addPaintOrder()

addPaintOrder(this): string

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

Parameters

this

FabricObjectSVGExportMixin & FabricObject

Returns

string

Inherited from

FabricObject.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

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

Inherited from

FabricObject.animate

---

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

FabricObject.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

FabricObject.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

FabricObject.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

FabricObject.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

FabricObject.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

FabricObject.clearContextTop

---

clone()

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

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<Ellipse<Props, SProps, EventSpec>>

Inherited from

FabricObject.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

FabricObject.cloneAsImage

---

complexity()

complexity(): number

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

Returns complexity of an instance

Returns

number

complexity of this instance (is 1 unless subclassed)

Inherited from

FabricObject.complexity

---

containsPoint()

containsPoint(point): boolean

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

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

FabricObject.containsPoint

---

dispose()

dispose(): void

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

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

Returns

void

Inherited from

FabricObject.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

FabricObject.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

FabricObject.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

FabricObject.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

FabricObject.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

Point

object size x = width, y = height

Returns

void

Inherited from

FabricObject.drawControlsConnectingLines

---

drawObject()

drawObject(ctx, forClipping, context): void

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

Execute the drawing operation for an object on a specified context

Parameters

ctx

CanvasRenderingContext2D

Context to render on

forClipping

apply clipping styles

undefined | boolean

context

DrawContext

additional context for rendering

Returns

void

Inherited from

FabricObject.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

FabricObject.drawSelectionBackground

---

findCommonAncestors()

findCommonAncestors<T>(other): AncestryComparison

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

Compare ancestors

Type Parameters

• T extends Ellipse<Props, SProps, EventSpec>

Parameters

other

T

Returns

AncestryComparison

an object that represent the ancestry situation.

Inherited from

FabricObject.findCommonAncestors

---

fire()

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

Defined in: src/Observable.ts:167

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

FabricObject.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

FabricObject.forEachControl

---

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

FabricObject.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

FabricObject.getActiveControl

---

getAncestors()

getAncestors(): Ancestors

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

Returns

Ancestors

ancestors (excluding ActiveSelection) from bottom to top

Inherited from

FabricObject.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

FabricObject.getBoundingRect

---

getCanvasRetinaScaling()

getCanvasRetinaScaling(): number

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

Returns

number

Inherited from

FabricObject.getCanvasRetinaScaling

---

getCenterPoint()

getCenterPoint(): Point

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

Returns the center coordinates of the object relative to canvas

Returns

Point

Inherited from

FabricObject.getCenterPoint

---

getCoords()

getCoords(): Point[]

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

Returns

Point[]

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

Inherited from

FabricObject.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

FabricObject.getObjectOpacity

---

getObjectScaling()

getObjectScaling(): Point

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

Return the object scale factor counting also the group scaling

Returns

Point

Inherited from

FabricObject.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

TOriginX

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

originY

TOriginY

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

Returns

Point

Inherited from

FabricObject.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

Point

Inherited from

FabricObject.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

FabricObject.getRelativeX

---

getRelativeXY()

getRelativeXY(): Point

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

Returns

Point

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

Inherited from

FabricObject.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

FabricObject.getRelativeY

---

getRx()

getRx(): number

Defined in: src/shapes/Ellipse.ts:100

Returns horizontal radius of an object (according to how an object is scaled)

Returns

number

---

getRy()

getRy(): number

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

Returns Vertical radius of an object (according to how an object is scaled)

Returns

number

---

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

FabricObject.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

FabricObject.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

FabricObject.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

FabricObject.getSvgFilter

---

getSvgStyles()

getSvgStyles(this, skipShadow?): string

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

Returns styles-string for svg-export

Parameters

this

FabricObjectSVGExportMixin & FabricObject

skipShadow?

boolean

a boolean to skip shadow filter output

Returns

string

Inherited from

FabricObject.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

FabricObject.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

FabricObject.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

Point

object with scaleX and scaleY properties

Inherited from

FabricObject.getTotalObjectScaling

---

getViewportTransform()

getViewportTransform(): TMat2D

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

Retrieves viewportTransform from Object’s canvas if available

Returns

TMat2D

Inherited from

FabricObject.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

FabricObject.getX

---

getXY()

getXY(): Point

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

Returns

Point

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

Inherited from

FabricObject.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

FabricObject.getY

---

hasCommonAncestors()

hasCommonAncestors<T>(other): boolean

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

Type Parameters

• T extends Ellipse<Props, SProps, EventSpec>

Parameters

other

T

Returns

boolean

Inherited from

FabricObject.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

FabricObject.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

FabricObject.hasStroke

---

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

FabricObject.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

Point

br

Point

Returns

boolean

Inherited from

FabricObject.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

FabricObject.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

FabricObject.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

Point

br

Point

Returns

boolean

Inherited from

FabricObject.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

FabricObject.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

FabricObject.isDescendantOf

---

isInFrontOf()

isInFrontOf<T>(other): undefined | boolean

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

Type Parameters

• T extends Ellipse<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

Inherited from

FabricObject.isInFrontOf

---

isNotVisible()

isNotVisible(): boolean

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

Returns

boolean

Inherited from

FabricObject.isNotVisible

---

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

FabricObject.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

FabricObject.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

FabricObject.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

FabricObject.isType

---

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

FabricObject.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

Deprecated

This API is no longer supported and may be removed in a future release.

Type Parameters

• K extends string | number | symbol

Parameters

eventName

K

event name (eg. ‘after:render’)

Returns

void

Inherited from

FabricObject.off

Call Signature

off<K>(eventName, handler): void

Defined in: src/Observable.ts:128

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

FabricObject.off

Call Signature

off(handlers): void

Defined in: src/Observable.ts:133

unsubscribe event listeners

Parameters

handlers

EventRegistryObject<EventSpec>

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

Returns

void

Inherited from

FabricObject.off

Call Signature

off(): void

Defined in: src/Observable.ts:137

unsubscribe all event listeners

Returns

void

Inherited from

FabricObject.off

---

on()

Call Signature

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

Defined in: src/Observable.ts:23

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

FabricObject.on

Call Signature

on(handlers): VoidFunction

Defined in: src/Observable.ts:27

Observes specified event

Parameters

handlers

EventRegistryObject<EventSpec>

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

Returns

VoidFunction

disposer

Alias

on

Inherited from

FabricObject.on

---

once()

Call Signature

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

Defined in: src/Observable.ts:62

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

FabricObject.once

Call Signature

once(handlers): VoidFunction

Defined in: src/Observable.ts:66

Observes specified event once

Parameters

handlers

EventRegistryObject<EventSpec>

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

Returns

VoidFunction

disposer

Alias

once

Inherited from

FabricObject.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

InteractiveFabricObject

Returns

boolean

Inherited from

FabricObject.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

FabricObject.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

FabricObject.onSelect

---

render()

render(ctx): void

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

Renders an object on a specified context

Parameters

ctx

CanvasRenderingContext2D

Context to render on

Returns

void

Inherited from

FabricObject.render

---

renderCache()

renderCache(this, options?): void

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

Parameters

this

TCachedFabricObject<BaseFabricObject>

options?

any

Returns

void

Inherited from

FabricObject.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

FabricObject.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

FabricObject.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

FabricObject.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

FabricObject.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

FabricObject.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

FabricObject.scaleToWidth

---

set()

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

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

Ellipse<Props, SProps, EventSpec>

Inherited from

FabricObject.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

FabricObject.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

FabricObject.setControlVisible

---

setCoords()

setCoords(): void

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

set controls’ coordinates as well See https://github.com/fabricjs/fabric.js/wiki/When-to-call-setCoords and http://fabricjs.com/fabric-gotchas

Returns

void

Inherited from

FabricObject.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

FabricObject.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

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

FabricObject.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

FabricObject.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

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

FabricObject.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

FabricObject.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

FabricObject.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

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

FabricObject.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

FabricObject.setY

---

shouldCache()

shouldCache(): boolean

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

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

Inherited from

FabricObject.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

FabricObject.shouldStartDragging

---

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

Point

the control box size used

Returns

void

Inherited from

FabricObject.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 with the FabricObject

Inherited from

FabricObject.toCanvasElement

---

toClipPathSVG()

toClipPathSVG(this, reviver?): string

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

Returns svg clipPath 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

FabricObject.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

FabricObject.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

FabricObject.toDataURL

---

toggle()

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

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

Ellipse<Props, SProps, EventSpec>

Inherited from

FabricObject.toggle

---

toJSON()

toJSON(): any

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

Returns a JSON representation of an instance

Returns

any

JSON

Inherited from

FabricObject.toJSON

---

toObject()

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

Defined in: src/shapes/Ellipse.ts:117

Returns object representation of an instance

Type Parameters

• T extends Omit<Props & TClassProperties<Ellipse<Props, SProps, EventSpec>>, keyof SProps>

• 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> & SProps

object representation of an instance

Overrides

FabricObject.toObject

---

toString()

toString(): string

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

Returns a string representation of an instance

Returns

string

Inherited from

FabricObject.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

FabricObject.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

FabricObject.transform

---

transformMatrixKey()

transformMatrixKey(skipGroup): number[]

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

Parameters

skipGroup

boolean = false

Returns

number[]

Inherited from

FabricObject.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

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

FabricObject.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

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

FabricObject.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

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

FabricObject.translateToOriginPoint

---

willDrawShadow()

willDrawShadow(): boolean

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

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

Deprecated

This API is no longer supported and may be removed in a future release.

Returns

boolean

Inherited from

FabricObject.willDrawShadow

---

_fromObject()

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

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

Type Parameters

• S extends BaseFabricObject

Parameters

__namedParameters

Record<string, unknown>

__namedParameters

Abortable & object = {}

Returns

Promise<S>

Inherited from

FabricObject._fromObject

---

createControls()

static createControls(): object

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

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

Returns

object

controls

controls: Record<string, Control>

Inherited from

FabricObject.createControls

---

fromElement()

static fromElement(element, options, cssRules?): Promise<Ellipse<Record<string, any>>>

Defined in: src/shapes/Ellipse.ts:167

Returns Ellipse instance from an SVG element

Parameters

element

HTMLElement

Element to parse

options

Abortable

cssRules?

CSSRules

Returns

Promise<Ellipse<Record<string, any>>>

Static

Member Of

Ellipse

---

fromObject()

static fromObject<T>(object, options?): Promise<BaseFabricObject>

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

Type Parameters

• T extends TOptions<SerializedObjectProps>

Parameters

object

T

options?

Abortable

Returns

Promise<BaseFabricObject>

Inherited from

FabricObject.fromObject

---

getDefaults()

static getDefaults(): Record<string, any>

Defined in: src/shapes/Ellipse.ts:57

Returns

Record<string, any>

Overrides

FabricObject.getDefaults