Textbox

Defined in: src/shapes/Textbox.ts:54

Textbox class, based on IText, allows the user to resize the text rectangle and wraps lines automatically. Textboxes have their Y scaling locked, the user can only change width. Height is adjusted automatically based on the wrapping of lines.

Extends

• IText<Props, SProps, EventSpec>

Type Parameters

Props

Props extends TOptions<TextboxProps> = Partial<TextboxProps>

SProps

SProps extends SerializedTextboxProps = SerializedTextboxProps

EventSpec

EventSpec extends ITextEvents = ITextEvents

Implements

• UniqueTextboxProps

Constructors

Constructor

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

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

Constructor

Parameters

text

string

Text string

options?

Props

Options object

Returns

Textbox<Props, SProps, EventSpec>

Overrides

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

IText.__corner

---

__lineHeights

__lineHeights: number[]

Defined in: src/shapes/Text/Text.ts:411

Inherited from

IText.__lineHeights

---

__lineWidths

__lineWidths: number[]

Defined in: src/shapes/Text/Text.ts:412

Inherited from

IText.__lineWidths

---

_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

IText._controlsVisibility

---

_fontSizeMult

_fontSizeMult: number

Defined in: src/shapes/Text/Text.ts:339

Text Line proportion to font Size (in pixels)

Default

Inherited from

IText._fontSizeMult

---

_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

IText._scaling

---

_styleMap

_styleMap: StyleMap

Defined in: src/shapes/Textbox.ts:88

---

_text

_text: string[]

Defined in: src/shapes/Text/Text.ts:409

Inherited from

IText._text

---

_textLines

_textLines: string[][]

Defined in: src/shapes/Text/Text.ts:406

same as textlines, but each line is an array of graphemes as split by splitByGrapheme

Default

Inherited from

IText._textLines

---

_unwrappedTextLines

_unwrappedTextLines: string[][]

Defined in: src/shapes/Text/Text.ts:408

Inherited from

IText._unwrappedTextLines

---

_wordJoiners

_wordJoiners: RegExp

Defined in: src/shapes/Textbox.ts:86

Implementation of

UniqueTextboxProps._wordJoiners

---

absolutePositioned

absolutePositioned: boolean

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

Meaningful ONLY when the object is used as clipPath. if true, the clipPath will have its top and left relative to canvas, and will not be influenced by the object transform. This will make the clipPath relative to the canvas, but clipping just a particular object. WARNING this is beta, this feature may change or be renamed. since 2.4.0

Default

false

Inherited from

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

IText.aCoords

---

angle

angle: TDegree

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

Angle of rotation of an object (in degrees)

Default

0

Inherited from

IText.angle

---

backgroundColor

backgroundColor: string

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

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

Default

Inherited from

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

Inherited from

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

Inherited from

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

Inherited from

IText.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. If you need to divide border from control strokeWidth you will need to write your own render function for controls

Default

1

Inherited from

IText.borderScaleFactor

---

caching

caching: boolean

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

Indicates whether internal text char widths can be cached

Default

Inherited from

IText.caching

---

centeredRotation

centeredRotation: boolean

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

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

Since

1.3.4

Default

Inherited from

IText.centeredRotation

---

centeredScaling

centeredScaling: boolean

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

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

Since

1.3.4

Default

Inherited from

IText.centeredScaling

---

charSpacing

charSpacing: number

Defined in: src/shapes/Text/Text.ts:347

additional space between characters expressed in thousands of em unit

Default

Inherited from

IText.charSpacing

---

clipPath?

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

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

Inherited from

IText.clipPath

---

clipPathId?

optional clipPathId: string

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

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

Inherited from

IText.clipPathId

---

compositionColor

compositionColor: string

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

Inherited from

IText.compositionColor

---

compositionEnd

compositionEnd: number

Defined in: src/shapes/IText/IText.ts:147

Inherited from

IText.compositionEnd

---

compositionStart

compositionStart: number

Defined in: src/shapes/IText/IText.ts:145

Inherited from

IText.compositionStart

---

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

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

Inherited from

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

Inherited from

IText.cornerDashArray

---

cornerSize

cornerSize: number

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

Size of object’s controlling corners (in pixels)

Default

13

Inherited from

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

''

Inherited from

IText.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'

Inherited from

IText.cornerStyle

---

ctrlKeysMapDown

ctrlKeysMapDown: TKeyMapIText

Defined in: src/shapes/IText/ITextKeyBehavior.ts:42

For functionalities on keyDown + ctrl || cmd

Inherited from

IText.ctrlKeysMapDown

---

ctrlKeysMapUp

ctrlKeysMapUp: TKeyMapIText

Defined in: src/shapes/IText/ITextKeyBehavior.ts:37

For functionalities on keyUp + ctrl || cmd

Inherited from

IText.ctrlKeysMapUp

---

cursorColor

cursorColor: string

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

Color of text cursor color in editing mode. if not set (default) will take color from the text. if set to a color value that fabric can understand, it will be used instead of the color of the text at the current position.

Default

Inherited from

IText.cursorColor

---

cursorDelay

cursorDelay: number

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

Delay between cursor blink (in ms)

Default

Inherited from

IText.cursorDelay

---

cursorDuration

cursorDuration: number

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

Duration of cursor fade in (in ms)

Default

Inherited from

IText.cursorDuration

---

cursorWidth

cursorWidth: number

Defined in: src/shapes/IText/IText.ts:182

Width of cursor (in px)

Default

Inherited from

IText.cursorWidth

---

deltaY

deltaY: number

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

Baseline shift, styles only, keep at 0 for the main text object

Default

Inherited from

IText.deltaY

---

direction

direction: CanvasDirection

Defined in: src/shapes/Text/Text.ts:367

WARNING: EXPERIMENTAL. NOT SUPPORTED YET determine the direction of the text. This has to be set manually together with textAlign and originX for proper experience. some interesting link for the future https://www.w3.org/International/questions/qa-bidi-unicode-controls

Since

4.5.0

Default

Inherited from

IText.direction

---

dirty

dirty: boolean

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

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

Default

true

Inherited from

IText.dirty

---

dynamicMinWidth

dynamicMinWidth: number

Defined in: src/shapes/Textbox.ts:76

Minimum calculated width of a textbox, in pixels. fixed to 2 so that an empty textbox cannot go to 0 and is still selectable without text.

Default

Implementation of

UniqueTextboxProps.dynamicMinWidth

---

editable

editable: boolean

Defined in: src/shapes/IText/IText.ts:168

Indicates whether a text can be edited

Default

Inherited from

IText.editable

---

editingBorderColor

editingBorderColor: string

Defined in: src/shapes/IText/IText.ts:175

Border color of text object while it’s in editing mode

Default

Inherited from

IText.editingBorderColor

---

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

Inherited from

IText.evented

---

excludeFromExport

excludeFromExport: boolean

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

When true, object is not exported in OBJECT/JSON

Since

1.6.3

Default

Inherited from

IText.excludeFromExport

---

fill

fill: null | string | TFiller

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

Inherited from

IText.fill

---

fillRule

fillRule: CanvasFillRule

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

Fill rule used to fill an object accepted values are nonzero, evenodd Backwards incompatibility note: This property was used for setting globalCompositeOperation until v1.4.12 (use globalCompositeOperation instead)

Default

nonzero

Inherited from

IText.fillRule

---

flipX

flipX: boolean

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

When true, an object is rendered as flipped horizontally

Default

false

Inherited from

IText.flipX

---

flipY

flipY: boolean

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

When true, an object is rendered as flipped vertically

Default

false

Inherited from

IText.flipY

---

fontFamily

fontFamily: string

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

Font family

Default

Inherited from

IText.fontFamily

---

fontSize

fontSize: number

Defined in: src/shapes/Text/Text.ts:174

Font size (in pixels)

Default

Inherited from

IText.fontSize

---

fontStyle

fontStyle: string

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

Font style . Possible values: "", “normal”, “italic” or “oblique”.

Default

Inherited from

IText.fontStyle

---

fontWeight

fontWeight: string | number

Defined in: src/shapes/Text/Text.ts:181

Font weight (e.g. bold, normal, 400, 600, 800)

Default

Inherited from

IText.fontWeight

---

globalCompositeOperation

globalCompositeOperation: GlobalCompositeOperation

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

Composite rule used for canvas globalCompositeOperation

Default

Inherited from

IText.globalCompositeOperation

---

hasBorders

hasBorders: boolean

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

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

Default

Inherited from

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

Inherited from

IText.hasControls

---

height

height: number

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

Object height

Default

Inherited from

IText.height

---

hiddenTextarea

hiddenTextarea: null | HTMLTextAreaElement

Defined in: src/shapes/IText/ITextKeyBehavior.ts:44

Inherited from

IText.hiddenTextarea

---

hiddenTextareaContainer?

optional hiddenTextareaContainer: null | HTMLElement

Defined in: src/shapes/IText/ITextKeyBehavior.ts:54

DOM container to append the hiddenTextarea. An alternative to attaching to the document.body. Useful to reduce laggish redraw of the full document.body tree and also with modals event capturing that won’t let the textarea take focus.

Default

Inherited from

IText.hiddenTextareaContainer

---

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

Inherited from

IText.hoverCursor

---

includeDefaultValues

includeDefaultValues: boolean

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

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

Default

Inherited from

IText.includeDefaultValues

---

initialized?

optional initialized: true

Defined in: src/shapes/Text/Text.ts:413

