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

_fontSizeMult :Number

Text Line proportion to font Size (in pixels)
Type:
  • Number
Inherited From:
Default Value:
  • 1.13
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 usefull 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 calcCoords(true);
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.
Type:
  • String
Inherited From:
Source:

borderColor :String

Color of controlling borders of an object (when it's active)
Type:
  • String
Inherited From:
Default Value:
  • rgba(102,153,255,0.75)
Source:

borderDashArray :Array

Array specifying dash pattern of an object's borders (hasBorder must be true)
Type:
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
Type:
  • Number
Inherited From:
Default Value:
  • 1
Source:

cacheProperties :Array

List of properties to consider when checking if cache needs refresh
Type:
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:

clipTo :function

Function that determines clipping of an object (context is passed as a first argument) Note that context origin is at the object's center point (not left/top corner)
Type:
  • function
Inherited From:
Source:

cornerColor :String

Color of controlling corners of an object (when it's active)
Type:
  • String
Inherited From:
Default Value:
  • rgba(102,153,255,0.5)
Source:

cornerDashArray :Array

Array specifying dash pattern of an object's control (hasBorder must be true)
Type:
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:

cursorColor :String

Color of default cursor (when not overwritten by character style)
Type:
  • String
Default Value:
  • #333
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:

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 SVG or OBJECT/JSON since 1.6.3
Type:
  • Boolean
Inherited From:
Source:

fill :String

Color of object's fill
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:
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:

hasRotatingPoint :Boolean

When set to `false`, object's controlling rotating point will not be visible or selectable
Type:
  • Boolean
Inherited From:
Default Value:
  • true
Source:

height :Number

Object height
Type:
  • Number
Inherited From:
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:

isEditing :Boolean

Indicates whether text is in editing mode
Type:
  • Boolean
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:

lineHeight :Number

Line height
Type:
  • Number
Inherited From:
Default Value:
  • 1.16
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:

lockUniScaling :Boolean

When `true`, object non-uniform scaling is locked
Type:
  • Boolean
Inherited From:
Source:

minScaleLimit :Number

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

moveCursor :String

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

needsItsOwnCache :Boolean

When set to `true`, force the object to have its own cache, even if it is inside a group it may be needed when your object behave in a particular way on the cache and always needs its own isolated canvas to render correctly. since 1.7.5
Type:
  • Boolean
Inherited From:
Default Value:
  • false
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. default to true since 1.7.0
Type:
  • Boolean
Inherited From:
Default Value:
  • true
Source:

oCoords

Describe object's corner position in canvas element coordinates. properties are tl,mt,tr,ml,mr,bl,mb,br,mtr for 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 this properties: width, height, scaleX, scaleY skewX, skewY, angle, strokeWidth, viewportTransform, top, left, padding. The coordinates get updated with @method setCoords. You can calculate them without updating with @method calcCoords;
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/40/ 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/40/ on how originX/originY affect objects in groups
Type:
  • String
Inherited From:
Default Value:
  • top
Source:

padding :Number

Padding between object and its controlling borders (in pixels)
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:

rotatingPointOffset :Number

Offset for object's controlling rotating point (when enabled via `hasRotatingPoint`)
Type:
  • Number
Inherited From:
Default Value:
  • 40
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 pathgroups, 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:
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:
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 "bevil", "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:
  • 10
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 (where top-level properties corresponds to line number and 2nd-level properties -- to char number in a line)
Type:
  • Object
Source:

textAlign :String

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

textBackgroundColor :String

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

textDecoration :String

Text decoration Possible values: "", "underline", "overline" or "line-through".
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:

transformMatrix :Array

Transform matrix (similar to SVG's transform matrix)
Type:
Inherited From:
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:

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, forceAsyncopt) → {fabric.IText}

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
forceAsync Boolean <optional>
Force an async behaviour trying to create pattern first
Source:
Returns:
instance of fabric.IText
Type
fabric.IText

_calcRotateMatrix() → {Array}

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

_getFontDeclaration() → {String}

return font declaration string for canvas context
Inherited From:
Source:
Returns:
font declaration formatted for canvas context.
Type
String

_getNewSelectionStartFromOffset(mouseOffset, prevWidth, width, index, jlen) → {Number}

Overrides the IText implementation and adjusts character index as there is not always a linebreak
Parameters:
Name Type Description
mouseOffset Number
prevWidth Number
width Number
index Number
jlen Number
Source:
Returns:
Type
Number

_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

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

_renderControls(ctx)

Renders controls and borders for the object
Parameters:
Name Type Description
ctx CanvasRenderingContext2D Context to render on
Inherited From:
Source:

_set(key, value) → {fabric.Text}

Sets specified property to a specified value
Parameters:
Name Type Description
key String
value *
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Text

_setupCompositeOperation(ctx)

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

_splitTextIntoLines() → {Array}

Returns the text as an array of lines.
Inherited From:
Source:
Returns:
Lines in the text
Type
Array

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}

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

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

calcCoords() → {Object}

Calculate and returns the .coords of an object.
Inherited From:
Source:
Returns:
Object with tl, tr, br, bl ....
Type
Object

calcTransformMatrix(skipGroupopt) → {Array}

calculate trasform Matrix that represent current transformation from object properties.
Parameters:
Name Type Attributes Description
skipGroup Boolean <optional>
return transformMatrix for object and not go upward with parents
Inherited From:
Source:
Returns:
matrix 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

clearContextTop()

Prepare and clean the contextTop
Source:

clone(callback, propertiesToIncludeopt) → {fabric.Object}

Clones an instance, some objects are async, so using callback method will work for every object. Using the direct return does not work for images and groups.
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:
Returns:
clone of an instance
Type
fabric.Object

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

Creates an instance of fabric.Image out of an object
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 Description
enableRetinaScaling Boolean <optional>
enable retina scaling for the cloned image
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:

cut(e)

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

drawBorders(ctx) → {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
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

drawBordersInGroup(ctx, options) → {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
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:

drawControls(ctx) → {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
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

drawObject(ctx, noTransformopt)

Execute the drawing operation for an object on a specified context
Parameters:
Name Type Attributes Description
ctx CanvasRenderingContext2D Context to render on
noTransform Boolean <optional>
When true, context is not transformed
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

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

forwardDelete()

Forward delete
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)

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

getAngle() → {Number}

Retrieves object's angle (in degrees)
Inherited From:
Source:
Returns:
Type
Number

getBoundingRect(absoluteopt, calculateopt) → {Object}

Returns coordinates of object's bounding rectangle (left, top, width, height) the box is intented 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
Inherited From:
Source:
Returns:
Object with left, top, width, height properties
Type
Object

getBoundingRectHeight() → {Number}

Returns height of an object's bounding rectangle
Inherited From:
Deprecated:
  • since 1.0.4
Source:
Returns:
height value
Type
Number

getBoundingRectWidth() → {Number}

Returns width of an object's bounding rectangle
Inherited From:
Deprecated:
  • since 1.0.4
Source:
Returns:
width value
Type
Number

getCenterPoint() → {fabric.Point}

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

getClipTo() → {function}

Retrieves object's clipping function
Inherited From:
Source:
Returns:
Type
function

getCoords()

return correct set of coordinates for intersection
Inherited From:
Source:

getCurrentCharColor(lineIndex, charIndex) → {String}

Returns color (fill) of char at the current cursor
Parameters:
Name Type Description
lineIndex Number Line index
charIndex Number Char index
Source:
Returns:
Character color (fill)
Type
String

getCurrentCharFontSize(lineIndex, charIndex) → {Number}

Returns fontSize of char at the current cursor
Parameters:
Name Type Description
lineIndex Number Line index
charIndex Number Char index
Source:
Returns:
Character font size
Type
Number

getCurrentCharStyle(lineIndex, charIndex) → {Object}

Returns complete style of char at the current cursor
Parameters:
Name Type Description
lineIndex Number Line index
charIndex Number Char index
Source:
Returns:
Character style
Type
Object

getDownCursorOffset(e, isRight) → {Number}

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

getFill() → {String}

Retrieves object's fill
Inherited From:
Source:
Returns:
Fill value
Type
String

getFlipX() → {Boolean}

Retrieves object's flipX value
Inherited From:
Source:
Returns:
flipX value
Type
Boolean

getFlipY() → {Boolean}

Retrieves object's flipY value
Inherited From:
Source:
Returns:
flipY value
Type
Boolean

getFontFamily() → {String}

Retrieves object's fontFamily
Inherited From:
Source:
Returns:
Font family
Type
String

getFontSize() → {String}

Retrieves object's fontSize
Inherited From:
Source:
Returns:
Font size (in pixels)
Type
String

getFontStyle() → {String}

Retrieves object's fontStyle
Inherited From:
Source:
Returns:
Font style
Type
String

getFontWeight() → {String|Number}

Retrieves object's fontWeight
Inherited From:
Source:
Returns:
Font weight
Type
String | Number

getHeight() → {Number}

Returns height of an object bounding box counting transformations to be renamed in 2.0
Inherited From:
Source:
Returns:
height value
Type
Number

getLeft() → {Number}

Retrieves object's left position
Inherited From:
Source:
Returns:
Left value (in pixels)
Type
Number

getLineHeight() → {Number}

Retrieves object's lineHeight
Inherited From:
Source:
Returns:
Line height
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

getNumNewLinesInSelectedText() → {Number}

Returns number of newlines in selected text
Source:
Returns:
Number of newlines in selected text
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

getOpacity() → {Number}

Retrieves object's opacity
Inherited From:
Source:
Returns:
Opacity value (0-1)
Type
Number

getOriginX() → {String}

Retrieves object's originX
Inherited From:
Source:
Returns:
originX value
Type
String

getOriginY() → {String}

Retrieves object's originY
Inherited From:
Source:
Returns:
originY value
Type
String

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

getScaleX() → {Number}

Retrieves object's scaleX value
Inherited From:
Source:
Returns:
scaleX value
Type
Number

getScaleY() → {Number}

Retrieves object's scaleY value
Inherited From:
Source:
Returns:
scaleY 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) → {Object}

Gets style of a current selection/cursor (at the start position)
Parameters:
Name Type Attributes Description
startIndex Number <optional>
Start index to get styles at
endIndex Number <optional>
End index to get styles at
Source:
Returns:
styles Style object at a specified (or current) index
Type
Object

getShadow() → {Object}

Retrieves object's shadow
Inherited From:
Source:
Returns:
Shadow instance
Type
Object

getStroke() → {String}

Retrieves object's stroke
Inherited From:
Source:
Returns:
stroke value
Type
String

getStrokeWidth() → {Number}

Retrieves object's strokeWidth
Inherited From:
Source:
Returns:
strokeWidth value
Type
Number

getSvgFilter() → {String}

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

getSvgId() → {String}

Returns id attribute for svg output
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

getSvgTransform() → {String}

Returns transform-string for svg-export
Inherited From:
Source:
Returns:
Type
String

getSvgTransformMatrix() → {String}

Returns transform-string for svg-export from the transform matrix of single elements
Inherited From:
Source:
Returns:
Type
String

getText() → {String}

Retrieves object's text
Inherited From:
Source:
Returns:
text
Type
String

getTextAlign() → {String}

Retrieves object's textAlign
Inherited From:
Source:
Returns:
Text alignment
Type
String

getTextBackgroundColor() → {String}

Retrieves object's textBackgroundColor
Inherited From:
Source:
Returns:
Text background color
Type
String

getTextDecoration() → {String}

Retrieves object's textDecoration
Inherited From:
Source:
Returns:
Text decoration
Type
String

getTop() → {Number}

Retrieves object's top position
Inherited From:
Source:
Returns:
Top value (in pixels)
Type
Number

getTransformMatrix() → {Array}

Retrieves object's transformMatrix
Inherited From:
Source:
Returns:
transformMatrix
Type
Array

getUpCursorOffset(e, isRight) → {Number}

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

getViewportTransform() → {Boolean}

Retrieves viewportTransform from Object's canvas if possible
Inherited From:
Source:
Returns:
flipY value // TODO
Type
Boolean

getVisible() → {Boolean}

Retrieves object's visible state
Inherited From:
Source:
Returns:
True if visible
Type
Boolean

getWidth() → {Number}

Returns width of an object bounding box counting transformations
Inherited From:
Source:
Returns:
width value
Type
Number

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

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:

insertChar(_char, skipUpdate, styleObject)

Inserts a character where cursor is
Parameters:
Name Type Description
_char String Characters to insert
skipUpdate Boolean trigger rendering and updates at the end of text insert
styleObject Object Style to be inserted for the new char
Source:

insertChars(_chars, useCopiedStyle)

Inserts characters where cursor is (replacing selection if one exists)
Parameters:
Name Type Description
_chars String Characters to insert
useCopiedStyle Boolean use fabric.copiedTextStyle
Source:

insertCharStyleObject(lineIndex, charIndex, styleopt)

Inserts style object for a given line/char index
Parameters:
Name Type Attributes Description
lineIndex Number Index of a line
charIndex Number Index of a char
style Object <optional>
Style object to insert, if given
Source:

insertCharStyleObject(lineIndex, charIndex, styleopt)

Inserts style object for a given line/char index
Parameters:
Name Type Attributes Description
lineIndex Number Index of a line
charIndex Number Index of a char
style Object <optional>
Style object to insert, if given
Source:

insertNewline()

Inserts new line
Source:

insertNewlineStyleObject(lineIndex, charIndex, isEndOfLine)

Inserts new style object
Parameters:
Name Type Description
lineIndex Number Index of a line
charIndex Number Index of a char
isEndOfLine Boolean True if it's end of line
Source:

insertNewlineStyleObject(lineIndex, charIndex, isEndOfLine)

Inserts new style object
Parameters:
Name Type Description
lineIndex Number Index of a line
charIndex Number Index of a char
isEndOfLine Boolean True if it's end of line
Source:

insertStyleObjects(_chars, isEndOfLine, styleObjectopt)

Inserts style object(s)
Parameters:
Name Type Attributes Description
_chars String Characters at the location where style is inserted
isEndOfLine Boolean True if it's end of line
styleObject Object <optional>
Style 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(controlName) → {Boolean}

Returns true if the specified control is visible, false otherwise.
Parameters:
Name Type Description
controlName String The name 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()

Returns true if object has no styling
Overrides:
Source:

isOnScreen(calculateopt) → {Boolean}

Checks if object is contained within the canvas with current viewportTransform the check is done stopping at first point that appear on screen
Parameters:
Name Type Attributes Description
calculate Boolean <optional>
use coordinates of current position instead of .oCoords
Inherited From:
Source:
Returns:
true if object is fully 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

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

off(eventName, handler) → {Self}

Stops event observing for a particular event handler. Calling this method without arguments removes all handlers for all events
Parameters:
Name Type Description
eventName String | Object Event name (eg. 'after:render') or object with key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler})
handler function Function to be deleted from EventListeners
Mixes In:
Deprecated:
  • `stopObserving` deprecated since 0.8.34 (use `off` instead)
