Group

fabric. Group

new Group()

Source:
Mixes In:
Tutorials:
See:
Group class

Extends

Members

__corner :number|string|any

Source:
Inherited From:
Default Value:
  • 0
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

absolutePositioned :boolean

Source:
Inherited From:
Default Value:
  • false
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

aCoords

Source:
Inherited From:
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();

angle :Number

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

backgroundColor :String

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

borderColor :String

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

borderDashArray :Array

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

borderOpacityWhenMoving :Number

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

borderScaleFactor :Number

Source:
Inherited From:
Default Value:
  • 1
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

cacheProperties :Array

Source:
Overrides:
Default Value:
  • []
Groups are container, do not render anything on theyr own, ence no cache properties
Type:
  • Array

centeredRotation :Boolean

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

centeredScaling :Boolean

Source:
Since:
  • 1.3.4
Inherited From:
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

clipPath :fabric.Object

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

colorProperties :Array

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

controls

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

cornerColor :String

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

cornerDashArray :Array

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

cornerSize :Number

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

cornerStrokeColor :String

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

cornerStyle :String

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

dirty :Boolean

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

evented :Boolean

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

excludeFromExport :Boolean

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

fill :String

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

fillRule :String

Source:
Inherited From:
Default Value:
  • nonzero
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

flipX :Boolean

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

flipY :Boolean

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

globalCompositeOperation :String

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

hasBorders :Boolean

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

hasControls :Boolean

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

height :Number

Source:
Inherited From:
Object height
Type:
  • Number

hoverCursor :String

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

includeDefaultValues :Boolean

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

inverted :boolean

Source:
Inherited From:
Default Value:
  • false
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

left :Number

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

lineCoords

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

lockMovementX :Boolean

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

lockMovementY :Boolean

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

lockRotation :Boolean

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

lockScalingFlip :Boolean

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

lockScalingX :Boolean

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

lockScalingY :Boolean

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

lockSkewingX :Boolean

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

lockSkewingY :Boolean

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

matrixCache

Source:
Inherited From:
storage for object full transform matrix

minScaleLimit :Number

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

moveCursor :String

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

noScaleCache :Boolean

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

objectCaching :Boolean

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

oCoords

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

opacity :Number

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

originX :String

Source:
Inherited From:
Default Value:
  • left
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

originY :String

Source:
Inherited From:
Default Value:
  • top
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

ownMatrixCache

Source:
Inherited From:
storage for object transform matrix

padding :Number

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

paintFirst :String

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

perPixelTargetFind :Boolean

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

scaleX :Number

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

scaleY :Number

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

selectable :Boolean

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

selectionBackgroundColor :String

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

shadow :fabric.Shadow

Source:
Inherited From:
Shadow object representing shadow of this shape
Type:

skewX :Number

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

skewY :Number

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

statefullCache :Boolean

Source:
Inherited From:
Default Value:
  • false
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

stateProperties :Array

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

stroke :String

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

strokeDashArray :Array

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

strokeDashOffset :Number

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

strokeLineCap :String

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

strokeLineJoin :String

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

strokeMiterLimit :Number

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

strokeUniform :Boolean

Source:
Since:
  • 2.6.0
Inherited From:
Default Value:
  • false
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. default to false
Type:
  • Boolean

strokeWidth :Number

Source:
Overrides:
Width of stroke
Type:
  • Number

subTargetCheck :Boolean

Source:
Indicates if click, mouseover, mouseout events & hoverCursor should also check for subtargets
Type:
  • Boolean

top :Number

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

touchCornerSize :Number

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

transparentCorners :Boolean

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

type :String

Source:
Overrides:
Default Value:
  • group
Type of an object
Type:
  • String

useSetOnGroup :Boolean

Source:
Since:
  • 2.0.0
setOnGroup is a method used for TextBox that is no more used since 2.0.0 The behavior is still available setting this boolean to true.
Type:
  • Boolean