Inherited from

IText.initialized

---

inverted

inverted: boolean

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

Meaningful ONLY when the object is used as clipPath. if true, the clipPath will make the object clip to the outside of the clipPath since 2.4.0

Default

false

Inherited from

IText.inverted

---

isEditing

isEditing: boolean

Defined in: src/shapes/IText/IText.ts:161

Indicates whether text is in editing mode

Default

Inherited from

IText.isEditing

---

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

IText.isMoving

---

isWrapping

isWrapping: boolean

Defined in: src/shapes/Textbox.ts:90

---

keysMap

keysMap: TKeyMapIText

Defined in: src/shapes/IText/ITextKeyBehavior.ts:30

For functionalities on keyDown Map a special key to a function of the instance/prototype If you need different behavior for ESC or TAB or arrows, you have to change this map setting the name of a function that you build on the IText or your prototype. the map change will affect all Instances unless you need for only some text Instances in that case you have to clone this object and assign your Instance. this.keysMap = Object.assign({}, this.keysMap); The function must be in IText.prototype.myFunction And will receive event as args[0]

Inherited from

IText.keysMap

---

keysMapRtl

keysMapRtl: TKeyMapIText

Defined in: src/shapes/IText/ITextKeyBehavior.ts:32

Inherited from

IText.keysMapRtl

---

left

left: number

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

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

Default

0

Inherited from

IText.left

---

lineHeight

lineHeight: number

Defined in: src/shapes/Text/Text.ts:231

Line height

Default

Inherited from

IText.lineHeight

---

linethrough

linethrough: boolean

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

Text decoration linethrough.

Default

Inherited from

IText.linethrough

---

lockMovementX

lockMovementX: boolean

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

When true, object horizontal movement is locked

Default

Inherited from

IText.lockMovementX

---

lockMovementY

lockMovementY: boolean

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

When true, object vertical movement is locked

Default

Inherited from

IText.lockMovementY

---

lockRotation

lockRotation: boolean

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

When true, object rotation is locked

Default

Inherited from

IText.lockRotation

---

lockScalingFlip

lockScalingFlip: boolean

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

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

Default

Inherited from

IText.lockScalingFlip

---

lockScalingX

lockScalingX: boolean

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

When true, object horizontal scaling is locked

Default

Inherited from

IText.lockScalingX

---

lockScalingY

lockScalingY: boolean

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

When true, object vertical scaling is locked

Default

Inherited from

IText.lockScalingY

---

lockSkewingX

lockSkewingX: boolean

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

When true, object horizontal skewing is locked

Default

Inherited from

IText.lockSkewingX

---

lockSkewingY

lockSkewingY: boolean

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

When true, object vertical skewing is locked

Default

Inherited from

IText.lockSkewingY

---

matrixCache?

optional matrixCache: TMatrixCache

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

storage cache for object full transform matrix

Inherited from

IText.matrixCache

---

MIN_TEXT_WIDTH

MIN_TEXT_WIDTH: number

Defined in: src/shapes/Text/Text.ts:391

contains the min text width to avoid getting 0

Default

Inherited from

IText.MIN_TEXT_WIDTH

---

minScaleLimit

minScaleLimit: number

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

Minimum allowed scale value of an object

Default

0

Inherited from

IText.minScaleLimit

---

minWidth

minWidth: number

Defined in: src/shapes/Textbox.ts:67

Minimum width of textbox, in pixels.

Default

Implementation of

UniqueTextboxProps.minWidth

---

moveCursor

moveCursor: null | string

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

Default cursor value used when moving this object on canvas

Default

null

Inherited from

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

Inherited from

IText.noScaleCache

---

objectCaching

objectCaching: boolean

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

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

Since

1.7.0

Default

true

Inherited from

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

IText.oCoords

---

opacity

opacity: number

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

Opacity of an object

Default

1

Inherited from

IText.opacity

---

originX

originX: TOriginX

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

Deprecated

please use ‘center’ as value in new projects

Inherited from

IText.originX

---

originY

originY: TOriginY

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

Deprecated

please use ‘center’ as value in new projects

Inherited from

IText.originY

---

overline

overline: boolean

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

Text decoration overline.

Default

Inherited from

IText.overline

---

ownMatrixCache?

optional ownMatrixCache: TMatrixCache

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

storage cache for object transform matrix

Inherited from

IText.ownMatrixCache

---

padding

padding: number

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

Padding between object and its controlling borders (in pixels)

Default

0

Inherited from

IText.padding

---

paintFirst

paintFirst: "fill" | "stroke"

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

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

Default

Inherited from

IText.paintFirst

---

parent?

optional parent: Group

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

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

Inherited from

IText.parent

---

path?

optional path: Path<Partial<PathProps>, SerializedPathProps, ObjectEvents>

Defined in: src/shapes/Text/Text.ts:296

Path that the text should follow. since 4.6.0 the path will be drawn automatically. if you want to make the path visible, give it a stroke and strokeWidth or fill value if you want it to be hidden, assign visible = false to the path. This feature is in BETA, and SVG import/export is not yet supported.

Example

const textPath = new Text('Text on a path', {
    top: 150,
    left: 150,
    textAlign: 'center',
    charSpacing: -50,
    path: new Path('M 0 0 C 50 -100 150 -100 200 0', {
        strokeWidth: 1,
        visible: false
    }),
    pathSide: 'left',
    pathStartOffset: 0
});

Default

Inherited from

IText.path

---

pathAlign

pathAlign: TPathAlign

Defined in: src/shapes/Text/Text.ts:322

How text is aligned to the path. This property determines the perpendicular position of each character relative to the path. (one of “baseline”, “center”, “ascender”, “descender”) This feature is in BETA, and its behavior may change

Default

Inherited from

IText.pathAlign

---

pathSide

pathSide: TPathSide

Defined in: src/shapes/Text/Text.ts:312

Which side of the path the text should be drawn on. Only used when text has a path

Default

Inherited from

IText.pathSide

---

pathStartOffset

pathStartOffset: number

Defined in: src/shapes/Text/Text.ts:304

Offset amount for text path starting position Only used when text has a path

Default

Inherited from

IText.pathStartOffset

---

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

Inherited from

IText.perPixelTargetFind

---

scaleX

scaleX: number

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

Object scale factor (horizontal)

Default

1

Inherited from

IText.scaleX

---

scaleY

scaleY: number

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

Object scale factor (vertical)

Default

1

Inherited from

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

Inherited from

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

Inherited from

IText.selectionBackgroundColor

---

selectionColor

selectionColor: string

Defined in: src/shapes/IText/IText.ts:154

Color of text selection

Default

Inherited from

IText.selectionColor

---

selectionEnd

selectionEnd: number

Defined in: src/shapes/IText/IText.ts:143

Index where text selection ends

Default

Inherited from

IText.selectionEnd

---

selectionStart

selectionStart: number

Defined in: src/shapes/IText/IText.ts:136

Index where text selection starts (or where cursor is when there is no selection)

Default

Inherited from

IText.selectionStart

---

shadow

shadow: null | Shadow

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

Inherited from

IText.shadow

---

skewX

skewX: number

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

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

Default

0

Inherited from

IText.skewX

---

skewY

skewY: number

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

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

Default

0

Inherited from

IText.skewY

---

snapAngle?

optional snapAngle: TDegree

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

The angle that an object will lock to while rotating.

Inherited from

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

Inherited from

IText.snapThreshold

---

splitByGrapheme

splitByGrapheme: boolean

Defined in: src/shapes/Textbox.ts:84

Use this boolean property in order to split strings that have no white space concept. this is a cheap way to help with chinese/japanese

Since

2.6.0

Implementation of

UniqueTextboxProps.splitByGrapheme

---

stroke

stroke: null | string | TFiller

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

Inherited from

IText.stroke

---

strokeDashArray

strokeDashArray: null | number[]

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

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

Default

null;

Inherited from

IText.strokeDashArray

---

strokeDashOffset

strokeDashOffset: number

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

Line offset of an object’s stroke

Default

0

Inherited from

IText.strokeDashOffset

---

strokeLineCap

strokeLineCap: CanvasLineCap

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

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

Default

butt

Inherited from

IText.strokeLineCap

---

strokeLineJoin

strokeLineJoin: CanvasLineJoin

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

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

Default

Inherited from

IText.strokeLineJoin

---

strokeMiterLimit

strokeMiterLimit: number

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

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

Default

4

Inherited from

IText.strokeMiterLimit

---

strokeUniform

strokeUniform: boolean

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

When false, the stoke width will scale with the object. When true, the stroke will always match the exact pixel size entered for stroke width. this Property does not work on Text classes or drawing call that uses strokeText,fillText methods default to false

Since

2.6.0

Default

false

Default

false

Inherited from

IText.strokeUniform

---

strokeWidth

strokeWidth: number

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

Width of a stroke used to render this object

Default

1

Inherited from

IText.strokeWidth

---

styles

styles: TextStyle

Defined in: src/shapes/Text/Text.ts:272

Inherited from

IText.styles

---

subscript

subscript: object

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

Subscript schema object (minimum overlap)

baseline

baseline: number

baseline-shift factor (downwards)

Default

0.11

size

size: number

fontSize factor

Default

0.6

Inherited from

IText.subscript

---

superscript

superscript: object

Defined in: src/shapes/Text/Text.ts:236

Superscript schema object (minimum overlap)

baseline

baseline: number

baseline-shift factor (upwards)

Default

-0.35

size