Source:
Returns:
thisArg
Type
Self

on(eventName, handler) → {Self}

Observes specified event
Parameters:
Name Type Description
eventName String | Object Event name (eg. 'after:render') or object with key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler})
handler function Function that receives a notification when an event of the specified type occurs
Mixes In:
Deprecated:
  • `observe` deprecated since 0.8.34 (use `on` instead)
Source:
Returns:
thisArg
Type
Self

onCompositionEnd()

Composition end
Source:

onCompositionStart()

Composition start
Source:

onCompositionUpdate()

Composition update
Source:

onDeselect()

Callback; invoked right before object is about to go from active to inactive
Overrides:
Source:

onInput(e)

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

onKeyDown(e)

Handles keyup event
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:

paste(e)

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

remove() → {fabric.Object}

Removes object from canvas to which it was added last
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

removeChars(e)

Removes characters selected by selection
Parameters:
Name Type Description
e Event Event object
Source:

removeStyleObject(isBeginningOfLine, indexopt)

Removes style object
Parameters:
Name Type Attributes Description
isBeginningOfLine Boolean True if cursor is at the beginning of line
index Number <optional>
Optional index. When not given, current selectionStart is used.
Source:

removeStyleObject(isBeginningOfLine, indexopt)

Removes style object
Parameters:
Name Type Attributes Description
isBeginningOfLine Boolean True if cursor is at the beginning of line
index Number <optional>
Optional index. When not given, current selectionStart is used.
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)
Source:

renderSelection(chars, boundaries, ctx)

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

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) → {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
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

scaleToWidth(value) → {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
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()

Selects entire text
Source:

selectLine(selectionStart)

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

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

setAngle(angle) → {fabric.Object}

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

setClipTo(clipTo) → {fabric.Object}

Sets object's clipping function
Parameters:
Name Type Description
clipTo function Clipping function
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

setColor(color) → {fabric.Object}

Sets "color" of an instance (alias of `set('fill', …)`)
Parameters:
Name Type Description
color String Color value
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(controlName, visible) → {fabric.Object}

Sets the visibility of the specified control.
Parameters:
Name Type Description
controlName String The name 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(ignoreZoomopt, skipAbsoluteopt) → {fabric.Object}

Sets corner position coordinates based on current angle, width and height See https://github.com/kangax/fabric.js/wiki/When-to-call-setCoords
Parameters:
Name Type Attributes Description
ignoreZoom Boolean <optional>
set oCoords with or without the viewport transform.
skipAbsolute Boolean <optional>
skip calculation of aCoords, usefull in setViewportTransform
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:

setFill(value) → {fabric.Object}

Sets object's fill
Parameters:
Name Type Description
value String Fill value
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

setFlipX(value) → {fabric.Object}

Sets object's flipX value
Parameters:
Name Type Description
value Boolean flipX value
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

setFlipY(value) → {fabric.Object}

Sets object's flipY value
Parameters:
Name Type Description
value Boolean flipY value
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

setFontFamily(fontFamily) → {fabric.Text}

Sets object's fontFamily Does not update the object .width and .height, call ._initDimensions() to update the values.
Parameters:
Name Type Description
fontFamily String Font family
Inherited From:
Source:
Returns:
Type
fabric.Text

setFontSize(fontSize) → {fabric.Text}

Sets object's fontSize Does not update the object .width and .height, call ._initDimensions() to update the values.
Parameters:
Name Type Description
fontSize Number Font size (in pixels)
Inherited From:
Source:
Returns:
Type
fabric.Text

setFontStyle(fontStyle) → {fabric.Text}

Sets object's fontStyle Does not update the object .width and .height, call ._initDimensions() to update the values.
Parameters:
Name Type Description
fontStyle String Font style
Inherited From:
Source:
Returns:
Type
fabric.Text

setFontWeight(fontWeight) → {fabric.Text}

Sets object's fontWeight Does not update the object .width and .height, call ._initDimensions() to update the values.
Parameters:
Name Type Description
fontWeight Number | String Font weight
Inherited From:
Source:
Returns:
Type
fabric.Text

setGradient(property, optionsopt) → {fabric.Object}

Sets gradient (fill or stroke) of an object Backwards incompatibility note: This method was named "setGradientFill" until v1.1.0
Parameters:
Name Type Attributes Description
property String Property name 'stroke' or 'fill'
options Object <optional>
Options object
Properties
Name Type Attributes Default Description
type String <optional>
Type of gradient 'radial' or 'linear'
x1 Number <optional>
0 x-coordinate of start point
y1 Number <optional>
0 y-coordinate of start point
x2 Number <optional>
0 x-coordinate of end point
y2 Number <optional>
0 y-coordinate of end point
r1 Number <optional>
0 Radius of start point (only for radial gradients)
r2 Number <optional>
0 Radius of end point (only for radial gradients)
colorStops Object <optional>
Color stops object eg. {0: 'ff0000', 1: '000000'}
gradientTransform Object <optional>
transforMatrix for gradient
Inherited From:
Source:
See:
Returns:
thisArg
Type
fabric.Object
Examples

Set linear gradient

object.setGradient('fill', {
  type: 'linear',
  x1: -object.width / 2,
  y1: 0,
  x2: object.width / 2,
  y2: 0,
  colorStops: {
    0: 'red',
    0.5: '#005555',
    1: 'rgba(0,0,255,0.5)'
  }
});
canvas.renderAll();

Set radial gradient

object.setGradient('fill', {
  type: 'radial',
  x1: 0,
  y1: 0,
  x2: 0,
  y2: 0,
  r1: object.width / 2,
  r2: 10,
  colorStops: {
    0: 'red',
    0.5: '#005555',
    1: 'rgba(0,0,255,0.5)'
  }
});
canvas.renderAll();

setLeft(value) → {fabric.Object}

Sets object's left position
Parameters:
Name Type Description
value Number Left value (in pixels)
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

setLineHeight(lineHeight) → {fabric.Text}

Sets object's lineHeight
Parameters:
Name Type Description
lineHeight Number Line height
Inherited From:
Source:
Returns:
Type
fabric.Text

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:

setOpacity(value) → {fabric.Object}

Sets object's opacity
Parameters:
Name Type Description
value Number Opacity value (0-1)
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

setOptions(optionsopt)

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

setOriginX(value) → {fabric.Object}

Sets object's originX
Parameters:
Name Type Description
value String originX value
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

setOriginY(value) → {fabric.Object}

Sets object's originY
Parameters:
Name Type Description
value String originY value
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

setPatternFill(options) → {fabric.Object}

Sets pattern fill of an object
Parameters:
Name Type Description
options Object Options object
Properties
Name Type Attributes Default Description
source String | HTMLImageElement Pattern source
repeat String <optional>
repeat Repeat property of a pattern (one of repeat, repeat-x, repeat-y or no-repeat)
offsetX Number <optional>
0 Pattern horizontal offset from object's left/top corner
offsetY Number <optional>
0 Pattern vertical offset from object's left/top corner
Inherited From:
Source:
See:
Returns:
thisArg
Type
fabric.Object
Example

Set pattern

fabric.util.loadImage('http://fabricjs.com/assets/escheresque_ste.png', function(img) {
  object.setPatternFill({
    source: img,
    repeat: 'repeat'
  });
  canvas.renderAll();
});

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

setScaleX(value) → {fabric.Object}

Sets object's scaleX value
Parameters:
Name Type Description
value Number scaleX value
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

setScaleY(value) → {fabric.Object}

Sets object's scaleY value
Parameters:
Name Type Description
value Number scaleY value
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

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 ne postion of cursor mimic the key - mouse navigation when shift is pressed.
Source:

setSelectionStyles(stylesopt) → {fabric.IText}

Sets style of a current selection
Parameters:
Name Type Attributes Description
styles Object <optional>
Styles object
Source:
Returns:
thisArg
Type
fabric.IText

setShadow(optionsopt) → {fabric.Object}

Sets shadow of an object
Parameters:
Name Type Attributes Description
options Object | String <optional>
Options object or string (e.g. "2px 2px 10px rgba(0,0,0,0.2)")
Properties
Name Type Attributes Default Description
color String <optional>
rgb(0,0,0) Shadow color
blur Number <optional>
0 Shadow blur
offsetX Number <optional>
0 Shadow horizontal offset
offsetY Number <optional>
0 Shadow vertical offset
Inherited From:
Source:
See:
Returns:
thisArg
Type
fabric.Object
Examples

Set shadow with string notation

object.setShadow('2px 2px 10px rgba(0,0,0,0.2)');
canvas.renderAll();

Set shadow with object notation

object.setShadow({
  color: 'red',
  blur: 10,
  offsetX: 20,
  offsetY: 20
});
canvas.renderAll();

setSourcePath(value) → {fabric.Object}

Sets sourcePath of an object
Parameters:
Name Type Description
value String Value to set sourcePath to
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

setStroke(value) → {fabric.Object}

Sets object's stroke
Parameters:
Name Type Description
value String stroke value
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

setStrokeWidth(value) → {fabric.Object}

Sets object's strokeWidth
Parameters:
Name Type Description
value Number strokeWidth value
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

setText(text) → {fabric.Text}

Sets object's text Does not update the object .width and .height, call ._initDimensions() to update the values.
Parameters:
Name Type Description
text String Text
Inherited From:
Source:
Returns:
Type
fabric.Text

setTextAlign(textAlign) → {fabric.Text}

Sets object's textAlign
Parameters:
Name Type Description
textAlign String Text alignment
Inherited From:
Source:
Returns:
Type
fabric.Text

setTextBackgroundColor(textBackgroundColor) → {fabric.Text}

Sets object's textBackgroundColor
Parameters:
Name Type Description
textBackgroundColor String Text background color
Inherited From:
Source:
Returns:
Type
fabric.Text

setTextDecoration(textDecoration) → {fabric.Text}

Sets object's textDecoration
Parameters:
Name Type Description
textDecoration String Text decoration
Inherited From:
Source:
Returns:
Type
fabric.Text

setTop(value) → {fabric.Object}

Sets object's top position
Parameters:
Name Type Description
value Number Top value (in pixels)
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

setTransformMatrix(transformMatrix) → {fabric.Object}

Sets object's transformMatrix
Parameters:
Name Type Description
transformMatrix Array
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

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

setVisible(value) → {fabric.Object}

Sets object's visible state
Parameters:
Name Type Description
value Boolean visible value
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Object

shiftLineStyles(lineIndex, offset)

Shifts line styles up or down. This function is slightly different than the one in itext_behaviour as it takes into account the styleMap.
Parameters:
Name Type Description
lineIndex Number Index of a line
offset Number Can be -1 or +1
Source:

shiftLineStyles(lineIndex, offset)

Shifts line styles up or down
Parameters:
Name Type Description
lineIndex Number Index of a line
offset Number Can be -1 or +1
Source:

shouldCache() → {Boolean}

Decide if the object should cache or not. 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.
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

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
enableRetina Boolean <optional>
Enable retina scaling for clone image. Introduce in 1.6.4
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
Overrides:
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, fromLeft)

Transforms context when rendering an object
Parameters:
Name Type Description
ctx CanvasRenderingContext2D Context
fromLeft Boolean When true, context is transformed to object's top/left corner. This is used when rendering text on Node
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 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
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

trigger(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:
Deprecated:
  • `fire` deprecated since 1.0.7 (use `trigger` instead)
Source:
Returns:
thisArg
Type
Self

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