visible :Boolean

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

width :Number

Source:
Inherited From:
Object width
Type:
  • Number

Methods

(static) fromObject(object, callbackopt)

Source:
Returns fabric.Group instance from an object representation
Parameters:
Name Type Attributes Description
object Object Object to create a group from
callback function <optional>
 Callback to invoke when an group instance is created

_calcRotateMatrix() → {Array}

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

_calcTranslateMatrix() → {Array}

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

_getCoords(absolute) → {Object}

Source:
Inherited From:
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
Returns:
{tl, tr, br, bl} points
Type
Object

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

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

_removeCacheCanvas()

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

_renderControls(ctx, styleOverrideopt)

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

_setupCompositeOperation(ctx)

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

_toSVG(reviveropt) → {String}

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

add(…object) → {Self}

Source:
Mixes In:
Adds objects to collection, Canvas or Group, then renders canvas (if `renderOnAddRemove` is not `false`). in case of Group no changes to bounding box are made. Objects should be instances of (or inherit from) fabric.Object Use of this function is highly discouraged for groups. you can add a bunch of objects with the add method but then you NEED to run a addWithUpdate call for the Group class or position/bbox will be wrong.
Parameters:
Name Type Attributes Description
object fabric.Object <repeatable>
 Zero or more fabric instances
Returns:
thisArg
Type
Self

addWithUpdate(object) → {fabric.Group}

Source:
Adds an object to a group; Then recalculates group's dimension, position.
Parameters:
Name Type Description
object Object
Returns:
thisArg
Type
fabric.Group

adjustPosition(to)

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

animate(property, value) → {fabric.Object}

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

bringForward(intersectingopt) → {fabric.Object}

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

bringToFront() → {fabric.Object}

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

calcCoords() → {Object}

Source:
Inherited From:
Deprecated:
  • Yes
Calculates and returns the .coords of an object. unused by the library, only for the end dev.
Returns:
Object with tl, tr, br, bl ....
Type
Object

calcOwnMatrix() → {Array}

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

calcTransformMatrix(skipGroupopt) → {Array}

Source:
Inherited From:
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.
Returns:
transform matrix for the object
Type
Array

center() → {fabric.Object}

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

centerH() → {fabric.Object}

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

centerV() → {fabric.Object}

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

clone(callback, propertiesToIncludeopt)

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

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

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

complexity() → {Number}

Source:
Overrides:
Mixes In:
Returns number representation of a collection complexity
Returns:
complexity
Type
Number

contains(object) → {Boolean}

Source:
Mixes In:
Returns true if collection contains an object
Parameters:
Name Type Description
object Object Object to check against
Returns:
`true` if collection contains an object
Type
Boolean

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

Source:
Inherited From:
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
Returns:
true if point is inside the object
Type
Boolean

destroy() → {fabric.Group}

Source:
Destroys a group (restoring state of its objects)
Returns:
thisArg
Type
fabric.Group

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

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

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

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

drawCacheOnCanvas(ctx)

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

drawClipPathOnCache(ctx)

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

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

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

drawObject(ctx)

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

drawSelectionBackground(ctx) → {fabric.Object}

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

forEachControl(fn)

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

forEachObject(callback, context) → {Self}

Source:
Mixes In:
Executes given function for each object in this group
Parameters:
Name Type Description
callback function Callback invoked with current object as first argument, index - as second and an array of all objects - as third. Callback is invoked in a context of Global Object (e.g. `window`) when no `context` argument is given
context Object Context (aka thisObject)
Returns:
thisArg
Type
Self

fxStraighten(callbacks) → {fabric.Object}

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

getBoundingRect(absoluteopt, calculateopt) → {Object}

Source:
Inherited From:
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
Returns:
Object with left, top, width, height properties
Type
Object

getCenterPoint() → {fabric.Point}

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

getCoords() → {Array}

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

getLocalPointer(e, pointeropt) → {Object}