size: number

fontSize factor

Default

0.6

Inherited from

IText.superscript

---

text

text: string

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

Inherited from

IText.text

---

textAlign

textAlign: string

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

Text alignment. Possible values: “left”, “center”, “right”, “justify”, “justify-left”, “justify-center” or “justify-right”.

Default

Inherited from

IText.textAlign

---

textBackgroundColor

textBackgroundColor: string

Defined in: src/shapes/Text/Text.ts:270

Background color of text lines

Default

Inherited from

IText.textBackgroundColor

---

textLines

textLines: string[]

Defined in: src/shapes/Text/Text.ts:399

contains the the text of the object, divided in lines as they are displayed on screen. Wrapping will divide the text independently of line breaks

Default

Inherited from

IText.textLines

---

top

top: number

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

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

Default

0

Inherited from

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

Inherited from

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

Inherited from

IText.transparentCorners

---

underline

underline: boolean

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

Text decoration underline.

Default

Inherited from

IText.underline

---

visible

visible: boolean

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

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

Default

Inherited from

IText.visible

---

width

width: number

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

Object width

Default

Inherited from

IText.width

---

_styleProperties

static _styleProperties: readonly StylePropertiesType[] = styleProperties

Defined in: src/shapes/Text/StyledText.ts:30

Inherited from

IText._styleProperties

---

ATTRIBUTE_NAMES

static ATTRIBUTE_NAMES: string[]

Defined in: src/shapes/Text/Text.ts:1826

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

Static

Member Of

Text @see: http://www.w3.org/TR/SVG/text.html#TextElement

Inherited from

IText.ATTRIBUTE_NAMES

---

cacheProperties

static cacheProperties: string[]

Defined in: src/shapes/Text/Text.ts:415

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

Inherited from

IText.cacheProperties

---

colorProperties

static colorProperties: string[]

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

List of properties to consider for animating colors.

Inherited from

IText.colorProperties

---

customProperties

static customProperties: string[] = []

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

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

Inherited from

IText.customProperties

---

genericFonts

static genericFonts: string[]

Defined in: src/shapes/Text/Text.ts:1802

List of generic font families

See

https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#generic-name

Inherited from

IText.genericFonts

---

ownDefaults

static ownDefaults: Partial<TClassProperties<Textbox<Partial<TextboxProps>, SerializedTextboxProps, ITextEvents>>> = textboxDefaultValues

Defined in: src/shapes/Textbox.ts:96

Overrides

IText.ownDefaults

---

stateProperties

static stateProperties: string[]

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

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

Inherited from

IText.stateProperties

---

type

static type: string = 'Textbox'

Defined in: src/shapes/Textbox.ts:92

Overrides

IText.type

Accessors

type

Get Signature

get type(): string

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

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

Inherited from

IText.type

Methods

_drawClipPath()

_drawClipPath(ctx, clipPath, context): void

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

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

Parameters

ctx

CanvasRenderingContext2D

clipPath

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

context

DrawContext

Returns

void

Inherited from

IText._drawClipPath

---

_getFontDeclaration()

_getFontDeclaration(__namedParameters?, forMeasuring?): string

Defined in: src/shapes/Text/Text.ts:1661

return font declaration string for canvas context

Parameters

__namedParameters?

Partial<Pick<Partial<CompleteTextStyleDeclaration>, "fontFamily" | "fontSize" | "fontStyle" | "fontWeight">> = {}

forMeasuring?

boolean

Returns

string

font declaration formatted for canvas context.

Inherited from

IText._getFontDeclaration

---

_getGraphemeBox()

_getGraphemeBox(grapheme, lineIndex, charIndex, prevGrapheme?, skipLeft?): GraphemeBBox

Defined in: src/shapes/Text/Text.ts:983

Parameters

grapheme

string

to be measured

lineIndex

number

index of the line where the char is

charIndex

number

position in the line

prevGrapheme?

string

character preceding the one to be measured

skipLeft?

boolean

Returns

GraphemeBBox

grapheme bbox

Inherited from

IText._getGraphemeBox

---

_getSelectionForOffset()

_getSelectionForOffset(e, isRight): number

Defined in: src/shapes/IText/ITextKeyBehavior.ts:383

private Helps finding if the offset should be counted from Start or End

Parameters

e

KeyboardEvent

Event object

isRight

boolean

Returns

number

Inherited from

IText._getSelectionForOffset

---

_getWidthOfCharSpacing()

_getWidthOfCharSpacing(): number

Defined in: src/shapes/Text/Text.ts:1528

Returns

number

Inherited from

IText._getWidthOfCharSpacing

---

_limitCacheSize()

_limitCacheSize(dims): any

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

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

Parameters

dims

any

Returns

any

.width width of canvas

Inherited from

IText._limitCacheSize

---

_measureLine()

_measureLine(lineIndex): object

Defined in: src/shapes/Text/Text.ts:891

measure every grapheme of a line, populating __charBounds

Parameters

lineIndex

number

Returns

object

object.width total width of characters

numOfSpaces

numOfSpaces: number = 0

width

width: number

Inherited from

IText._measureLine

---

_measureWord()

_measureWord(word, lineIndex, charOffset): number

Defined in: src/shapes/Textbox.ts:389

Helper function to measure a string of text, given its lineIndex and charIndex offset It gets called when charBounds are not available yet. Override if necessary Use with Textbox#wordSplit

Parameters

word

string[]

lineIndex

number

charOffset

number = 0

Returns

number

---

_mouseDownHandler()

_mouseDownHandler(__namedParameters): void

Defined in: src/shapes/IText/ITextClickBehavior.ts:98

Default event handler for the basic functionalities needed on _mouseDown can be overridden to do something different. Scope of this implementation is: find the click position, set selectionStart find selectionEnd, initialize the drawing of either cursor or selection area initializing a mousedDown on a text area will cancel fabricjs knowledge of current compositionMode. It will be set to false.

Parameters

__namedParameters

TPointerEventInfo<TPointerEvent> & TPointerEventInfo<TPointerEvent> & object

Returns

void

Inherited from

IText._mouseDownHandler

---

_moveCursorLeftOrRight()

_moveCursorLeftOrRight(direction, e): void

Defined in: src/shapes/IText/ITextKeyBehavior.ts:645

Moves cursor right or Left, fires event

Parameters

direction

‘Left’, ‘Right’

"Left" | "Right"

e

KeyboardEvent

Event object

Returns

void

Inherited from

IText._moveCursorLeftOrRight

---

_moveCursorUpOrDown()

_moveCursorUpOrDown(direction, e): void

Defined in: src/shapes/IText/ITextKeyBehavior.ts:483

Moves cursor up or down, fires the events

Parameters

direction

‘Up’ or ‘Down’

"Up" | "Down"

e

KeyboardEvent

Event object

Returns

void

Inherited from

IText._moveCursorUpOrDown

---

_removeCacheCanvas()

_removeCacheCanvas(): void

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

Remove cacheCanvas and its dimensions from the objects

Returns

void

Inherited from

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

IText._renderControls

---

_renderCursor()

_renderCursor(ctx, boundaries, selectionStart): void

Defined in: src/shapes/IText/IText.ts:615

Render the cursor at the given selectionStart.

Parameters

ctx

CanvasRenderingContext2D

transformed context to draw on

boundaries

CursorBoundaries

selectionStart

number

Returns

void

Inherited from

IText._renderCursor

---

_setClippingProperties()

_setClippingProperties(ctx): void

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

Parameters

ctx

CanvasRenderingContext2D

Returns

void

Inherited from

IText._setClippingProperties

---

_setFillStyles()

_setFillStyles(ctx, style): object

Defined in: src/shapes/Text/Text.ts:1341

This function prepare the canvas for a ill style, and fill need to be sent in as defined

Parameters

ctx

CanvasRenderingContext2D

style

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

with ill defined

Returns

object

offsetX

offsetX: number

offsetY

offsetY: number

Inherited from

IText._setFillStyles

---

_setStrokeStyles()

_setStrokeStyles(ctx, style): object

Defined in: src/shapes/Text/Text.ts:1319

This function prepare the canvas for a stroke style, and stroke and strokeWidth need to be sent in as defined

Parameters

ctx

CanvasRenderingContext2D

style

Pick<CompleteTextStyleDeclaration, "stroke" | "strokeWidth">

with stroke and strokeWidth defined

Returns

object

offsetX

offsetX: number

offsetY

offsetY: number

Inherited from

IText._setStrokeStyles

---

_setupCompositeOperation()

_setupCompositeOperation(ctx): void

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

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

Parameters

ctx

CanvasRenderingContext2D

Rendering canvas context

Returns

void

Inherited from

IText._setupCompositeOperation

---

_splitTextIntoLines()

_splitTextIntoLines(text): TextLinesInfo

Defined in: src/shapes/Textbox.ts:533

Gets lines of text to render in the Textbox. This function calculates text wrapping on the fly every time it is called.

Parameters

text

string

text to split

Returns

TextLinesInfo

Array of lines in the Textbox.

Overrides

IText._splitTextIntoLines

---

_toSVG()

_toSVG(_reviver?): string[]

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

Returns svg representation of an instance This function is implemented in each subclass This is just because typescript otherwise cryies all the time

Parameters

_reviver?

TSVGReviver

Returns

string[]

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

Inherited from

IText._toSVG

---

_wrapText()

_wrapText(lines, desiredWidth): string[][]

Defined in: src/shapes/Textbox.ts:324

