Class: IText

fabric.IText

new IText() → {fabric.IText}

IText class (introduced in v1.4) Events are also fired with "text:" prefix when observing canvas.
Mixes In:
Source:
See:
  • fabric.IText#initialize for constructor definition

    Supported key combinations:

      Move cursor:                    left, right, up, down
  Select character:               shift + left, shift + right
  Select text vertically:         shift + up, shift + down
  Move cursor by word:            alt + left, alt + right
  Select words:                   shift + alt + left, shift + alt + right
  Move cursor to line start/end:  cmd + left, cmd + right or home, end
  Select till start/end of line:  cmd + shift + left, cmd + shift + right or shift + home, shift + end
  Jump to start/end of text:      cmd + up, cmd + down
  Select till start/end of text:  cmd + shift + up, cmd + shift + down or shift + pgUp, shift + pgDown
  Delete character:               backspace
  Delete word:                    alt + backspace
  Delete line:                    cmd + backspace
  Forward delete:                 delete
  Copy text:                      ctrl/cmd + c
  Paste text:                     ctrl/cmd + v
  Cut text:                       ctrl/cmd + x
  Select entire text:             ctrl/cmd + a
  Quit editing                    tab or esc

    Supported mouse/touch combination

      Position cursor:                click/touch
  Create selection:               click/touch & drag
  Create selection:               click & shift + click
  Select word:                    double click
  Select line:                    triple click
Fires:
  • event:changed
  • selection:changed
  • editing:entered
  • editing:exited
Returns:
thisArg
Type
fabric.IText

Extends

Members

__charBounds

contains characters bounding boxes
Inherited From:
Source:

__corner :number|string|any

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.
Type:
  • number | string | any
Inherited From:
Default Value:
  • 0
Source:

_fontSizeMult :Number

Text Line proportion to font Size (in pixels)
Type:
  • Number
Inherited From:
Default Value:
  • 1.13
Source:

_measuringContext :CanvasRenderingContext2D

Reference to a context to measure text char or couple of chars the cacheContext of the canvas will be used or a freshly created one if the object is not on canvas once created it will be referenced on fabric._measuringContext to avoid creating a canvas for every text object created.
Type:
  • CanvasRenderingContext2D
Inherited From:
Source:

_styleProperties :Array

Array of properties that define a style unit (of 'styles').
Type:
  • Array
Inherited From:
Default Value:
  • ["stroke","strokeWidth","fill","fontFamily","fontSize","fontWeight","fontStyle","underline","overline","linethrough","deltaY","textBackgroundColor"]
Source:

absolutePositioned :boolean

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

aCoords

Describe object's corner position in canvas object absolute coordinates properties are tl,tr,bl,br and describe the four main corner. each property is an object with x, y, instance of Fabric.Point. The coordinates depends from this properties: width, height, scaleX, scaleY skewX, skewY, angle, strokeWidth, top, left. Those coordinates are useful to understand where an object is. They get updated with oCoords but they do not need to be updated when zoom or panning change. The coordinates get updated with @method setCoords. You can calculate them without updating with @method calcACoords();
Inherited From:
Source:

angle :Number

Angle of rotation of an object (in degrees)
Type:
  • Number
Inherited From:
Source:

backgroundColor :String

Background color of an object. takes css colors https://www.w3.org/TR/css-color-3/
Type:
  • String
Inherited From:
Source:

borderColor :String