Source:
Inherited From:
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)
Returns:
Coordinates of a pointer (x, y)
Type
Object

getObjectOpacity() → {Number}

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

getObjects(typeopt) → {Array}

Source:
Mixes In:
Returns an array of children objects of this instance Type parameter introduced in 1.3.10 since 2.3.5 this method return always a COPY of the array;
Parameters:
Name Type Attributes Description
type String <optional>
 When specified, only objects of this type are returned
Returns:
Type
Array

getObjectScaling() → {Object}

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

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

Source:
Inherited From:
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'
Returns:
Type
fabric.Point

getScaledHeight() → {Number}

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

getScaledWidth() → {Number}

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

getSvgCommons() → {String}

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

getSvgFilter() → {String}

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

getSvgSpanStyles(style, useWhiteSpace) → {String}

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

getSvgStyles() → {String}

Source:
Overrides:
Returns styles-string for svg-export, specific version for group
Returns:
Type
String

getSvgTextDecoration(style) → {String}

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

getSvgTransform(use) → {String}

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

getTotalObjectScaling() → {Object}

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

getViewportTransform() → {Array}

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

hasFill()

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

hasStateChanged(propertySetopt) → {Boolean}

Source:
Inherited From:
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
Returns:
true if instance' state has changed since `fabric.Object#saveState` was called
Type
Boolean

hasStroke()

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

initialize(objects, optionsopt, isAlreadyGroupedopt) → {Object}

Source:
Overrides:
Constructor
Parameters:
Name Type Attributes Description
objects Object Group objects
options Object <optional>
 Options object
isAlreadyGrouped Boolean <optional>
 if true, objects have been grouped already.
Returns:
thisArg
Type
Object

insertAt(object, index, nonSplicing) → {Self}

Source:
Mixes In:
Inserts an object into collection at specified index, then renders canvas (if `renderOnAddRemove` is not `false`) An object should be an instance of (or inherit from) fabric.Object Use of this function is highly discouraged for groups. you can add a bunch of objects with the insertAt method but then you NEED to run a addWithUpdate call for the Group class or position/bbox will be wrong.
Parameters:
Name Type Description
object Object Object to insert
index Number Index to insert object at
nonSplicing Boolean When `true`, no splicing (shifting) of objects occurs
Returns:
thisArg
Type
Self

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

Source:
Inherited From:
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
Returns:
true if object intersects with another object
Type
Boolean

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

Source:
Inherited From:
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
Returns:
true if object intersects with an area formed by 2 points
Type
Boolean

isCacheDirty()

Source:
Overrides:
Check if cache is dirty

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

Source:
Inherited From:
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
Returns:
true if object is fully contained within area of another object
Type
Boolean

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

Source:
Inherited From:
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
Returns:
true if object is fully contained within area formed by 2 points
Type
Boolean

isControlVisible(controlKey) → {Boolean}

Source:
Inherited From:
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'.
Returns:
true if the specified control is visible, false otherwise
Type
Boolean

isEmpty() → {Boolean}

Source:
Mixes In:
Returns true if collection contains no objects
Returns:
true if collection is empty
Type
Boolean

isOnACache() → {Boolean}

Source:
Check if this group or its parent group are caching, recursively up
Returns:
Type
Boolean

isOnScreen(calculateopt) → {Boolean}

Source:
Inherited From:
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
Returns:
true if object is fully or partially contained within canvas
Type
Boolean

isPartiallyOnScreen(calculateopt) → {Boolean}

Source:
Inherited From:
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
Returns:
true if object is partially contained within canvas
Type
Boolean

isType(type) → {Boolean}

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

item(index) → {Self}

Source:
Mixes In:
Returns object at specified index
Parameters:
Name Type Description
index Number
Returns:
thisArg
Type
Self

moveTo(index) → {fabric.Object}

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

needsItsOwnCache()

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

onDeselect(optionsopt)

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