Wraps text using the ‘width’ property of Textbox. First this function splits text on newlines, so we preserve newlines entered by the user. Then it wraps each line using the width of the Textbox by calling _wrapLine().

Parameters

lines

string[]

The string array of text that is split into lines

desiredWidth

number

width you want to wrap to

Returns

string[][]

Array of lines

---

abortCursorAnimation()

abortCursorAnimation(): void

Defined in: src/shapes/IText/ITextBehavior.ts:182

Aborts cursor animation, clears all timeouts and clear textarea context if necessary

Returns

void

Inherited from

IText.abortCursorAnimation

---

addPaintOrder()

addPaintOrder(this): string

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

Parameters

this

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

Returns

string

Inherited from

IText.addPaintOrder

---

animate()

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

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

Animates object’s properties

Type Parameters

T

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

IText.animate

---

blur()

blur(): void

Defined in: src/shapes/IText/ITextKeyBehavior.ts:106

Override this method to customize cursor behavior on textbox blur

Returns

void

Inherited from

IText.blur

---

calcACoords()

calcACoords(): TCornerPoint

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

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

Returns

TCornerPoint

Inherited from

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

IText.calcOCoords

---

calcOwnMatrix()

calcOwnMatrix(): TMat2D

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

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

Returns

TMat2D

transform matrix for the object

Inherited from

IText.calcOwnMatrix

---

calcTextHeight()

calcTextHeight(): number

Defined in: src/shapes/Text/Text.ts:1044

Calculate text box height

Returns

number

Inherited from

IText.calcTextHeight

---

calcTransformMatrix()

calcTransformMatrix(skipGroup?): TMat2D

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

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

IText.calcTransformMatrix

---

canDrop()

canDrop(e): boolean

Defined in: src/shapes/IText/ITextClickBehavior.ts:64

override this method to control whether instance should/shouldn’t become a drop target

Parameters

e

DragEvent

Returns

boolean

Inherited from

IText.canDrop

---

cleanStyle()

cleanStyle(property): undefined | false

Defined in: src/shapes/Text/StyledText.ts:101

Check if characters in a text have a value for a property whose value matches the textbox’s value for that property. If so, the character-level property is deleted. If the character has no other properties, then it is also deleted. Finally, if the line containing that character has no other characters then it also is deleted.

Parameters

property

StylePropertiesType

Returns

undefined | false

Inherited from

IText.cleanStyle

---

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

IText.clearContextTop

---

clone()

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

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

Clones an instance.

Parameters

propertiesToInclude?

string[]

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

Returns

Promise<Textbox<Props, SProps, EventSpec>>

Inherited from

IText.clone

---

cloneAsImage()

cloneAsImage(options?): FabricImage

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

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

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

IText.cloneAsImage

---

cmdAll()

cmdAll(): void

Defined in: src/shapes/IText/ITextBehavior.ts:229

Selects entire text and updates the visual state

Returns

void

Inherited from

IText.cmdAll

---

complexity()

complexity(): number

Defined in: src/shapes/Text/Text.ts:1794

Returns complexity of an instance

Returns

number

complexity

Inherited from

IText.complexity

---

containsPoint()

containsPoint(point): boolean

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

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

IText.containsPoint

---

copy()

copy(): void

Defined in: src/shapes/IText/ITextKeyBehavior.ts:301

Copies selected text

Returns

void

Inherited from

IText.copy

---

dispose()

dispose(): void

Defined in: src/shapes/IText/IText.ts:787

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

Returns

void

Inherited from

IText.dispose

---

doubleClickHandler()

doubleClickHandler(options): void

Defined in: src/shapes/IText/ITextClickBehavior.ts:71

Default handler for double click, select a word

Parameters

options

TPointerEventInfo

Returns

void

Inherited from

IText.doubleClickHandler

---

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

object representing current object parameters

styleOverride?

TStyleOverride

object to override the object style

Returns

void

Inherited from

IText.drawBorders

---

drawCacheOnCanvas()

drawCacheOnCanvas(this, ctx): void

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

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

Parameters

this

TCachedFabricObject

ctx

CanvasRenderingContext2D

Context to render on

Returns

void

Inherited from

IText.drawCacheOnCanvas

---

drawClipPathOnCache()

drawClipPathOnCache(ctx, clipPath, canvasWithClipPath): void

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

Execute the drawing operation for an object clipPath

Parameters

ctx

CanvasRenderingContext2D

Context to render on

clipPath

BaseFabricObject

canvasWithClipPath

HTMLCanvasElement

Returns

void

Inherited from

IText.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 = {}

object to override the object style

Returns

void

Inherited from

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

IText.drawControlsConnectingLines

---

drawObject()

drawObject(ctx, forClipping, context): void

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

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

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

IText.drawSelectionBackground

---

enlargeSpaces()

enlargeSpaces(): void

Defined in: src/shapes/Text/Text.ts:491

Enlarge space boxes and shift the others

Returns

void

Inherited from

IText.enlargeSpaces

---

enterEditing()

enterEditing(e?): void

Defined in: src/shapes/IText/ITextBehavior.ts:391

Enters editing state

Parameters

e?

TPointerEvent

Returns

void

Inherited from

IText.enterEditing

---

enterEditingImpl()

enterEditingImpl(): void

Defined in: src/shapes/IText/ITextBehavior.ts:410

runs the actual logic that enter from editing state, see enterEditing

Returns

void

Inherited from

IText.enterEditingImpl

---

exitEditing()

exitEditing(): Textbox<Props, SProps, EventSpec>

Defined in: src/shapes/IText/ITextBehavior.ts:720

Exits from editing state and fires relevant events

Returns

Textbox<Props, SProps, EventSpec>

Inherited from

IText.exitEditing

---

exitEditingImpl()

exitEditingImpl(): void

Defined in: src/shapes/IText/ITextBehavior.ts:707

runs the actual logic that exits from editing state, see exitEditing But it does not fire events

Returns

void

Inherited from

IText.exitEditingImpl

---

findAncestorsWithClipPath()

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

Defined in: src/shapes/IText/IText.ts:452

Finds and returns an array of clip paths that are applied to the parent group(s) of the current FabricObject instance. The object’s hierarchy is traversed upwards (from the current object towards the root of the canvas), checking each parent object for the presence of a clipPath that is not absolutely positioned.

Returns

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

Inherited from

IText.findAncestorsWithClipPath

---

findCommonAncestors()

findCommonAncestors<T>(other): AncestryComparison

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

Compare ancestors

Type Parameters

T

T extends Textbox<Props, SProps, EventSpec>

Parameters

other

T

Returns

AncestryComparison

an object that represent the ancestry situation.

Inherited from

IText.findCommonAncestors

---

findLineBoundaryLeft()

findLineBoundaryLeft(startFrom): number

Defined in: src/shapes/IText/ITextBehavior.ts:295

Find new selection index representing start of current line according to current selection index

Parameters

startFrom

number

Current selection index

Returns

number

New selection index

Inherited from

IText.findLineBoundaryLeft

---

findLineBoundaryRight()

findLineBoundaryRight(startFrom): number

Defined in: src/shapes/IText/ITextBehavior.ts:312

Find new selection index representing end of current line according to current selection index

Parameters

startFrom

number

Current selection index

Returns

number

New selection index

Inherited from

IText.findLineBoundaryRight

---

findWordBoundaryLeft()

findWordBoundaryLeft(startFrom): number

Defined in: src/shapes/IText/ITextBehavior.ts:247

Find new selection index representing start of current word according to current selection index

Parameters

startFrom

number

Current selection index

Returns

number

New selection index

Inherited from

IText.findWordBoundaryLeft

---

findWordBoundaryRight()

findWordBoundaryRight(startFrom): number

Defined in: src/shapes/IText/ITextBehavior.ts:271

Find new selection index representing end of current word according to current selection index

Parameters

startFrom

number

Current selection index

Returns

number

New selection index

Inherited from

IText.findWordBoundaryRight

---

fire()

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

Defined in: src/Observable.ts:167

Fires event with an optional options object

Type Parameters

K

K extends string | number | symbol

Parameters

eventName

K

Event name to fire

options?

EventSpec[K]

Options object

Returns

void

Inherited from

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

IText.forEachControl

---

fromGraphemeToStringSelection()

fromGraphemeToStringSelection(start, end, graphemes): object

Defined in: src/shapes/IText/ITextBehavior.ts:503

convert from fabric to textarea values

Parameters

start

number

end

number

graphemes

string[]

Returns

object

selectionEnd

selectionEnd: number = graphemeStart

selectionStart

selectionStart: number = graphemeStart

Inherited from

IText.fromGraphemeToStringSelection

---

fromStringToGraphemeSelection()

fromStringToGraphemeSelection(start, end, text): object

Defined in: src/shapes/IText/ITextBehavior.ts:486

convert from textarea to grapheme indexes

Parameters

start

number

end

number

text

string

Returns

object

selectionEnd

selectionEnd: number = graphemeStart

selectionStart

selectionStart: number = graphemeStart

Inherited from

IText.fromStringToGraphemeSelection

---

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

IText.get

---

get2DCursorLocation()

get2DCursorLocation(selectionStart?, skipWrapping?): object

Defined in: src/shapes/IText/IText.ts:351

Returns 2d representation (lineIndex and charIndex) of cursor (or selection start)

Parameters

selectionStart?

number = ...

Optional index. When not given, current selectionStart is used.

skipWrapping?

boolean