Color of controlling borders of an object (when it's active)
Type:
  • String
Inherited From:
Default Value:
  • rgb(178,204,255)
Source:

borderDashArray :Array

Array specifying dash pattern of an object's borders (hasBorder must be true)
Type:
  • Array
Since:
  • 1.6.2
Inherited From:
Source:

borderOpacityWhenMoving :Number

Opacity of object's controlling borders when object is active and moving
Type:
  • Number
Inherited From:
Default Value:
  • 0.4
Source:

borderScaleFactor :Number

Scale factor of object's controlling borders bigger number will make a thicker border border is 1, so this is basically a border thickness since there is no way to change the border itself.
Type:
  • Number
Inherited From:
Default Value:
  • 1
Source:

cacheProperties :Array

List of properties to consider when checking if cache needs refresh
Type:
  • Array
Inherited From:
Source:

caching :Boolean

Indicates whether internal text char widths can be cached
Type:
  • Boolean
Default Value:
  • true
Source:

centeredRotation :Boolean

When true, this object will use center point as the origin of transformation when being rotated via the controls. Backwards incompatibility note: This property replaces "centerTransform" (Boolean).
Type:
  • Boolean
Since:
  • 1.3.4
Inherited From:
Default Value:
  • true
Source:

centeredScaling :Boolean

When true, this object will use center point as the origin of transformation when being scaled via the controls. Backwards incompatibility note: This property replaces "centerTransform" (Boolean).
Type:
  • Boolean
Since:
  • 1.3.4
Inherited From:
Source:

charSpacing :Number

additional space between characters expressed in thousands of em unit
Type:
  • Number
Inherited From:
Source:

clipPath :fabric.Object

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

colorProperties :Array

List of properties to consider for animating colors.
Type:
  • Array
Inherited From:
Source:

controls

custom controls interface controls are added by default_controls.js
Inherited From:
Source:

cornerColor :String

Color of controlling corners of an object (when it's active)
Type:
  • String
Inherited From:
Default Value:
  • rgb(178,204,255)
Source:

cornerDashArray :Array

Array specifying dash pattern of an object's control (hasBorder must be true)
Type:
  • Array
Since:
  • 1.6.2
Inherited From:
Source:

cornerSize :Number

Size of object's controlling corners (in pixels)
Type:
  • Number
Inherited From:
Default Value:
  • 13
Source:

cornerStrokeColor :String

Color of controlling corners of an object (when it's active and transparentCorners false)
Type:
  • String
Since:
  • 1.6.2
Inherited From:
Source:

cornerStyle :String

Specify style of control, 'rect' or 'circle'
Type:
  • String
Since:
  • 1.6.2
Inherited From:
Source:

ctrlKeysMapDown

For functionalities on keyDown + ctrl || cmd
Source:

ctrlKeysMapUp

For functionalities on keyUp + ctrl || cmd
Source:

cursorColor :String

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.
Type:
  • String
Source:

cursorDelay :Number

Delay between cursor blink (in ms)
Type:
  • Number
Default Value:
  • 1000
Source:

cursorDuration :Number

Duration of cursor fadein (in ms)
Type:
  • Number
Default Value:
  • 600
Source:

cursorWidth :Number

Width of cursor (in px)
Type:
  • Number
Default Value:
  • 2
Source:

deltaY :Number

Baseline shift, styles only, keep at 0 for the main text object
Type:
  • Number
Inherited From:
Source:

direction :String

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
Type:
  • String
Since:
  • 4.5.0
Inherited From:
Default Value:
  • ltr
Source:

dirty :Boolean

When set to `true`, object's cache will be rerendered next render call. since 1.7.0
Type:
  • Boolean
Inherited From:
Default Value:
  • true
Source:

editable :Boolean

Indicates whether a text can be edited
Type:
  • Boolean
Default Value:
  • true
Source:

editingBorderColor :String

Border color of text object while it's in editing mode
Type:
  • String
Default Value:
  • rgba(102,153,255,0.25)
Source:

evented :Boolean

When set to `false`, an object can not be a target of events. All events propagate through it. Introduced in v1.3.4
Type:
  • Boolean
Inherited From:
Default Value:
  • true
Source:

excludeFromExport :Boolean

When `true`, object is not exported in OBJECT/JSON
Type:
  • Boolean
Since:
  • 1.6.3
Inherited From:
Source:

fill :String

Color of object's fill takes css colors https://www.w3.org/TR/css-color-3/
Type:
  • String
Inherited From:
Default Value:
  • rgb(0,0,0)
Source:

fillRule :String

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 `fabric.Object#globalCompositeOperation` instead)
Type:
  • String
Inherited From:
Default Value:
  • nonzero
Source:

flipX :Boolean

When true, an object is rendered as flipped horizontally
Type:
  • Boolean
Inherited From:
Source:

flipY :Boolean

When true, an object is rendered as flipped vertically
Type:
  • Boolean
Inherited From:
Source:

fontFamily :String

Font family
Type:
  • String
Inherited From:
Default Value:
  • Times New Roman
Source:

fontSize :Number

Font size (in pixels)
Type:
  • Number
Inherited From:
Default Value:
  • 40
Source:

fontStyle :String

Font style . Possible values: "", "normal", "italic" or "oblique".
Type:
  • String
Inherited From:
Default Value:
  • normal
Source:

fontWeight :Number|String

Font weight (e.g. bold, normal, 400, 600, 800)
Type:
  • Number | String
Inherited From:
Default Value:
  • normal
Source:

globalCompositeOperation :String

Composite rule used for canvas globalCompositeOperation
Type:
  • String
Inherited From:
Default Value:
  • source-over
Source:

hasBorders :Boolean

When set to `false`, object's controlling borders are not rendered
Type:
  • Boolean
Inherited From:
Default Value:
  • true
Source:

hasControls :Boolean

When set to `false`, object's controls are not displayed and can not be used to manipulate object
Type:
  • Boolean
Inherited From:
Default Value:
  • true
Source:

height :Number

Object height
Type:
  • Number
Inherited From:
Source:

hiddenTextareaContainer :HTMLElement

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.
Type:
  • HTMLElement
Source:

hoverCursor :String

Default cursor value used when hovering over this object on canvas
Type:
  • String
Inherited From:
Source:

includeDefaultValues :Boolean

When `false`, default object's values are not included in its serialization
Type:
  • Boolean
Inherited From:
Default Value:
  • true
Source:

inCompositionMode

Helps determining when the text is in composition, so that the cursor rendering is altered.
Source:

inverted :boolean

Meaningful ONLY when the object is used as clipPath. if true, the clipPath will make the object clip to the outside of the clipPath since 2.4.0
Type:
  • boolean
Inherited From:
Default Value:
  • false
Source:

isEditing :Boolean

Indicates whether text is in editing mode
Type:
  • Boolean
Source:

keysMap

For functionalities on keyDown Map a special key to a function of the instance/prototype If you need different behaviour for ESC or TAB or arrows, you have to change this map setting the name of a function that you build on the fabric.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 = fabric.util.object.clone(this.keysMap); The function must be in fabric.Itext.prototype.myFunction And will receive event as args[0]
Source:

left :Number

Left position of an object. Note that by default it's relative to object left. You can change this by setting originX={left/center/right}
Type:
  • Number
Inherited From:
Source:

lineCoords

Describe object's corner position in canvas element coordinates. includes padding. Used of object detection. set and refreshed with setCoords.
Inherited From:
Source:

lineHeight :Number

Line height
Type:
  • Number
Inherited From:
Default Value:
  • 1.16
Source:

linethrough :Boolean

Text decoration linethrough.
Type:
  • Boolean
Inherited From:
Source:

lockMovementX :Boolean

When `true`, object horizontal movement is locked
Type:
  • Boolean
Inherited From:
Source:

lockMovementY :Boolean

When `true`, object vertical movement is locked
Type:
  • Boolean
Inherited From:
Source:

lockRotation :Boolean

When `true`, object rotation is locked
Type:
  • Boolean
Inherited From:
Source:

lockScalingFlip :Boolean

When `true`, object cannot be flipped by scaling into negative values
Type:
  • Boolean
Inherited From:
Source:

lockScalingX :Boolean

When `true`, object horizontal scaling is locked
Type:
  • Boolean
Inherited From:
Source:

lockScalingY :Boolean

When `true`, object vertical scaling is locked
Type:
  • Boolean
Inherited From:
Source:

lockSkewingX :Boolean

When `true`, object horizontal skewing is locked
Type:
  • Boolean
Inherited From:
Source:

lockSkewingY :Boolean

When `true`, object vertical skewing is locked
Type:
  • Boolean
Inherited From:
Source:

matrixCache

storage for object full transform matrix
Inherited From:
Source:

MIN_TEXT_WIDTH :Number

contains the min text width to avoid getting 0
Type:
  • Number
Inherited From:
Default Value:
  • 2
Source:

minScaleLimit :Number

Minimum allowed scale value of an object
Type:
  • Number
Inherited From:
Source:

moveCursor :String

Default cursor value used when moving this object on canvas
Type:
  • String
Inherited From:
Source:

noScaleCache :Boolean

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
Type:
  • Boolean
Inherited From:
Default Value:
  • true
Source:

objectCaching :Boolean

When `true`, object is cached on an additional canvas. When `false`, object is not cached unless necessary ( clipPath ) default to true
Type:
  • Boolean
Since:
  • 1.7.0
Inherited From:
Default Value:
  • true
Source:

oCoords

Describe object's corner position in canvas element coordinates. properties are depending on control keys and padding the main controls. each property is an object with x, y and corner. The `corner` property contains in a similar manner the 4 points of the interactive area of the corner. The coordinates depends from the controls positionHandler and are used to draw and locate controls
Inherited From:
Source:

opacity :Number

Opacity of an object
Type:
  • Number
Inherited From:
Default Value:
  • 1
Source:

originX :String

Horizontal origin of transformation of an object (one of "left", "right", "center") See http://jsfiddle.net/1ow02gea/244/ on how originX/originY affect objects in groups
Type:
  • String
Inherited From:
Default Value:
  • left
Source:

originY :String

Vertical origin of transformation of an object (one of "top", "bottom", "center") See http://jsfiddle.net/1ow02gea/244/ on how originX/originY affect objects in groups
Type:
  • String
Inherited From:
Default Value:
  • top
Source:

overline :Boolean

Text decoration overline.
Type:
  • Boolean
Inherited From:
Source:

ownMatrixCache

storage for object transform matrix
Inherited From:
Source:

padding :Number

Padding between object and its controlling borders (in pixels)
Type:
  • Number
Inherited From:
Source:

paintFirst :String

Determines if the fill or the stroke is drawn first (one of "fill" or "stroke")
Type:
  • String
Inherited From:
Default Value:
  • fill
Source:

path :fabric.Path

fabric.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.
Type:
Inherited From:
Source:
Example
var textPath = new fabric.Text('Text on a path', {
    top: 150,
    left: 150,
    textAlign: 'center',
    charSpacing: -50,
    path: new fabric.Path('M 0 0 C 50 -100 150 -100 200 0', {
        strokeWidth: 1,
        visible: false
    }),
    pathSide: 'left',
    pathStartOffset: 0
});

pathAlign :String

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
Type:
  • String
Inherited From:
Default Value:
  • baseline
Source:

pathSide :String

Which side of the path the text should be drawn on. Only used when text has a path
Type:
  • String
Inherited From:
Default Value:
  • left
Source:

pathStartOffset :Number

Offset amount for text path starting position Only used when text has a path
Type:
  • Number
Inherited From:
Source:

perPixelTargetFind :Boolean

When set to `true`, objects are "found" on canvas on per-pixel basis rather than according to bounding box
Type:
  • Boolean
Inherited From:
Source:

scaleX :Number

Object scale factor (horizontal)
Type:
  • Number
Inherited From:
Default Value:
  • 1
Source:

scaleY :Number

Object scale factor (vertical)
Type:
  • Number
Inherited From:
Default Value:
  • 1
Source:

selectable :Boolean

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.
Type:
  • Boolean
Inherited From:
Default Value:
  • true
Source:

selectionBackgroundColor :String

Selection Background color of an object. colored layer behind the object when it is active. does not mix good with globalCompositeOperation methods.
Type:
  • String
Inherited From:
Source:

selectionColor :String

Color of text selection
Type:
  • String
Default Value:
  • rgba(17,119,255,0.3)
Source:

selectionEnd :Number

Index where text selection ends
Type:
  • Number
Source:

selectionStart :Number

Index where text selection starts (or where cursor is when there is no selection)
Type:
  • Number
Source:

shadow :fabric.Shadow

Shadow object representing shadow of this shape. Backwards incompatibility note: This property was named "textShadow" (String) until v1.2.11
Type:
Inherited From:
Source:

skewX :Number

Angle of skew on x axes of an object (in degrees)
Type:
  • Number
Inherited From:
Source:

skewY :Number

Angle of skew on y axes of an object (in degrees)
Type:
  • Number
Inherited From:
Source:

statefullCache :Boolean

When `true`, object properties are checked for cache invalidation. In some particular situation you may want this to be disabled ( spray brush, very big, groups) or if your application does not allow you to modify properties for groups child you want to disable it for groups. default to false since 1.7.0
Type:
  • Boolean
Inherited From:
Default Value:
  • false
Source:

stateProperties :Array

List of properties to consider when checking if state of an object is changed (fabric.Object#hasStateChanged) as well as for history (undo/redo) purposes
Type:
  • Array
Inherited From:
Source:

stroke :String

When defined, an object is rendered via stroke and this property specifies its color. Backwards incompatibility note: This property was named "strokeStyle" until v1.1.6
Type:
  • String
Inherited From:
Source:

strokeDashArray :Array

Array specifying dash pattern of an object's stroke (stroke must be defined)
Type:
  • Array
Inherited From:
Source:

strokeDashOffset :Number

Line offset of an object's stroke
Type:
  • Number
Inherited From:
Source:

strokeLineCap :String

Line endings style of an object's stroke (one of "butt", "round", "square")
Type:
  • String
Inherited From:
Default Value:
  • butt
Source:

strokeLineJoin :String

Corner style of an object's stroke (one of "bevel", "round", "miter")
Type:
  • String
Inherited From:
Default Value:
  • miter
Source:

strokeMiterLimit :Number

Maximum miter length (used for strokeLineJoin = "miter") of an object's stroke
Type:
  • Number
Inherited From:
Default Value:
  • 4
Source:

strokeUniform :Boolean

When `false`, the stoke width will scale with the object. When `true`, the stroke will always match the exact pixel size entered for stroke width. this Property does not work on Text classes or drawing call that uses strokeText,fillText methods default to false
Type:
  • Boolean
Since:
  • 2.6.0
Inherited From:
Default Value:
  • false
Source:

strokeWidth :Number

Width of a stroke used to render this object
Type:
  • Number
Inherited From:
Default Value:
  • 1
Source:

styles :Object

Object containing character styles - top-level properties -> line numbers, 2nd-level properties - character numbers
Type:
  • Object
Inherited From:
Source:

subscript :Object

Subscript schema object (minimum overlap)
Type:
  • Object
Inherited From:
Default Value:
  • {"size":0.6,"baseline":0.11}
Source:

superscript :Object

Superscript schema object (minimum overlap)
Type:
  • Object
Inherited From:
Default Value:
  • {"size":0.6,"baseline":""}
Source:

textAlign :String

Text alignment. Possible values: "left", "center", "right", "justify", "justify-left", "justify-center" or "justify-right".
Type:
  • String
Inherited From:
Default Value:
  • left
Source:

textBackgroundColor :String

Background color of text lines
Type:
  • String
Inherited From:
Source:

top :Number

Top position of an object. Note that by default it's relative to object top. You can change this by setting originY={top/center/bottom}
Type:
  • Number
Inherited From:
Source:

touchCornerSize :Number

Size of object's controlling corners when touch interaction is detected
Type:
  • Number
Inherited From:
Default Value:
  • 24
Source:

transparentCorners :Boolean

When true, object's controlling corners are rendered as transparent inside (i.e. stroke instead of fill)
Type:
  • Boolean
Inherited From:
Default Value:
  • true
Source:

type :String

Type of an object
Type:
  • String
Overrides:
Default Value:
  • i-text
Source:

underline :Boolean

Text decoration underline.
Type:
  • Boolean
Inherited From:
Source:

visible :Boolean

When set to `false`, an object is not rendered on canvas
Type:
  • Boolean
Inherited From:
Default Value:
  • true
Source:

width :Number

Object width
Type:
  • Number
Inherited From:
Source:

Methods

(static) fromObject(object, callbackopt)

Returns fabric.IText instance from an object representation
Parameters:
Name Type Attributes Description
object Object Object to create an instance from
callback function <optional>
 invoked with new instance as argument
Source:

_calcRotateMatrix() → {Array}

calculate rotation matrix of an object
Inherited From:
Source:
Returns:
rotation matrix for the object
Type
Array

_calcTranslateMatrix() → {Array}

calculate the translation matrix for an object transform
Inherited From:
Source:
Returns:
rotation matrix for the object
Type
Array

_drawClipPath(ctx, clipPath)

Prepare clipPath state and cache and draw it on instance's cache
Parameters:
Name Type Description
ctx CanvasRenderingContext2D
clipPath fabric.Object
Inherited From:
Source:

_getCoords(absolute) → {Object}

return correct set of coordinates for intersection this will return either aCoords or lineCoords.
Parameters:
Name Type Description
absolute Boolean will return aCoords if true or lineCoords
Inherited From:
Source:
Returns:
{tl, tr, br, bl} points
Type
Object

_getFontDeclaration(styleObjectopt) → {String}

return font declaration string for canvas context
Parameters:
Name Type Attributes Description
styleObject Object <optional>
 object
Inherited From:
Source:
Returns:
font declaration formatted for canvas context.
Type
String

_getSelectionForOffset(e, isRight) → {Number}

private Helps finding if the offset should be counted from Start or End
Parameters:
Name Type Description
e Event Event object
isRight Boolean
Source:
Returns:
Type
Number

_getStyleDeclaration(lineIndex, charIndex) → {Object}

get the reference, not a clone, of the style object for a given character
Parameters:
Name Type Description
lineIndex Number
charIndex Number
Inherited From:
Source:
Returns:
style object
Type
Object

_limitCacheSize(dims) → {Object|Object|Object|Object}

Limit the cache dimensions so that X * Y do not cross fabric.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:
Name Type Description
dims Object
Properties
Name Type Description
width Object width of canvas
height Object height of canvas
zoomX Object zoomX zoom value to unscale the canvas before drawing cache
zoomY Object zoomY zoom value to unscale the canvas before drawing cache
Inherited From:
Source:
Returns:
  • .width width of canvas
    Type
    Object
  • .height height of canvas
    Type
    Object
  • .zoomX zoomX zoom value to unscale the canvas before drawing cache
    Type
    Object
  • .zoomY zoomY zoom value to unscale the canvas before drawing cache
    Type
    Object

_measureLine(lineIndex) → {Object|Object}

measure every grapheme of a line, populating __charBounds
Parameters:
Name Type Description
lineIndex Number
Inherited From:
Source:
Returns:
  • object.width total width of characters
    Type
    Object
  • object.widthOfSpaces length of chars that match this._reSpacesAndTabs
    Type
    Object

_mouseDownHandler()

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

_mouseDownHandlerBefore()

Default event handler for the basic functionalities needed on mousedown:before can be overridden to do something different. Scope of this implementation is: verify the object is already selected when mousing down
Source:

_moveCursorLeftOrRight(direction, e)

Moves cursor right or Left, fires event
Parameters:
Name Type Description
direction String 'Left', 'Right'
e Event Event object
Source:

_moveCursorUpOrDown(direction, e)

Moves cursor up or down, fires the events
Parameters:
Name Type Description
direction String 'Up' or 'Down'
e Event Event object
Source:

_removeCacheCanvas()

Remove cacheCanvas and its dimensions from the objects
Inherited From:
Source:

_renderControls(ctx, styleOverrideopt)

Renders controls and borders for the object the context here is not transformed
Parameters:
Name Type Attributes Description
ctx CanvasRenderingContext2D Context to render on
styleOverride Object <optional>
 properties to override the object style
Inherited From:
Source:

_setupCompositeOperation(ctx)

Sets canvas globalCompositeOperation for specific object custom composition operation for the particular object can be specified using globalCompositeOperation property
Parameters:
Name Type Description
ctx CanvasRenderingContext2D Rendering canvas context
Inherited From:
Source:

_splitTextIntoLines(text) → {Array}

Returns the text as an array of lines.
Parameters:
Name Type Description
text String text to split
Inherited From:
Source:
Returns:
Lines in the text
Type
Array

_toSVG(reviveropt) → {String}

Returns SVG representation of an instance
Parameters:
Name Type Attributes Description
reviver function <optional>
 Method for further parsing of svg representation.
Inherited From:
Source:
Returns:
svg representation of an instance
Type
String

abortCursorAnimation()

Aborts cursor animation and clears all timeouts
Source:

adjustPosition(to)

Parameters:
Name Type Description
to String One of 'left', 'center', 'right'
Inherited From:
Source:

animate(property, value) → {fabric.Object|fabric.AnimationContext|Array.<fabric.AnimationContext>}

Animates object's properties
Parameters:
Name Type Description
property String | Object Property to animate (if string) or properties to animate (if object)
value Number | Object Value to animate property to (if string was given first) or options object
Inherited From:
Source:
Tutorials:
Returns:
  • thisArg
    Type
    fabric.Object
  • animation context (or an array if passed multiple properties) As object — multiple properties object.animate({ left: ..., top: ... }); object.animate({ left: ..., top: ... }, { duration: ... }); As string — one property object.animate('left', ...); object.animate('left', { duration: ... });
    Type
    fabric.AnimationContext | Array.<fabric.AnimationContext>

bringForward(intersectingopt) → {fabric.Object}

Moves an object up in stack of drawn objects
Parameters:
Name Type Attributes Description
intersecting Boolean <optional>
 If `true`, send object in front of next upper intersecting object
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

bringToFront() → {fabric.Object}

Moves an object to the top of the stack of drawn objects
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

calcOwnMatrix() → {Array}

calculate transform matrix that represents the current transformations from the object's properties, this matrix does not include the group transformation
Inherited From:
Source:
Returns:
transform matrix for the object
Type
Array

calcTextHeight()

Calculate text box height
Inherited From:
Source:

calcTransformMatrix(skipGroupopt) → {Array}

calculate transform matrix that represents the current transformations from the object's properties.
Parameters:
Name Type Attributes Description
skipGroup Boolean <optional>
 return transform matrix for object not counting parent transformations There are some situation in which this is useful to avoid the fake rotation.
Inherited From:
Source:
Returns:
transform matrix for the object
Type
Array

center() → {fabric.Object}

Centers object vertically and horizontally on canvas to which is was added last You might need to call `setCoords` on an object after centering, to update controls area.
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

centerH() → {fabric.Object}

Centers object horizontally on canvas to which it was added last. You might need to call `setCoords` on an object after centering, to update controls area.
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

centerV() → {fabric.Object}

Centers object vertically on canvas to which it was added last. You might need to call `setCoords` on an object after centering, to update controls area.
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

cleanStyle(property)

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:
Name Type Description
property string The property to compare between characters and text.
Inherited From:
Source:

clearContextTop()

Prepare and clean the contextTop
Source:

clone(callback, propertiesToIncludeopt)

Clones an instance, using a callback method will work for every object.
Parameters:
Name Type Attributes Description
callback function Callback is invoked with a clone as a first argument
propertiesToInclude Array <optional>
 Any properties that you might want to additionally include in the output
Inherited From:
Source:

cloneAsImage(callback, optionsopt) → {fabric.Object}

Creates an instance of fabric.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. This method is sync now, but still support the callback because we did not want to break. When fabricJS 5.0 will be planned, this will probably be changed to not have a callback.
Parameters:
Name Type Attributes Description
callback function callback, invoked with an instance as a first argument
options Object <optional>
 for clone as image, passed to toDataURL
Properties
Name Type Attributes Default Description
multiplier Number <optional>
 1 Multiplier to scale by
left Number <optional>
 Cropping left offset. Introduced in v1.2.14
top Number <optional>
 Cropping top offset. Introduced in v1.2.14
width Number <optional>
 Cropping width. Introduced in v1.2.14
height Number <optional>
 Cropping height. Introduced in v1.2.14
enableRetinaScaling Boolean <optional>
 Enable retina scaling for clone image. Introduce in 1.6.4
withoutTransform Boolean <optional>
 Remove current object transform ( no scale , no angle, no flip, no skew ). Introduced in 2.3.4
withoutShadow Boolean <optional>
 Remove current object shadow. Introduced in 2.4.2
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

complexity() → {Number}

Returns complexity of an instance
Inherited From:
Source:
Returns:
complexity
Type
Number

containsPoint(point, linesopt, absoluteopt, calculateopt) → {Boolean}

Checks if point is inside the object
Parameters:
Name Type Attributes Description
point fabric.Point Point to check against
lines Object <optional>
 object returned from @method _getImageLines
absolute Boolean <optional>
 use coordinates without viewportTransform
calculate Boolean <optional>
 use coordinates of current position instead of .oCoords
Inherited From:
Source:
Returns:
true if point is inside the object
Type
Boolean

copy(e)

Copies selected text
Parameters:
Name Type Description
e Event Event object
Source:

dispose()

cancel instance's running animations
Inherited From:
Source:

doubleClickHandler()

Default handler for double click, select a word
Source:

drawBorders(ctx, styleOverride) → {fabric.Object}

Draws borders of an object's bounding box. Requires public properties: width, height Requires public options: padding, borderColor
Parameters:
Name Type Description
ctx CanvasRenderingContext2D Context to draw on
styleOverride Object object to override the object style
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

drawBordersInGroup(ctx, options, styleOverride) → {fabric.Object}

Draws borders of an object's bounding box when it is inside a group. Requires public properties: width, height Requires public options: padding, borderColor
Parameters:
Name Type Description
ctx CanvasRenderingContext2D Context to draw on
options object object representing current object parameters
styleOverride Object object to override the object style
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

drawCacheOnCanvas(ctx)

Paint the cached copy of the object on the target context.
Parameters:
Name Type Description
ctx CanvasRenderingContext2D Context to render on
Inherited From:
Source:

drawClipPathOnCache(ctx, clipPath)

Execute the drawing operation for an object clipPath
Parameters:
Name Type Description
ctx CanvasRenderingContext2D Context to render on
clipPath fabric.Object
Inherited From:
Source:

drawControls(ctx, styleOverride) → {fabric.Object}

Draws corners of an object's bounding box. Requires public properties: width, height Requires public options: cornerSize, padding
Parameters:
Name Type Description
ctx CanvasRenderingContext2D Context to draw on
styleOverride Object object to override the object style
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

drawObject(ctx)

Execute the drawing operation for an object on a specified context
Parameters:
Name Type Description
ctx CanvasRenderingContext2D Context to render on
Inherited From:
Source:

drawSelectionBackground(ctx) → {fabric.Object}

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:
Name Type Description
ctx CanvasRenderingContext2D Context to draw on
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

enlargeSpaces()

Enlarge space boxes and shift the others
Inherited From:
Source:

enterEditing() → {fabric.IText}

Enters editing state
Source:
Returns:
thisArg
Type
fabric.IText

exitEditing() → {fabric.IText}

Exits from editing state
Source:
Returns:
thisArg
Type
fabric.IText

findLineBoundaryLeft(startFrom) → {Number}

Find new selection index representing start of current line according to current selection index
Parameters:
Name Type Description
startFrom Number Current selection index
Source:
Returns:
New selection index
Type
Number

findLineBoundaryRight(startFrom) → {Number}

Find new selection index representing end of current line according to current selection index
Parameters:
Name Type Description
startFrom Number Current selection index
Source:
Returns:
New selection index
Type
Number

findWordBoundaryLeft(startFrom) → {Number}

Find new selection index representing start of current word according to current selection index
Parameters:
Name Type Description
startFrom Number Current selection index
Source:
Returns:
New selection index
Type
Number

findWordBoundaryRight(startFrom) → {Number}

Find new selection index representing end of current word according to current selection index
Parameters:
Name Type Description
startFrom Number Current selection index
Source:
Returns:
New selection index
Type
Number

fire(eventName, optionsopt) → {Self}

Fires event with an optional options object
Parameters:
Name Type Attributes Description
eventName String Event name to fire
options Object <optional>
 Options object
Mixes In:
Source:
Returns:
thisArg
Type
Self

forEachControl(fn)

Calls a function for each control. The function gets called, with the control, the object that is calling the iterator and the control's key
Parameters:
Name Type Description
fn function function to iterate over the controls over
Inherited From:
Source:

fromGraphemeToStringSelection()

convert from fabric to textarea values
Source:

fromStringToGraphemeSelection()

convert from textarea to grapheme indexes
Source:

fxStraighten(callbacks) → {fabric.Object}

Same as fabric.Object.prototype.straighten but with animation
Parameters:
Name Type Description
callbacks Object Object with callback functions
Properties
Name Type Attributes Description
onComplete function <optional>
 Invoked on completion
onChange function <optional>
 Invoked on every step of animation
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

get2DCursorLocation(selectionStartopt, skipWrappingopt)

Returns 2d representation (lineIndex and charIndex) of cursor (or selection start)
Parameters:
Name Type Attributes Description
selectionStart Number <optional>
 Optional index. When not given, current selectionStart is used.
skipWrapping Boolean <optional>
 consider the location for unwrapped lines. useful to manage styles.
Inherited From:
Source:

getBoundingRect(absoluteopt, calculateopt) → {Object}

Returns coordinates of object's bounding rectangle (left, top, width, height) the box is intended as aligned to axis of canvas.
Parameters:
Name Type Attributes Description
absolute Boolean <optional>
 use coordinates without viewportTransform
calculate Boolean <optional>
 use coordinates of current position instead of .oCoords / .aCoords
Inherited From:
Source:
Returns:
Object with left, top, width, height properties
Type
Object

getCenterPoint() → {fabric.Point}

Returns the real center coordinates of the object
Inherited From:
Source:
Returns:
Type
fabric.Point

getCompleteStyleDeclaration(lineIndex, charIndex) → {Object}

return a new object that contains all the style property for a character the object returned is newly created
Parameters:
Name Type Description
lineIndex Number of the line where the character is
charIndex Number position of the character on the line
Inherited From:
Source:
Returns:
style object
Type
Object

getCoords() → {Array}

return correct set of coordinates for intersection this will return either aCoords or lineCoords. The coords are returned in an array.
Inherited From:
Source:
Returns:
[tl, tr, br, bl] of points
Type
Array

getCurrentCharColor() → {String|fabric.Gradient|fabric.Pattern}

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
Source:
Returns:
Character color (fill)
Type
String | fabric.Gradient | fabric.Pattern

getCurrentCharFontSize() → {Number}

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
Source:
Returns:
Character font size
Type
Number

getDownCursorOffset(e, isRight) → {Number}

Gets start offset of a selection
Parameters:
Name Type Description
e Event Event object
isRight Boolean
Source:
Returns:
Type
Number

getHeightOfChar(line, _char) → {Number}

Computes height of character at given position
Parameters:
Name Type Description
line Number the line index number
_char Number the character index number
Inherited From:
Source:
Returns:
fontSize of the character
Type
Number

getHeightOfLine(lineIndex) → {Number}

Calculate height of line at 'lineIndex'
Parameters:
Name Type Description
lineIndex Number index of line to calculate
Inherited From:
Source:
Returns:
Type
Number

getLocalPointer(e, pointeropt) → {Object}

Returns coordinates of a pointer relative to an object
Parameters:
Name Type Attributes Description
e Event Event to operate upon
pointer Object <optional>
 Pointer to operate upon (instead of event)
Inherited From:
Source:
Returns:
Coordinates of a pointer (x, y)
Type
Object

getObjectOpacity() → {Number}

Return the object opacity counting also the group property
Inherited From:
Source:
Returns:
Type
Number

getObjectScaling() → {Object}

Return the object scale factor counting also the group scaling
Inherited From:
Source:
Returns:
object with scaleX and scaleY properties
Type
Object

getPointByOrigin(originX, originY) → {fabric.Point}

Returns the coordinates of the object as if it has a different origin
Parameters:
Name Type Description
originX String Horizontal origin: 'left', 'center' or 'right'
originY String Vertical origin: 'top', 'center' or 'bottom'
Inherited From:
Source:
Returns:
Type
fabric.Point

getScaledHeight() → {Number}

Returns height of an object bounding box counting transformations before 2.0 it was named getHeight();
Inherited From:
Source:
Returns:
height value
Type
Number

getScaledWidth() → {Number}

Returns width of an object's bounding box counting transformations before 2.0 it was named getWidth();
Inherited From:
Source:
Returns:
width value
Type
Number

getSelectedText() → {String}

Returns selected text
Source:
Returns:
Type
String

getSelectionStartFromPointer(e) → {Number}

Returns index of a character corresponding to where an object was clicked
Parameters:
Name Type Description
e Event Event object
Source:
Returns:
Index of a character
Type
Number

getSelectionStyles(startIndexopt, endIndexopt, completeopt) → {Array}

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:
Name Type Attributes Description
startIndex Number <optional>
 Start index to get styles at
endIndex Number <optional>
 End index to get styles at, if not specified selectionEnd or startIndex + 1
complete Boolean <optional>
 get full style or not
Inherited From:
Source:
Returns:
styles an array with one, zero or more Style objects
Type
Array

getSvgCommons() → {String}

Returns id attribute for svg output
Inherited From:
Source:
Returns:
Type
String

getSvgFilter() → {String}

Returns filter for svg shadow
Inherited From:
Source:
Returns:
Type
String

getSvgSpanStyles(style, useWhiteSpace) → {String}

Returns styles-string for svg-export
Parameters:
Name Type Description
style Object the object from which to retrieve style properties
useWhiteSpace Boolean a boolean to include an additional attribute in the style.
Inherited From:
Source:
Returns:
Type
String

getSvgStyles(skipShadow) → {String}

Returns styles-string for svg-export
Parameters:
Name Type Description
skipShadow Boolean a boolean to skip shadow filter output
Inherited From:
Source:
Returns:
Type
String

getSvgTextDecoration(style) → {String}

Returns text-decoration property for svg-export
Parameters:
Name Type Description
style Object the object from which to retrieve style properties
Inherited From:
Source:
Returns:
Type
String

getSvgTransform(use) → {String}

Returns transform-string for svg-export
Parameters:
Name Type Description
use Boolean the full transform or the single object one.
Inherited From:
Source:
Returns:
Type
String

getTotalObjectScaling() → {Object}

Return the object scale factor counting also the group scaling, zoom and retina
Inherited From:
Source:
Returns:
object with scaleX and scaleY properties
Type
Object

getUpCursorOffset(e, isRight) → {Number}

Parameters:
Name Type Description
e Event Event object
isRight Boolean
Source:
Returns:
Type
Number

getValueOfPropertyAt(lineIndex, charIndex, property)

Retrieves the value of property at given character position
Parameters:
Name Type Description
lineIndex Number the line number
charIndex Number the character number
property String the property name
Inherited From:
Source:
Returns:
the value of 'property'

getViewportTransform() → {Array}

Retrieves viewportTransform from Object's canvas if possible
Inherited From:
Source:
Returns:
Type
Array

hasFill()

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.
Since:
  • 3.0.0
Inherited From:
Source:
Returns:
Boolean

hasStateChanged(propertySetopt) → {Boolean}

Returns true if object state (one of its state properties) was changed
Parameters:
Name Type Attributes Description
propertySet String <optional>
 optional name for the set of property we want to save
Inherited From:
Source:
Returns:
true if instance' state has changed since `fabric.Object#saveState` was called
Type
Boolean

hasStroke()

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.
Since:
  • 3.0.0
Inherited From:
Source:
Returns:
Boolean

initAddedHandler()

Initializes "added" event handler
Source:

initBehavior()

Initializes all the interactive behavior of IText
Source:

initClicks()

Initializes double and triple click event handlers
Source:

initCursorSelectionHandlers()

Initializes event handlers related to cursor or selection
Source:

initDelayedCursor()

Initializes delayed cursor
Source:

initDoubleClickSimulation()

Initializes "dbclick" event handler
Source:

initHiddenTextarea()

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

initialize(text, optionsopt) → {fabric.IText}

Constructor
Parameters:
Name Type Attributes Description
text String Text string
options Object <optional>
 Options object
Overrides:
Source:
Returns:
thisArg
Type
fabric.IText

initMousedownHandler()

Initializes "mousedown" event handler
Source:

initMouseMoveHandler()

Initializes "mousemove" event handler
Source:

initMouseupHandler()

Initializes "mouseup" event handler
Source:

insertChars(text, style, start, end)

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:
Name Type Description
text String text to insert
style Array array of style objects
start Number
end Number default to start + 1
Source:

insertCharStyleObject(lineIndex, charIndex, quantity, copiedStyle)

Inserts style object for a given line/char index
Parameters:
Name Type Description
lineIndex Number Index of a line
charIndex Number Index of a char
quantity Number number Style object to insert, if given
copiedStyle Array array of style objects
Source:

insertNewlineStyleObject(lineIndex, charIndex, qty, copiedStyle)

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:
Name Type Description
lineIndex Number Index of a line
charIndex Number Index of a char
qty Number number of lines to add
copiedStyle Array Array of objects styles
Source:

insertNewStyleBlock(insertedText, start, copiedStyleopt)

Inserts style object(s)
Parameters:
Name Type Attributes Description
insertedText Array Characters at the location where style is inserted
start Number cursor index for inserting style
copiedStyle Array <optional>
 array of style objects to insert.
Source:

intersectsWithObject(other, absoluteopt, calculateopt) → {Boolean}

Checks if object intersects with another object
Parameters:
Name Type Attributes Description
other Object Object to test
absolute Boolean <optional>
 use coordinates without viewportTransform
calculate Boolean <optional>
 use coordinates of current position instead of .oCoords
Inherited From:
Source:
Returns:
true if object intersects with another object
Type
Boolean

intersectsWithRect(pointTL, pointBR, absoluteopt, calculateopt) → {Boolean}

Checks if object intersects with an area formed by 2 points
Parameters:
Name Type Attributes Description
pointTL Object top-left point of area
pointBR Object bottom-right point of area
absolute Boolean <optional>
 use coordinates without viewportTransform
calculate Boolean <optional>
 use coordinates of current position instead of .oCoords
Inherited From:
Source:
Returns:
true if object intersects with an area formed by 2 points
Type
Boolean

isCacheDirty(skipCanvas)

Check if cache is dirty
Parameters:
Name Type Description
skipCanvas Boolean skip canvas checks because this object is painted on parent canvas.
Inherited From:
Source:

isContainedWithinObject(other, absoluteopt, calculateopt) → {Boolean}

Checks if object is fully contained within area of another object
Parameters:
Name Type Attributes Description
other Object Object to test
absolute Boolean <optional>
 use coordinates without viewportTransform
calculate Boolean <optional>
 use coordinates of current position instead of .oCoords
Inherited From:
Source:
Returns:
true if object is fully contained within area of another object
Type
Boolean

isContainedWithinRect(pointTL, pointBR, absoluteopt, calculateopt) → {Boolean}

Checks if object is fully contained within area formed by 2 points
Parameters:
Name Type Attributes Description
pointTL Object top-left point of area
pointBR Object bottom-right point of area
absolute Boolean <optional>
 use coordinates without viewportTransform
calculate Boolean <optional>
 use coordinates of current position instead of .oCoords
Inherited From:
Source:
Returns:
true if object is fully contained within area formed by 2 points
Type
Boolean

isControlVisible(controlKey) → {Boolean}

Returns true if the specified control is visible, false otherwise.
Parameters:
Name Type Description
controlKey String The key of the control. Possible values are 'tl', 'tr', 'br', 'bl', 'ml', 'mt', 'mr', 'mb', 'mtr'.
Inherited From:
Source:
Returns:
true if the specified control is visible, false otherwise
Type
Boolean

isEmptyStyles(lineIndex) → {Boolean}

Returns true if object has no styling or no styling in a line
Parameters:
Name Type Description
lineIndex Number , lineIndex is on wrapped lines.
Inherited From:
Source:
Returns:
Type
Boolean

isEndOfWrapping() → {Boolean}

Detect if the text line is ended with an hard break text and itext do not have wrapping, return false
Inherited From:
Source:
Returns:
Type
Boolean

isOnScreen(calculateopt) → {Boolean}

Checks if object is contained within the canvas with current viewportTransform the check is done stopping at first point that appears on screen
Parameters:
Name Type Attributes Description
calculate Boolean <optional>
 use coordinates of current position instead of .aCoords
Inherited From:
Source:
Returns:
true if object is fully or partially contained within canvas
Type
Boolean

isPartiallyOnScreen(calculateopt) → {Boolean}

Checks if object is partially contained within the canvas with current viewportTransform
Parameters:
Name Type Attributes Description
calculate Boolean <optional>
 use coordinates of current position instead of .oCoords
Inherited From:
Source:
Returns:
true if object is partially contained within canvas
Type
Boolean

isType(type) → {Boolean}

Returns true if specified type is identical to the type of an instance
Parameters:
Name Type Description
type String Type to check against
Inherited From:
Source:
Returns:
Type
Boolean

measureLine(lineIndex) → {Number}

measure a text line measuring all characters.
Parameters:
Name Type Description
lineIndex Number line number
Inherited From:
Source:
Returns:
Line width
Type
Number

missingNewlineOffset()

Detect if a line has a linebreak and so we need to account for it when moving and counting style. It return always for text and Itext.
Inherited From:
Source:
Returns:
Number

moveCursorDown(e)

Moves cursor down
Parameters:
Name Type Description
e Event Event object
Source:

moveCursorLeft(e)

Moves cursor left
Parameters:
Name Type Description
e Event Event object
Source:

moveCursorLeftWithoutShift(e)

Moves cursor left without keeping selection
Parameters:
Name Type Description
e Event
Source:

moveCursorLeftWithShift(e)

Moves cursor left while keeping selection
Parameters:
Name Type Description
e Event
Source:

moveCursorRight(e)

Moves cursor right
Parameters:
Name Type Description
e Event Event object
Source:

moveCursorRightWithoutShift(e)

Moves cursor right without keeping selection
Parameters:
Name Type Description
e Event Event object
Source:

moveCursorRightWithShift(e)

Moves cursor right while keeping selection
Parameters:
Name Type Description
e Event
Source:

moveCursorUp(e)

Moves cursor up
Parameters:
Name Type Description
e Event Event object
Source:

moveCursorWithoutShift(offset)

Moves cursor up without shift
Parameters:
Name Type Description
offset Number
Source:

moveCursorWithShift(offset)

Moves cursor with shift
Parameters:
Name Type Description
offset Number
Source:

moveTo(index) → {fabric.Object}

Moves an object to specified level in stack of drawn objects
Parameters:
Name Type Description
index Number New position of object
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

needsItsOwnCache()

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

onCompositionEnd()

Composition end
Source:

onCompositionStart()

Composition start
Source:

onDeselect(optionsopt)

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:
Name Type Attributes Description
options Object <optional>
 options sent from the upper functions
Properties
Name Type Attributes Description
e Event <optional>
 event if the process is generated by an event
Overrides:
Source:

onInput(e)

Handles onInput event
Parameters:
Name Type Description
e Event Event object
Source:

onKeyDown(e)

Handles keydown event only used for arrows and combination of modifier keys.
Parameters:
Name Type Description
e Event Event object
Source:

onKeyUp(e)

Handles keyup event We handle KeyUp because ie11 and edge have difficulties copy/pasting if a copy/cut event fired, keyup is dismissed
Parameters:
Name Type Description
e Event Event object
Source:

onSelect(optionsopt)

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:
Name Type Attributes Description
options Object <optional>
 options sent from the upper functions
Properties
Name Type Attributes Description
e Event <optional>
 event if the process is generated by an event
Inherited From:
Source:

paste(e)

Pastes text
Parameters:
Name Type Description
e Event Event object
Source:

removeChars(start, end)

Removes characters from start/end start/end ar per grapheme position in _text array.
Parameters:
Name Type Description
start Number
end Number default to start + 1
Source:

removeStyle(props)

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:
Name Type Description
props String The property to remove from character styles.
Inherited From:
Source:

removeStyleFromTo(start, end)

remove and reflow a style block from start to end.
Parameters:
Name Type Description
start Number linear start position for removal (included in removal)
end Number linear end position for removal ( excluded from removal )
Source:

renderCursor(boundaries, ctx)

Renders cursor
Parameters:
Name Type Description
boundaries Object
ctx CanvasRenderingContext2D transformed context to draw on
Source:

renderCursorOrSelection()

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

renderSelection(boundaries, ctx)

Renders text selection
Parameters:
Name Type Description
boundaries Object Object with left/top/leftOffset/topOffset
ctx CanvasRenderingContext2D transformed context to draw on
Source:

rotate(angle) → {fabric.Object}

Sets "angle" of an instance with centered rotation
Parameters:
Name Type Description
angle Number Angle value (in degrees)
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

saveState(optionsopt) → {fabric.Object}

Saves state of an object
Parameters:
Name Type Attributes Description
options Object <optional>
 Object with additional `stateProperties` array to include when saving state
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

scale(value) → {fabric.Object}

Scales an object (equally by x and y)
Parameters:
Name Type Description
value Number Scale factor
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

scaleToHeight(value, absolute) → {fabric.Object}

Scales an object to a given height, with respect to bounding box (scaling by x/y equally)
Parameters:
Name Type Description
value Number New height value
absolute Boolean ignore viewport
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

scaleToWidth(value, absolute) → {fabric.Object}

Scales an object to a given width, with respect to bounding box (scaling by x/y equally)
Parameters:
Name Type Description
value Number New width value
absolute Boolean ignore viewport
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

searchWordBoundary(selectionStart, direction) → {Number}

Finds index corresponding to beginning or end of a word
Parameters:
Name Type Description
selectionStart Number Index of a character
direction Number 1 or -1
Source:
Returns:
Index of the beginning or end of a word
Type
Number

selectAll() → {fabric.IText}

Selects entire text
Source:
Returns:
thisArg
Type
fabric.IText

selectLine(selectionStart) → {fabric.IText}

Selects a line based on the index
Parameters:
Name Type Description
selectionStart Number Index of a character
Source:
Returns:
thisArg
Type
fabric.IText

selectWord(selectionStart)

Selects a word based on the index
Parameters:
Name Type Description
selectionStart Number Index of a character
Source:

sendBackwards(intersectingopt) → {fabric.Object}

Moves an object down in stack of drawn objects
Parameters:
Name Type Attributes Description
intersecting Boolean <optional>
 If `true`, send object behind next lower intersecting object
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

sendToBack() → {fabric.Object}

Moves an object to the bottom of the stack of drawn objects
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

set(key, value) → {fabric.Object}

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:
Name Type Description
key String | Object Property name or object (if object, iterate over the object properties)
value Object | function Property value (if function, the value is passed into it and its return value is used as a new one)
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

setControlsVisibility(optionsopt) → {fabric.Object}

Sets the visibility state of object controls.
Parameters:
Name Type Attributes Description
options Object <optional>
 Options object
Properties
Name Type Attributes Description
bl Boolean <optional>
 true to enable the bottom-left control, false to disable it
br Boolean <optional>
 true to enable the bottom-right control, false to disable it
mb Boolean <optional>
 true to enable the middle-bottom control, false to disable it
ml Boolean <optional>
 true to enable the middle-left control, false to disable it
mr Boolean <optional>
 true to enable the middle-right control, false to disable it
mt Boolean <optional>
 true to enable the middle-top control, false to disable it
tl Boolean <optional>
 true to enable the top-left control, false to disable it
tr Boolean <optional>
 true to enable the top-right control, false to disable it
mtr Boolean <optional>
 true to enable the middle-top-rotate control, false to disable it
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

setControlVisible(controlKey, visible) → {fabric.Object}

Sets the visibility of the specified control.
Parameters:
Name Type Description
controlKey String The key of the control. Possible values are 'tl', 'tr', 'br', 'bl', 'ml', 'mt', 'mr', 'mb', 'mtr'.
visible Boolean true to set the specified control visible, false otherwise
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

setCoords(skipCornersopt) → {fabric.Object}

Sets corner and controls position coordinates based on current angle, width and height, left and top. oCoords are used to find the corners aCoords are used to quickly find an object on the canvas lineCoords are used to quickly find object during pointer events. See https://github.com/fabricjs/fabric.js/wiki/When-to-call-setCoords and http://fabric5.fabricjs.com/fabric-gotchas
Parameters:
Name Type Attributes Description
skipCorners Boolean <optional>
 skip calculation of oCoords.
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

setCursorByClick(e)

Changes cursor location in a text depending on passed pointer (x/y) object
Parameters:
Name Type Description
e Event Event object
Source:

setOnGroup()

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.
Inherited From:
Source:

setOptions(optionsopt)

Sets object's properties from options
Parameters:
Name Type Attributes Description
options Object <optional>
 Options object
Inherited From:
Source:

setPathInfo() → {fabric.Text}

If text has a path, it will add the extra information needed for path and text calculations
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Text

setPositionByOrigin(pos, originX, originY) → {void}

Sets the position of the object taking into consideration the object's origin
Parameters:
Name Type Description
pos fabric.Point The new position of the object
originX String Horizontal origin: 'left', 'center' or 'right'
originY String Vertical origin: 'top', 'center' or 'bottom'
Inherited From:
Source:
Returns:
Type
void

setSelectionEnd(index)

Sets selection end (right boundary of a selection)
Parameters:
Name Type Description
index Number Index to set selection end to
Source:

setSelectionStart(index)

Sets selection start (left boundary of a selection)
Parameters:
Name Type Description
index Number Index to set selection start to
Source:

setSelectionStartEndWithShift()

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

setSelectionStyles(stylesopt, startIndexopt, endIndexopt) → {fabric.IText}

Sets style of a current selection, if no selection exist, do not set anything.
Parameters:
Name Type Attributes Description
styles Object <optional>
 Styles object
startIndex Number <optional>
 Start index to get styles at
endIndex Number <optional>
 End index to get styles at, if not specified selectionEnd or startIndex + 1
Inherited From:
Source:
Returns:
thisArg
Type
fabric.IText

setSubscript(start, end) → {fabric.Text}

Turns the character into an 'inferior figure' (i.e. 'subscript')
Parameters:
Name Type Description
start Number selection start
end Number selection end
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Text

setSuperscript(start, end) → {fabric.Text}

Turns the character into a 'superior figure' (i.e. 'superscript')
Parameters:
Name Type Description
start Number selection start
end Number selection end
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Text

setupState(optionsopt) → {fabric.Object}

Setups state of an object
Parameters:
Name Type Attributes Description
options Object <optional>
 Object with additional `stateProperties` array to include when saving state
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

shiftLineStyles(lineIndex, offset)

Shifts line styles up or down
Parameters:
Name Type Description
lineIndex Number Index of a line
offset Number Can any number?
Source:

shouldCache() → {Boolean}

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

straighten() → {fabric.Object}

Straightens an object (rotating it from current angle to one of 0, 90, 180, 270, etc. depending on which is closer)
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

styleHas(property, lineIndex) → {Boolean}

Returns true if object has a style property or has it ina specified line This function is used to detect if a text will use a particular property or not.
Parameters:
Name Type Description
property String to check for
lineIndex Number to check the style on
Inherited From:
Source:
Returns:
Type
Boolean

toCanvasElement(options) → {HTMLCanvasElement}

Converts an object into a HTMLCanvas element
Parameters:
Name Type Description
options Object Options object
Properties
Name Type Attributes Default Description
multiplier Number <optional>
 1 Multiplier to scale by
left Number <optional>
 Cropping left offset. Introduced in v1.2.14
top Number <optional>
 Cropping top offset. Introduced in v1.2.14
width Number <optional>
 Cropping width. Introduced in v1.2.14
height Number <optional>
 Cropping height. Introduced in v1.2.14
enableRetinaScaling Boolean <optional>
 Enable retina scaling for clone image. Introduce in 1.6.4
withoutTransform Boolean <optional>
 Remove current object transform ( no scale , no angle, no flip, no skew ). Introduced in 2.3.4
withoutShadow Boolean <optional>
 Remove current object shadow. Introduced in 2.4.2
Inherited From:
Source:
Returns:
Returns DOM element with the fabric.Object
Type
HTMLCanvasElement

toClipPathSVG(reviveropt) → {String}

Returns svg clipPath representation of an instance
Parameters:
Name Type Attributes Description
reviver function <optional>
 Method for further parsing of svg representation.
Inherited From:
Source:
Returns:
svg representation of an instance
Type
String

toDatalessObject(propertiesToIncludeopt) → {Object}

Returns (dataless) object representation of an instance
Parameters:
Name Type Attributes Description
propertiesToInclude Array <optional>
 Any properties that you might want to additionally include in the output
Inherited From:
Source:
Returns:
Object representation of an instance
Type
Object

toDataURL(options) → {String}

Converts an object into a data-url-like string
Parameters:
Name Type Description
options Object Options object
Properties
Name Type Attributes Default Description
format String <optional>
 png The format of the output image. Either "jpeg" or "png"
quality Number <optional>
 1 Quality level (0..1). Only used for jpeg.
multiplier Number <optional>
 1 Multiplier to scale by
left Number <optional>
 Cropping left offset. Introduced in v1.2.14
top Number <optional>
 Cropping top offset. Introduced in v1.2.14
width Number <optional>
 Cropping width. Introduced in v1.2.14
height Number <optional>
 Cropping height. Introduced in v1.2.14
enableRetinaScaling Boolean <optional>
 Enable retina scaling for clone image. Introduce in 1.6.4
withoutTransform Boolean <optional>
 Remove current object transform ( no scale , no angle, no flip, no skew ). Introduced in 2.3.4
withoutShadow Boolean <optional>
 Remove current object shadow. Introduced in 2.4.2
Inherited From:
Source:
Returns:
Returns a data: URL containing a representation of the object in the format specified by options.format
Type
String

toJSON(propertiesToIncludeopt) → {Object}

Returns a JSON representation of an instance
Parameters:
Name Type Attributes Description
propertiesToInclude Array <optional>
 Any properties that you might want to additionally include in the output
Inherited From:
Source:
Returns:
JSON
Type
Object

toLocalPoint(point, originX, originY) → {fabric.Point}

Returns the point in local coordinates
Parameters:
Name Type Description
point fabric.Point The point relative to the global coordinate system
originX String Horizontal origin: 'left', 'center' or 'right'
originY String Vertical origin: 'top', 'center' or 'bottom'
Inherited From:
Source:
Returns:
Type
fabric.Point

toObject(propertiesToIncludeopt) → {Object}

Returns object representation of an instance
Parameters:
Name Type Attributes Description
propertiesToInclude Array <optional>
 Any properties that you might want to additionally include in the output
Inherited From:
Source:
Returns:
Object representation of an instance
Type
Object

toString() → {String}

Returns string representation of an instance
Inherited From:
Source:
Returns:
String representation of text object
Type
String

toSVG(reviveropt) → {String}

Returns svg representation of an instance
Parameters:
Name Type Attributes Description
reviver function <optional>
 Method for further parsing of svg representation.
Inherited From:
Source:
Returns:
svg representation of an instance
Type
String

transform(ctx)

Transforms context when rendering an object
Parameters:
Name Type Description
ctx CanvasRenderingContext2D Context
Inherited From:
Source:

translateToCenterPoint(point, originX, originY) → {fabric.Point}

Translates the coordinates from origin to center coordinates (based on the object's dimensions)
Parameters:
Name Type Description
point fabric.Point The point which corresponds to the originX and originY params
originX String Horizontal origin: 'left', 'center' or 'right'
originY String Vertical origin: 'top', 'center' or 'bottom'
Inherited From:
Source:
Returns:
Type
fabric.Point

translateToGivenOrigin(point, fromOriginX, fromOriginY, toOriginX, toOriginY) → {fabric.Point}

Translates the coordinates from a set of origin to another (based on the object's dimensions)
Parameters:
Name Type Description
point fabric.Point The point which corresponds to the originX and originY params
fromOriginX String Horizontal origin: 'left', 'center' or 'right'
fromOriginY String Vertical origin: 'top', 'center' or 'bottom'
toOriginX String Horizontal origin: 'left', 'center' or 'right'
toOriginY String Vertical origin: 'top', 'center' or 'bottom'
Inherited From:
Source:
Returns:
Type
fabric.Point

translateToOriginPoint(center, originX, originY) → {fabric.Point}

Translates the coordinates from center to origin coordinates (based on the object's dimensions)
Parameters:
Name Type Description
center fabric.Point The point which corresponds to center of the object
originX String Horizontal origin: 'left', 'center' or 'right'
originY String Vertical origin: 'top', 'center' or 'bottom'
Inherited From:
Source:
Returns:
Type
fabric.Point

tripleClickHandler()

Default handler for triple click, select a line
Source:

viewportCenter() → {fabric.Object}

Centers object on current viewport of canvas to which it was added last. You might need to call `setCoords` on an object after centering, to update controls area.
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

viewportCenterH() → {fabric.Object}

Centers object horizontally on current viewport of canvas to which it was added last. You might need to call `setCoords` on an object after centering, to update controls area.
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

viewportCenterV() → {fabric.Object}

Centers object vertically on current viewport of canvas to which it was added last. You might need to call `setCoords` on an object after centering, to update controls area.
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

willDrawShadow() → {Boolean}

Check if this object or a child object will cast a shadow used by Group.shouldCache to know if child has a shadow recursively
Inherited From:
Source:
Returns:
Type
Boolean