onSelect(optionsopt)

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

remove(…object) → {Self}

Source:
Mixes In:
Removes objects from a collection, then renders canvas (if `renderOnAddRemove` is not `false`)
Parameters:
Name Type Attributes Description
object fabric.Object <repeatable>
 Zero or more fabric instances
Returns:
thisArg
Type
Self

removeWithUpdate(object) → {fabric.Group}

Source:
Removes an object from a group; Then recalculates group's dimension, position.
Parameters:
Name Type Description
object Object
Returns:
thisArg
Type
fabric.Group

render(ctx)

Source:
Overrides:
Renders instance on a given context
Parameters:
Name Type Description
ctx CanvasRenderingContext2D context to render instance on

rotate(angle) → {fabric.Object}

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

saveState(optionsopt) → {fabric.Object}

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

scale(value) → {fabric.Object}

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

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

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

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

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

sendBackwards(intersectingopt) → {fabric.Object}

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

sendToBack() → {fabric.Object}

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

setControlsVisibility(optionsopt) → {fabric.Object}

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

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

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

setCoords(skipCornersopt) → {fabric.Object}

Source:
Inherited From:
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 When-to-call-setCoords
Parameters:
Name Type Attributes Description
skipCorners Boolean <optional>
 skip calculation of oCoords.
Returns:
thisArg
Type
fabric.Object

setObjectsCoords() → {fabric.Group}

Source:
Sets coordinates of all objects inside group
Returns:
thisArg
Type
fabric.Group

setOnGroup()

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

setOptions(optionsopt)

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

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

Source:
Inherited From:
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'
Returns:
Type
void

setupState(optionsopt) → {fabric.Object}

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

shouldCache() → {Boolean}

Source:
Overrides:
Decide if the object should cache or not. Create its own cache level 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 is already cached.
Returns:
Type
Boolean

size() → {Number}

Source:
Mixes In:
Returns a size of a collection (i.e: length of an array containing its objects)
Returns:
Collection size
Type
Number

straighten() → {fabric.Object}

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

toActiveSelection() → {fabric.ActiveSelection}

Source:
make a group an active selection, remove the group from canvas the group has to be on canvas for this to work.
Returns:
thisArg
Type
fabric.ActiveSelection

toCanvasElement(options) → {HTMLCanvasElement}

Source:
Inherited From:
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
Returns:
Returns DOM element with the fabric.Object
Type
HTMLCanvasElement

toClipPathSVG(reviveropt) → {String}

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

toDatalessObject(propertiesToIncludeopt) → {Object}

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

toDataURL(options) → {String}

Source:
Inherited From:
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
Returns:
Returns a data: URL containing a representation of the object in the format specified by options.format
Type
String

toJSON(propertiesToIncludeopt) → {Object}

Source:
Inherited From:
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
Returns:
JSON
Type
Object

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

Source:
Inherited From:
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'
Returns:
Type
fabric.Point

toObject(propertiesToIncludeopt) → {Object}

Source:
Overrides:
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
Returns:
object representation of an instance
Type
Object

toString() → {String}

Source:
Overrides:
Returns string represenation of a group
Returns:
Type
String

toSVG(reviveropt) → {String}

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

transform(ctx)

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

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

Source:
Inherited From:
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'
Returns:
Type
fabric.Point

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

Source:
Inherited From:
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'
Returns:
Type
fabric.Point

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

Source:
Inherited From:
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'
Returns:
Type
fabric.Point

ungroupOnCanvas() → {fabric.Group}

Source:
Destroys a group (restoring state of its objects)
Returns:
thisArg
Type
fabric.Group

viewportCenter() → {fabric.Object}

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

viewportCenterH() → {fabric.Object}

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

viewportCenterV() → {fabric.Object}

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

willDrawShadow() → {Boolean}

Source:
Overrides:
Check if this object or a child object will cast a shadow
Returns:
Type
Boolean