consider the location for unwrapped lines. useful to manage styles.

Returns

object

charIndex

charIndex: number = selectionStart

lineIndex

lineIndex: number = i

Inherited from

IText.get2DCursorLocation

---

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

IText.getActiveControl

---

getAncestors()

getAncestors(): Ancestors

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

Returns

Ancestors

ancestors (excluding ActiveSelection) from bottom to top

Inherited from

IText.getAncestors

---

getBoundingRect()

getBoundingRect(): TBBox

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

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

Returns

TBBox

Object with left, top, width, height properties

Inherited from

IText.getBoundingRect

---

getCanvasRetinaScaling()

getCanvasRetinaScaling(): number

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

Returns

number

Inherited from

IText.getCanvasRetinaScaling

---

getCenterPoint()

getCenterPoint(): Point

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

Returns the center coordinates of the object relative to canvas

Returns

Point

Inherited from

IText.getCenterPoint

---

getCompleteStyleDeclaration()

getCompleteStyleDeclaration(lineIndex, charIndex): CompleteTextStyleDeclaration

Defined in: src/shapes/Text/StyledText.ts:276

return a new object that contains all the style property for a character the object returned is newly created

Parameters

lineIndex

number

of the line where the character is

charIndex

number

position of the character on the line

Returns

CompleteTextStyleDeclaration

style object

Inherited from

IText.getCompleteStyleDeclaration

---

getCoords()

getCoords(): Point[]

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

Returns

Point[]

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

Inherited from

IText.getCoords

---

getCurrentCharColor()

getCurrentCharColor(): null | string | TFiller

Defined in: src/shapes/IText/IText.ts:771

High level function to know the color of the cursor. the currentChar is the one that precedes the cursor Returns color (fill) of char at the current cursor if the text object has a pattern or gradient for filler, it will return that. Unused by the library, is for the end user

Returns

null | string | TFiller

Character color (fill)

Inherited from

IText.getCurrentCharColor

---

getCurrentCharFontSize()

getCurrentCharFontSize(): number

Defined in: src/shapes/IText/IText.ts:758

High level function to know the height of the cursor. the currentChar is the one that precedes the cursor Returns fontSize of char at the current cursor Unused from the library, is for the end user

Returns

number

Character font size

Inherited from

IText.getCurrentCharFontSize

---

getCursorRenderingData()

getCursorRenderingData(selectionStart, boundaries): CursorRenderingData

Defined in: src/shapes/IText/IText.ts:581

Return the data needed to render the cursor for given selection start The left,top are relative to the object, while width and height are prescaled to look think with canvas zoom and object scaling, so they depend on canvas and object scaling

Parameters

selectionStart

number = ...

boundaries

CursorBoundaries = ...

Returns

CursorRenderingData

Inherited from

IText.getCursorRenderingData

---

getDownCursorOffset()

getDownCursorOffset(e, isRight): number

Defined in: src/shapes/IText/ITextKeyBehavior.ts:351

Gets start offset of a selection

Parameters

e

KeyboardEvent

Event object

isRight

boolean

Returns

number

Inherited from

IText.getDownCursorOffset

---

getGraphemeDataForRender()

getGraphemeDataForRender(lines): GraphemeData

Defined in: src/shapes/Textbox.ts:343

For each line of text terminated by an hard line stop, measure each word width and extract the largest word from all. The returned words here are the one that at the end will be rendered.

Parameters

lines

string[]

the lines we need to measure

Returns

GraphemeData

---

getHeightOfChar()

getHeightOfChar(line, _char): number

Defined in: src/shapes/Text/Text.ts:866

Computes height of character at given position

Parameters

line

number

the line index number

_char

number

the character index number

Returns

number

fontSize of the character

Inherited from

IText.getHeightOfChar

---

getHeightOfLine()

getHeightOfLine(lineIndex): number

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

Calculate height of line at ‘lineIndex’

Parameters

lineIndex

number

index of line to calculate

Returns

number

Inherited from

IText.getHeightOfLine

---

getMinWidth()

getMinWidth(): number

Defined in: src/shapes/Textbox.ts:545

Returns

number

---

getObjectOpacity()

getObjectOpacity(): number

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

Return the object opacity counting also the group property

Returns

number

Inherited from

IText.getObjectOpacity

---

getObjectScaling()

getObjectScaling(): Point

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

Return the object scale factor counting also the group scaling

Returns

Point

Inherited from

IText.getObjectScaling

---

getPointByOrigin()

getPointByOrigin(originX, originY): Point

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

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

Parameters

originX

TOriginX

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

originY

TOriginY

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

Returns

Point

Inherited from

IText.getPointByOrigin

---

getRelativeCenterPoint()

getRelativeCenterPoint(): Point

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

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

Returns

Point

Inherited from

IText.getRelativeCenterPoint

---

getRelativeX()

getRelativeX(): number

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

Returns

number

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

Inherited from

IText.getRelativeX

---

getRelativeXY()

getRelativeXY(): Point

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

Returns

Point

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

Inherited from

IText.getRelativeXY

---

getRelativeY()

getRelativeY(): number

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

Returns

number

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

Inherited from

IText.getRelativeY

---

getScaledHeight()

getScaledHeight(): number

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

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

IText.getScaledHeight

---

getScaledWidth()

getScaledWidth(): number

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

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

IText.getScaledWidth

---

getSelectedText()

getSelectedText(): string

Defined in: src/shapes/IText/ITextBehavior.ts:238

Returns selected text

Returns

string

Inherited from

IText.getSelectedText

---

getSelectionStartFromPointer()

getSelectionStartFromPointer(e): number

Defined in: src/shapes/IText/ITextClickBehavior.ts:193

Returns index of a character corresponding to where an object was clicked

Parameters

e

TPointerEvent

Event object

Returns

number

Index of a character

Inherited from

IText.getSelectionStartFromPointer

---

getSelectionStyles()

getSelectionStyles(startIndex, endIndex, complete?): Partial<CompleteTextStyleDeclaration>[]

Defined in: src/shapes/IText/IText.ts:324

Gets style of a current selection/cursor (at the start position) if startIndex or endIndex are not provided, selectionStart or selectionEnd will be used.

Parameters

startIndex

number = ...

Start index to get styles at

endIndex

number = ...

End index to get styles at, if not specified selectionEnd or startIndex + 1

complete?

boolean

get full style or not

Returns

Partial<CompleteTextStyleDeclaration>[]

styles an array with one, zero or more Style objects

Inherited from

IText.getSelectionStyles

---

getSvgCommons()

getSvgCommons(this): string

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

Returns id attribute for svg output

Parameters

this

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

Returns

string

Inherited from

IText.getSvgCommons

---

getSvgFilter()

getSvgFilter(this): string

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

Returns filter for svg shadow

Parameters

this

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

Returns

string

Inherited from

IText.getSvgFilter

---

getSvgStyles()

getSvgStyles(this, skipShadow?): string

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

Returns styles-string for svg-export

Parameters

this

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

skipShadow?

boolean

a boolean to skip shadow filter output

Returns

string

Inherited from

IText.getSvgStyles

---

getSvgTransform()

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

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

Returns transform-string for svg-export

Parameters

this

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

full?

boolean

additionalTransform?

string = ''

Returns

string

Inherited from

IText.getSvgTransform

---

getTotalAngle()

getTotalAngle(): TDegree

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

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

Returns

TDegree

Inherited from

IText.getTotalAngle

---

getTotalObjectScaling()

getTotalObjectScaling(): Point

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

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

Returns

Point

object with scaleX and scaleY properties

Inherited from

IText.getTotalObjectScaling

---

getUpCursorOffset()

getUpCursorOffset(e, isRight): number

Defined in: src/shapes/IText/ITextKeyBehavior.ts:396

Parameters

e

KeyboardEvent

Event object

isRight

boolean

Returns

number

Inherited from

IText.getUpCursorOffset

---

getValueOfPropertyAt()

getValueOfPropertyAt<T>(lineIndex, charIndex, property): Textbox<Props, SProps, EventSpec>[T]

Defined in: src/shapes/Text/Text.ts:1542

Retrieves the value of property at given character position

Type Parameters

T

T extends StylePropertiesType

Parameters

lineIndex

number

the line number

charIndex

number

the character number

property

T

the property name

Returns

Textbox<Props, SProps, EventSpec>[T]

the value of ‘property’

Inherited from

IText.getValueOfPropertyAt

---

getViewportTransform()

getViewportTransform(): TMat2D

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

Retrieves viewportTransform from Object’s canvas if available

Returns

TMat2D

Inherited from

IText.getViewportTransform

---

getX()

getX(): number

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

Returns

number

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

Inherited from

IText.getX

---

getXY()

getXY(): Point

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

Returns

Point

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

Inherited from

IText.getXY

---

getY()

getY(): number

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

Returns

number

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

Inherited from

IText.getY

---

graphemeSplit()

graphemeSplit(value): string[]

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

Override this method to customize grapheme splitting

Parameters

value

string

Returns

string[]

array of graphemes

Todo

the util graphemeSplit needs to be injectable in some way. is more comfortable to inject the correct util rather than having to override text in the middle of the prototype chain

Inherited from

IText.graphemeSplit

---

handleFiller()

handleFiller<T>(ctx, property, filler): object

Defined in: src/shapes/Text/Text.ts:1279

Type Parameters

T

T extends "fill" | "stroke"

Parameters

ctx

CanvasRenderingContext2D

property

`${T}Style`

filler

string | TFiller

Returns

object

offsetX

offsetX: number

offsetY

offsetY: number

Inherited from

IText.handleFiller

---

hasCommonAncestors()

hasCommonAncestors<T>(other): boolean

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

Type Parameters

T

T extends Textbox<Props, SProps, EventSpec>

Parameters

other

T

Returns

boolean

Inherited from

IText.hasCommonAncestors

---

hasFill()

hasFill(): null | boolean | ""

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

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

Returns

null | boolean | ""

Boolean

Since

3.0.0

Inherited from

IText.hasFill

---

hasStroke()

hasStroke(): null | boolean | ""

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

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

Returns

null | boolean | ""

Boolean

Since

3.0.0

Inherited from

IText.hasStroke

---

initBehavior()

initBehavior(): void

Defined in: src/shapes/IText/ITextClickBehavior.ts:26

Initializes all the interactive behavior of IText

Returns

void

Inherited from

IText.initBehavior

---

initDelayedCursor()

initDelayedCursor(restart?): void

Defined in: src/shapes/IText/ITextBehavior.ts:174

Initializes delayed cursor

Parameters

restart?

boolean

Returns

void

Inherited from

IText.initDelayedCursor

---

initHiddenTextarea()

initHiddenTextarea(): void

Defined in: src/shapes/IText/ITextKeyBehavior.ts:63

Initializes hidden textarea (needed to bring up keyboard in iOS)

Returns

void

Inherited from

IText.initHiddenTextarea

---

insertChars()

insertChars(text, style, start, end): void

Defined in: src/shapes/IText/ITextBehavior.ts:1056

insert characters at start position, before start position. start equal 1 it means the text get inserted between actual grapheme 0 and 1 if style array is provided, it must be as the same length of text in graphemes if end is provided and is bigger than start, old text is replaced. start/end ar per grapheme position in _text array.

Parameters

text

string

text to insert

style

array of style objects

undefined | Partial<CompleteTextStyleDeclaration>[]

start

number

end

number = start

default to start + 1

Returns

void

Inherited from

IText.insertChars

---

insertCharStyleObject()

insertCharStyleObject(lineIndex, charIndex, quantity, copiedStyle?): void

Defined in: src/shapes/IText/ITextBehavior.ts:906

Inserts style object for a given line/char index

Parameters

lineIndex

number

Index of a line

charIndex

number

Index of a char

quantity

number

number Style object to insert, if given

copiedStyle?

Partial<CompleteTextStyleDeclaration>[]

array of style objects

Returns

void

Inherited from

IText.insertCharStyleObject

---

insertNewlineStyleObject()

insertNewlineStyleObject(lineIndex, charIndex, qty, copiedStyle?): void

Defined in: src/shapes/IText/ITextBehavior.ts:837

Handle insertion of more consecutive style lines for when one or more newlines gets added to the text. Since current style needs to be shifted first we shift the current style of the number lines needed, then we add new lines from the last to the first.

Parameters

lineIndex

number

Index of a line

charIndex

number

Index of a char

qty

number

number of lines to add

copiedStyle?

Array of objects styles

Returns

void

Inherited from

IText.insertNewlineStyleObject

---

insertNewStyleBlock()

insertNewStyleBlock(insertedText, start, copiedStyle?): void

Defined in: src/shapes/IText/ITextBehavior.ts:964

Inserts style object(s)

Parameters

insertedText

string[]

Characters at the location where style is inserted

start

number

cursor index for inserting style

copiedStyle?

Partial<CompleteTextStyleDeclaration>[]

array of style objects to insert.

Returns

void

Inherited from

IText.insertNewStyleBlock

---

intersectsWithObject()

intersectsWithObject(other): boolean

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

Checks if object intersects with another object

Parameters

other

ObjectGeometry

Object to test

Returns

boolean

true if object intersects with another object

Inherited from

IText.intersectsWithObject

---

intersectsWithRect()

intersectsWithRect(tl, br): boolean

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

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

Parameters

tl

Point

br

Point

Returns

boolean

Inherited from

IText.intersectsWithRect

---

isCacheDirty()

isCacheDirty(skipCanvas): boolean

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

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

Parameters

skipCanvas

boolean = false

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

Returns

boolean

Inherited from

IText.isCacheDirty

---

isContainedWithinObject()

isContainedWithinObject(other): boolean

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

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

IText.isContainedWithinObject

---

isContainedWithinRect()

isContainedWithinRect(tl, br): boolean

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

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

Parameters

tl

Point

br

Point

Returns

boolean

Inherited from

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

IText.isControlVisible

---

isDescendantOf()

isDescendantOf(target): boolean

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

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

Parameters

target

TAncestor

Returns

boolean

Inherited from

IText.isDescendantOf

---

isEmptyStyles()

isEmptyStyles(lineIndex): boolean

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

Returns true if object has no styling or no styling in a line

Parameters

lineIndex

number

, lineIndex is on wrapped lines.

Returns

boolean

Overrides

IText.isEmptyStyles

---

isEndOfWrapping()

isEndOfWrapping(lineIndex): boolean

Defined in: src/shapes/Textbox.ts:500

Detect if the text line is ended with an hard break text and itext do not have wrapping, return false

Parameters

lineIndex

number

text to split

Returns

boolean

Overrides

IText.isEndOfWrapping

---

isInFrontOf()

isInFrontOf<T>(other): undefined | boolean

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

Type Parameters

T

T extends Textbox<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

IText.isInFrontOf

---

isNotVisible()

isNotVisible(): boolean

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

Returns

boolean

Inherited from

IText.isNotVisible

---

isOnScreen()

isOnScreen(): boolean

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

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

Returns

boolean

true if object is fully or partially contained within canvas

Inherited from

IText.isOnScreen

---

isOverlapping()

isOverlapping<T>(other): boolean

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

Type Parameters

T

T extends ObjectGeometry<ObjectEvents>

Parameters

other

T

Returns

boolean

Inherited from

IText.isOverlapping

---

isPartiallyOnScreen()

isPartiallyOnScreen(): boolean

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

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

Returns

boolean

true if object is partially contained within canvas

Inherited from

IText.isPartiallyOnScreen

---

isType()

isType(…types): boolean

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

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

Parameters

types

…string[]

Returns

boolean

Inherited from

IText.isType

---

measureLine()

measureLine(lineIndex): object

Defined in: src/shapes/Text/Text.ts:874

measure a text line measuring all characters.

Parameters

lineIndex

number

line number

Returns

object

numOfSpaces

numOfSpaces: number = 0

width

width: number

Inherited from

IText.measureLine

---

missingNewlineOffset()

missingNewlineOffset(lineIndex, skipWrapping?): 0 | 1

Defined in: src/shapes/Textbox.ts:519

Detect if a line has a linebreak and so we need to account for it when moving and counting style. This is important only for splitByGrapheme at the end of wrapping. If we are not wrapping the offset is always 1

Parameters

lineIndex

number

skipWrapping?

boolean

Returns

0 | 1

Number

Overrides

IText.missingNewlineOffset

---

moveCursorDown()

moveCursorDown(e): void

Defined in: src/shapes/IText/ITextKeyBehavior.ts:457

Moves cursor down

Parameters

e

KeyboardEvent

Event object

Returns

void

Inherited from

IText.moveCursorDown

---

moveCursorLeft()

moveCursorLeft(e): void

Defined in: src/shapes/IText/ITextKeyBehavior.ts:542

Moves cursor left

Parameters

e

KeyboardEvent

Event object

Returns

void

Inherited from

IText.moveCursorLeft

---

moveCursorLeftWithoutShift()

moveCursorLeftWithoutShift(e): boolean

Defined in: src/shapes/IText/ITextKeyBehavior.ts:594

Moves cursor left without keeping selection

Parameters

e

KeyboardEvent

Returns

boolean

Inherited from

IText.moveCursorLeftWithoutShift

---

moveCursorLeftWithShift()

moveCursorLeftWithShift(e): undefined | boolean

Defined in: src/shapes/IText/ITextKeyBehavior.ts:614

Moves cursor left while keeping selection

Parameters

e

KeyboardEvent

Returns

undefined | boolean

Inherited from

IText.moveCursorLeftWithShift

---

moveCursorRight()

moveCursorRight(e): void

Defined in: src/shapes/IText/ITextKeyBehavior.ts:630

Moves cursor right

Parameters

e

KeyboardEvent

Event object

Returns

void

Inherited from

IText.moveCursorRight

---

moveCursorRightWithoutShift()

moveCursorRightWithoutShift(e): boolean

Defined in: src/shapes/IText/ITextKeyBehavior.ts:680

Moves cursor right without keeping selection

Parameters

e

KeyboardEvent

Event object

Returns

boolean

Inherited from

IText.moveCursorRightWithoutShift

---

moveCursorRightWithShift()

moveCursorRightWithShift(e): undefined | boolean

Defined in: src/shapes/IText/ITextKeyBehavior.ts:664

Moves cursor right while keeping selection

Parameters

e

KeyboardEvent

Returns

undefined | boolean

Inherited from

IText.moveCursorRightWithShift

---

moveCursorUp()

moveCursorUp(e): void

Defined in: src/shapes/IText/ITextKeyBehavior.ts:471

Moves cursor up

Parameters

e

KeyboardEvent

Event object

Returns

void

Inherited from

IText.moveCursorUp

---

moveCursorWithoutShift()

moveCursorWithoutShift(offset): boolean

Defined in: src/shapes/IText/ITextKeyBehavior.ts:527

Moves cursor up without shift

Parameters

offset

number

Returns

boolean

Inherited from

IText.moveCursorWithoutShift

---

moveCursorWithShift()

moveCursorWithShift(offset): boolean

Defined in: src/shapes/IText/ITextKeyBehavior.ts:510

Moves cursor with shift

Parameters

offset

number

Returns

boolean

Inherited from

IText.moveCursorWithShift

---

needsItsOwnCache()

needsItsOwnCache(): boolean

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

When returns true, force the object to have its own cache, even if it is inside a group it may be needed when your object behave in a particular way on the cache and always needs its own isolated canvas to render correctly. Created to be overridden since 1.7.12

Returns

boolean

Boolean

Inherited from

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

K extends string | number | symbol

Parameters

eventName

K

event name (eg. ‘after:render’)

Returns

void

Inherited from

IText.off

Call Signature

off<K>(eventName, handler): void

Defined in: src/Observable.ts:128

unsubscribe an event listener

Type Parameters

K

K extends string | number | symbol

Parameters

eventName

K

event name (eg. ‘after:render’)

handler

TEventCallback

event listener to unsubscribe

Returns

void

Inherited from

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

IText.off

Call Signature

off(): void

Defined in: src/Observable.ts:137

unsubscribe all event listeners

Returns

void

Inherited from

IText.off

---

on()

Call Signature

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

Defined in: src/Observable.ts:23

Observes specified event

Type Parameters

K

K extends string | number | symbol

E

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

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

IText.on

---

once()

Call Signature

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

Defined in: src/Observable.ts:62

Observes specified event once

Type Parameters

K

K extends string | number | symbol

E

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

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

IText.once

---

onCompositionEnd()

onCompositionEnd(): void

Defined in: src/shapes/IText/ITextKeyBehavior.ts:287

Composition end

Returns

void

Inherited from

IText.onCompositionEnd

---

onCompositionStart()

onCompositionStart(): void

Defined in: src/shapes/IText/ITextKeyBehavior.ts:280

Composition start

Returns

void

Inherited from

IText.onCompositionStart

---

onCompositionUpdate()

onCompositionUpdate(__namedParameters): void

Defined in: src/shapes/IText/ITextKeyBehavior.ts:291

Parameters

__namedParameters

CompositionEvent

Returns

void

Inherited from

IText.onCompositionUpdate

---

onDeselect()

onDeselect(options?): boolean

Defined in: src/shapes/IText/ITextBehavior.ts:110

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?

e?

TPointerEvent

event if the process is generated by an event

object?

FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>

next object we are setting as active, and reason why this is being deselected

Returns

boolean

Inherited from

IText.onDeselect

---

onDragStart()

onDragStart(e): boolean

Defined in: src/shapes/IText/ITextClickBehavior.ts:57

override this method to control whether instance should/shouldn’t become a drag source,

Parameters

e

DragEvent

Returns

boolean

should handle event

See

also DraggableTextDelegate#isActive To prevent drag and drop between objects both shouldStartDragging and onDragStart should return false

Inherited from

IText.onDragStart

---

onInput()

onInput(this, e): void

Defined in: src/shapes/IText/ITextKeyBehavior.ts:174

Handles onInput event

Parameters

this

Textbox<Props, SProps, EventSpec> & object

e

Event

Event object

Returns

void

Inherited from

IText.onInput

---

onKeyDown()

onKeyDown(e): void

Defined in: src/shapes/IText/ITextKeyBehavior.ts:115

Handles keydown event only used for arrows and combination of modifier keys.

Parameters

e

KeyboardEvent

Event object

Returns

void

Inherited from

IText.onKeyDown

---

onKeyUp()

onKeyUp(e): void

Defined in: src/shapes/IText/ITextKeyBehavior.ts:151

Handles keyup event We handle KeyUp because ie11 and edge have difficulties copy/pasting if a copy/cut event fired, keyup is dismissed

Parameters

e

KeyboardEvent

Event object

Returns

void

Inherited from

IText.onKeyUp

---

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

IText.onSelect

---

paste()

paste(): void

Defined in: src/shapes/IText/ITextKeyBehavior.ts:323

Pastes text

Returns

void

Inherited from

IText.paste

---

removeChars()

removeChars(start, end): void

Defined in: src/shapes/IText/ITextBehavior.ts:1034

Removes characters from start/end start/end ar per grapheme position in _text array.

Parameters

start

number

end

number = ...

default to start + 1

Returns

void

Inherited from

IText.removeChars

---

removeStyle()

removeStyle(property): void

Defined in: src/shapes/Text/StyledText.ts:162

Remove a style property or properties from all individual character styles in a text object. Deletes the character style object if it contains no other style props. Deletes a line style object if it contains no other character styles.

Parameters

property

StylePropertiesType

Returns

void

Inherited from

IText.removeStyle

---

removeStyleFromTo()

removeStyleFromTo(start, end): void

Defined in: src/shapes/IText/ITextBehavior.ts:752

remove and reflow a style block from start to end.

Parameters

start

number

linear start position for removal (included in removal)

end

number

linear end position for removal ( excluded from removal )

Returns

void

Inherited from

IText.removeStyleFromTo

---

renderCache()

renderCache(this, options?): void

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

Parameters

this

TCachedFabricObject

options?

any

Returns

void

Inherited from

IText.renderCache

---

renderCursor()

renderCursor(ctx, boundaries): void

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

Renders cursor

Parameters

ctx

CanvasRenderingContext2D

transformed context to draw on

boundaries

CursorBoundaries

Returns

void

Inherited from

IText.renderCursor

---

renderCursorAt()

renderCursorAt(selectionStart): void

Defined in: src/shapes/IText/IText.ts:558

Renders cursor on context Top, outside the animation cycle, on request Used for the drag/drop effect. If contextTop is not available, do nothing.

Parameters

selectionStart

number

Returns

void

Inherited from

IText.renderCursorAt

---

renderCursorOrSelection()

renderCursorOrSelection(): void

Defined in: src/shapes/IText/IText.ts:386

Renders cursor or selection (depending on what exists) it does on the contextTop. If contextTop is not available, do nothing.

Returns

void

Inherited from

IText.renderCursorOrSelection

---

renderDragSourceEffect()

renderDragSourceEffect(): void

Defined in: src/shapes/IText/IText.ts:647

Renders drag start text selection

Returns

void

Inherited from

IText.renderDragSourceEffect

---

renderDropTargetEffect()

renderDropTargetEffect(e): void

Defined in: src/shapes/IText/IText.ts:657

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

IText.renderDropTargetEffect

---

renderSelection()

renderSelection(ctx, boundaries): void

Defined in: src/shapes/IText/IText.ts:632

Renders text selection

Parameters

ctx

CanvasRenderingContext2D

transformed context to draw on

boundaries

CursorBoundaries

Object with left/top/leftOffset/topOffset

Returns

void

Inherited from

IText.renderSelection

---

restartCursorIfNeeded()

restartCursorIfNeeded(): void

Defined in: src/shapes/IText/ITextBehavior.ts:205

Restart tue cursor animation if either is in complete state ( between animations ) or if it never started before

Returns

void

Inherited from

IText.restartCursorIfNeeded

---

rotate()

rotate(angle): void

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

Sets “angle” of an instance with centered rotation

Parameters

angle

TDegree

Angle value (in degrees)

Returns

void

Inherited from

IText.rotate

---

scale()

scale(value): void

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

Scales an object (equally by x and y)

Parameters

value

number

Scale factor

Returns

void

Inherited from

IText.scale

---

scaleToHeight()

scaleToHeight(value): void

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

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

Parameters

value

number

New height value

Returns

void

Inherited from

IText.scaleToHeight

---

scaleToWidth()

scaleToWidth(value): void

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

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

Parameters

value

number

New width value

Returns

void

Inherited from

IText.scaleToWidth

---

searchWordBoundary()

searchWordBoundary(selectionStart, direction): number

Defined in: src/shapes/IText/ITextBehavior.ts:330

Finds index corresponding to beginning or end of a word

Parameters

selectionStart

number

Index of a character

direction

1 or -1

-1 | 1

Returns

number

Index of the beginning or end of a word

Inherited from

IText.searchWordBoundary

---

selectAll()

selectAll(): Textbox<Props, SProps, EventSpec>

Defined in: src/shapes/IText/ITextBehavior.ts:218

Selects entire text

Returns

Textbox<Props, SProps, EventSpec>

Inherited from

IText.selectAll

---

selectLine()

selectLine(selectionStart?): void

Defined in: src/shapes/IText/ITextBehavior.ts:377

Selects the line that contains selectionStart

Parameters

selectionStart?

number

Index of a character

Returns

void

Inherited from

IText.selectLine

---

selectWord()

selectWord(selectionStart?): void

Defined in: src/shapes/IText/ITextBehavior.ts:355

Selects the word that contains the char at index selectionStart

Parameters

selectionStart?

number

Index of a character

Returns

void

Inherited from

IText.selectWord

---

set()

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

Defined in: src/shapes/Text/Text.ts:1763

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

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

Textbox<Props, SProps, EventSpec>

Inherited from

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

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

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

IText.setCoords

---

setCursorByClick()

setCursorByClick(e): void

Defined in: src/shapes/IText/ITextClickBehavior.ts:172

Changes cursor location in a text depending on passed pointer (x/y) object

Parameters

e

TPointerEvent

Event object

Returns

void

Inherited from

IText.setCursorByClick

---

setOnGroup()

setOnGroup(): void

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

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

Returns

void

Inherited from

IText.setOnGroup

---

setPathInfo()

setPathInfo(): void

Defined in: src/shapes/Text/Text.ts:445

If text has a path, it will add the extra information needed for path and text calculations

Returns

void

Inherited from

IText.setPathInfo

---

setPositionByOrigin()

setPositionByOrigin(pos, originX, originY): void

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

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

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

IText.setPositionByOrigin

---

setRelativeX()

setRelativeX(value): void

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

Parameters

value

number

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

Returns

void

Inherited from

IText.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 FabricObject#originX FabricObject#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

IText.setRelativeXY

---

setRelativeY()

setRelativeY(value): void

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

Parameters

value

number

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

Returns

void

Inherited from

IText.setRelativeY

---

setSelectionEnd()

setSelectionEnd(index): void

Defined in: src/shapes/IText/IText.ts:274

Sets selection end (right boundary of a selection)

Parameters

index

number

Index to set selection end to

Returns

void

Inherited from

IText.setSelectionEnd

---

setSelectionStart()

setSelectionStart(index): void

Defined in: src/shapes/IText/IText.ts:265

Sets selection start (left boundary of a selection)

Parameters

index

number

Index to set selection start to

Returns

void

Inherited from

IText.setSelectionStart

---

setSelectionStartEndWithShift()

setSelectionStartEndWithShift(start, end, newSelection): void

Defined in: src/shapes/IText/ITextBehavior.ts:1083

Set the selectionStart and selectionEnd according to the new position of cursor mimic the key - mouse navigation when shift is pressed.

Parameters

start

number

end

number

newSelection

number

Returns

void

Inherited from

IText.setSelectionStartEndWithShift

---

setSelectionStyles()

setSelectionStyles(styles?, startIndex?, endIndex?): void

Defined in: src/shapes/IText/IText.ts:338

Sets style of a current selection, if no selection exist, do not set anything.

Parameters

styles?

object

Styles object

startIndex?

number = ...

Start index to get styles at

endIndex?

number = ...

End index to get styles at, if not specified selectionEnd or startIndex + 1

Returns

void

Inherited from

IText.setSelectionStyles

---

setSubscript()

setSubscript(start, end): void

Defined in: src/shapes/Text/Text.ts:1420

Turns the character into an ‘inferior figure’ (i.e. ‘subscript’)

Parameters

start

number

selection start

end

number

selection end

Returns

void

Inherited from

IText.setSubscript

---

setSuperscript()

setSuperscript(start, end): void

Defined in: src/shapes/Text/Text.ts:1411

Turns the character into a ‘superior figure’ (i.e. ‘superscript’)

Parameters

start

number

selection start

end

number

selection end

Returns

void

Inherited from

IText.setSuperscript

---

setX()

setX(value): void

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

Parameters

value

number

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

Returns

void

Inherited from

IText.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 FabricObject#originX and FabricObject#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

IText.setXY

---

setY()

setY(value): void

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

Parameters

value

number

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

Returns

void

Inherited from

IText.setY

---

shiftLineStyles()

shiftLineStyles(lineIndex, offset): void

Defined in: src/shapes/IText/ITextBehavior.ts:814

Shifts line styles up or down

Parameters

lineIndex

number

Index of a line

offset

number

Can any number?

Returns

void

Inherited from

IText.shiftLineStyles

---

shouldCache()

shouldCache(): boolean

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

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

IText.shouldCache

---

shouldStartDragging()

shouldStartDragging(): boolean

Defined in: src/shapes/IText/ITextClickBehavior.ts:47

If this method returns true a mouse move operation over a text selection will not prevent the native mouse event allowing the browser to start a drag operation. shouldStartDragging can be read ‘do not prevent default for mouse move event’ To prevent drag and drop between objects both shouldStartDragging and onDragStart should return false

Returns

boolean

Inherited from

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

IText.strokeBorders

---

styleHas()

styleHas(property, lineIndex): boolean

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

Returns true if object has a style property or has it on a specified line

Parameters

property

StylePropertiesType

lineIndex

number

Returns

boolean

Overrides

IText.styleHas

---

toBlob()

toBlob(options): Promise<null | Blob>

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

Parameters

options

toDataURLOptions = {}

Returns

Promise<null | Blob>

Inherited from

IText.toBlob

---

toCanvasElement()

toCanvasElement(options?): HTMLCanvasElement

Defined in: src/shapes/IText/IText.ts:374

block cursor/selection logic while rendering the exported canvas

Parameters

options?

ObjectToCanvasElementOptions

Returns

HTMLCanvasElement

Todo

this workaround should be replaced with a more robust solution

Inherited from

IText.toCanvasElement

---

toClipPathSVG()

toClipPathSVG(this, reviver?): string

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

Returns svg clipPath representation of an instance

Parameters

this

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

reviver?

TSVGReviver

Method for further parsing of svg representation.

Returns

string

svg representation of an instance

Inherited from

IText.toClipPathSVG

---

toDatalessObject()

toDatalessObject(propertiesToInclude?): any

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

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

IText.toDatalessObject

---

toDataURL()

toDataURL(options): string

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

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

IText.toDataURL

---

toggle()

toggle(property): Textbox<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

Textbox<Props, SProps, EventSpec>

Inherited from

IText.toggle

---

toJSON()

toJSON(): any

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

Returns a JSON representation of an instance

Returns

any

JSON

Inherited from

IText.toJSON

---

toObject()

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

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

Returns object representation of an instance

Type Parameters

T

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

K

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

Method

toObject

Overrides

IText.toObject

---

toString()

toString(): string

Defined in: src/shapes/Text/Text.ts:581

Returns string representation of an instance

Returns

string

String representation of text object

Inherited from

IText.toString

---

toSVG()

toSVG(this, reviver?): string

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

Returns svg representation of an instance

Parameters

this

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

reviver?

TSVGReviver

Method for further parsing of svg representation.

Returns

string

svg representation of an instance

Inherited from

IText.toSVG

---

transform()

transform(ctx): void

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

Transforms context when rendering an object

Parameters

ctx

CanvasRenderingContext2D

Context

Returns

void

Inherited from

IText.transform

---

transformMatrixKey()

transformMatrixKey(skipGroup): number[]

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

Parameters

skipGroup

boolean = false

Returns

number[]

Inherited from

IText.transformMatrixKey

---

translateToCenterPoint()

translateToCenterPoint(point, originX, originY): Point

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

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

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

IText.translateToCenterPoint

---

translateToGivenOrigin()

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

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

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

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

IText.translateToGivenOrigin

---

translateToOriginPoint()

translateToOriginPoint(center, originX, originY): Point

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

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

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

IText.translateToOriginPoint

---

tripleClickHandler()

tripleClickHandler(options): void

Defined in: src/shapes/IText/ITextClickBehavior.ts:82

Default handler for triple click, select a line

Parameters

options

TPointerEventInfo

Returns

void

Inherited from

IText.tripleClickHandler

---

updateSelectionOnMouseMove()

updateSelectionOnMouseMove(e): void

Defined in: src/shapes/IText/ITextBehavior.ts:432

called by Canvas#textEditingManager

Parameters

e

TPointerEvent

Returns

void

Inherited from

IText.updateSelectionOnMouseMove

---

willDrawShadow()

willDrawShadow(): boolean

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

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

IText.willDrawShadow

---

wordSplit()

wordSplit(value): string[]

Defined in: src/shapes/Textbox.ts:413

Override this method to customize word splitting Use with Textbox#_measureWord

Parameters

value

string

Returns

string[]

array of words

---

_fromObject()

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

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

Type Parameters

S

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

Parameters

__namedParameters

Record<string, unknown>

__namedParameters

Abortable & object = {}

Returns

Promise<S>

Inherited from

IText._fromObject

---

createControls()

static createControls(): object

Defined in: src/shapes/Textbox.ts:119

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

Returns

object

controls

controls: Record<string, Control>

Overrides

IText.createControls

---

fromElement()

static fromElement(element, options?, cssRules?): Promise<FabricText<{ fontSize: number; left: number; linethrough: boolean; overline: boolean; signal?: AbortSignal; strokeWidth: number; top: number; underline: boolean; }, SerializedTextProps, ObjectEvents>>

Defined in: src/shapes/Text/Text.ts:1847

Returns FabricText instance from an SVG element (not yet implemented)

Parameters

element

HTMLElement

Element to parse

options?

Abortable

Options object

cssRules?

CSSRules

Returns

Promise<FabricText<{ fontSize: number; left: number; linethrough: boolean; overline: boolean; signal?: AbortSignal; strokeWidth: number; top: number; underline: boolean; }, SerializedTextProps, ObjectEvents>>

Static

Member Of

Text

Inherited from

IText.fromElement

---

fromObject()

static fromObject<T, S>(object): Promise<S>

Defined in: src/shapes/Text/Text.ts:1924

Returns FabricText instance from an object representation

Type Parameters

T

T extends TOptions<SerializedTextProps>

S

S extends FabricText<Partial<TextProps>, SerializedTextProps, ObjectEvents>

Parameters

object

T

plain js Object to create an instance from

Returns

Promise<S>

Inherited from

IText.fromObject

---

getDefaults()

static getDefaults(): Record<string, any>

Defined in: src/shapes/Textbox.ts:98

Returns

Record<string, any>

Overrides

IText.getDefaults