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
Angle of rotation of an object (in degrees)
Is running animation
Animation property
Anime instance
Background color of an object. Only works with text objects at the moment.
Color of controlling borders of an object (when it's active)
Array specifying dash pattern of an object's border (hasBorder must be true)
Opacity of object's controlling borders when object is active and moving
Scale factor of object's controlling borders
List of properties to consider when checking if cache needs refresh Those properties are checked by statefullCache ON ( or lazy mode if we want ) or from single calls to Object.set(key, value). If the key is in this list, the object is marked as dirty and refreshed at the next render
The canvas the object belongs to
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).
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).
Object class
Whether it can be clicked
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'
Is possible clone
Color of controlling corners of an object (when it's active)
Array specifying dash pattern of an object's control (hasBorder must be true)
Size of object's controlling corners (in pixels)
Color of controlling corners of an object (when it's active and transparentCorners false)
Specify style of control, 'rect' or 'circle'
Not used by fabric, just for convenience
Is enable double click
Is possible delete
When set to true, object's cache will be rerendered next render call.
Object editable
When set to false, an object can not be a target of events. All events propagate through it. Introduced in v1.3.4
When true, object is not exported in OBJECT/JSON
since 1.6.3
Color of object's fill
Fill rule used to fill an object
accepted values are nonzero, evenodd
Backwards incompatibility note: This property was used for setting globalCompositeOperation until v1.4.12, use globalCompositeOperation instead
When true, an object is rendered as flipped horizontally
When true, an object is rendered as flipped vertically
Composite rule used for canvas globalCompositeOperation
The group the object is part of
When set to false, object's controlling borders are not rendered
When set to false, object's controls are not displayed and can not be used to manipulate object
When set to false, object's controlling rotating point will not be visible or selectable
Object height
Default cursor value used when hovering over this object on canvas
Object id
When false, default object's values are not included in its serialization
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
Left position of an object. Note that by default it's relative to object center. You can change this by setting originX={left/center/right}
Link property
When true, object horizontal movement is locked
When true, object vertical movement is locked
When true, object rotation is locked
When true, object cannot be flipped by scaling into negative values
When true, object horizontal scaling is locked
When true, object vertical scaling is locked
When true, object horizontal skewing is locked
When true, object vertical skewing is locked
When true, object non-uniform scaling is locked
Is locked object
storage for object full transform matrix
Minimum allowed scale value of an object
Default cursor value used when moving an object on canvas
Not used by fabric, just for convenience
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
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;
When true, object is cached on an additional canvas.
Opacity of an object
Original angle
Original fill color
Original left position
Original opacity
Original rotation
Original scale X
Original scale Y
Original stroke color
Original top position
Horizontal origin of transformation of an object (one of "left", "right", "center")
Vertical origin of transformation of an object (one of "top", "bottom", "center")
storage for object transform matrix
Padding between object and its controlling borders (in pixels)
Determines if the fill or the stroke is drawn first (one of "fill" or "stroke")
Parent object id
When set to true, objects are "found" on canvas on per-pixel basis rather than according to bounding box
Offset for object's controlling rotating point (when enabled via hasRotatingPoint)
This property replaces "angle"
Object scale factor (horizontal)
Object scale factor (vertical)
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.
Selection Background color of an object. colored layer behind the object when it is active. does not mix good with globalCompositeOperation methods.
Shadow object representing shadow of this shape
Object skew factor (horizontal)
Object skew factor (vertical)
Indicates the angle that an object will lock to while rotating. Can get from canvas.
Indicates the distance from the snapAngle the rotation will lock to the snapAngle. Can get from canvas.
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
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
When defined, an object is rendered via stroke and this property specifies its color
Array specifying dash pattern of an object's stroke (stroke must be defined)
Line offset of an object's stroke
Line endings style of an object's stroke (one of "butt", "round", "square")
Corner style of an object's stroke (one of "bevil", "round", "miter")
Maximum miter length (used for strokeLineJoin = "miter") of an object's stroke
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
Width of a stroke used to render this object
Object Super type
Tooltip property
Top position of an object. Note that by default it's relative to object center. You can change this by setting originY={top/center/bottom}
When true, object's controlling corners are rendered as transparent inside (i.e. stroke instead of fill)
Type of an object (rect, circle, path, etc.). Note that this property is meant to be read-only and not meant to be modified. If you modify, certain parts of Fabric (such as JSON loading) won't work correctly.
When set to false, an object is not rendered on canvas
Object width
Defines the number of fraction digits to use when serializing object values.
Context to render on
fabric.Pattern or fabric.Gradient
offset.offsetX offset for text rendering
Determines which corner has been clicked
The pointer indicating the mouse position
corner code (tl, tr, bl, br, etc.), or false if nothing is found
Returns the instance of the control visibility set for this object.
Returns the top, left coordinates
Context to render on
Context to render on
Context to render on
Context to render on
Context to set the dash line on
array representing dashes
function to call if browser does not support lineDash
One of 'left', 'center', 'right'
Animates object's properties object.animate('left', ..., {duration: ...});
Property to animate
Value to animate property
The animation options
Animates object's properties object.animate({ left: ..., top: ... }, { duration: ... });
Properties to animate with values to animate to
The animation options
Moves an object up in stack of drawn objects
Moves an object to the top of the stack of drawn objects
Calculate and returns the .coords of an object.
Object with tl, tr, br, bl ....
calculate transform matrix that represents the current transformations from the object's properties, this matrix does not include the group transformation
transform matrix for the object
calculate trasform Matrix that represent current transformation from object properties.
matrix Transform Matrix for the 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.
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.
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.
Clones an instance, using a callback method will work for every object.
Callback is invoked with a clone as a first argument
Creates an instance of fabric.Image out of an object
callback, invoked with an instance as a first argument
Returns complexity of an instance
Checks if point is inside the object
Point to check against
true if point is inside the object
Draws borders of an object's bounding box. Requires public properties: width, height Requires public options: padding, borderColor
Context to draw on
object to override the object style
thisArg
Draws borders of an object's bounding box when it is inside a group. Requires public properties: width, height Requires public options: padding, borderColor
Context to draw on
object representing current object parameters
object to override the object style
thisArg
Paint the cached copy of the object on the target context.
Context to render on
Execute the drawing operation for an object clipPath
Context to render on
Draws corners of an object's bounding box. Requires public properties: width, height Requires public options: cornerSize, padding
Context to draw on
object to override the object style
thisArg
Draws corners of an object's bounding box. Requires public properties: width, height Requires public options: cornerSize, padding
Execute the drawing operation for an object on a specified context
Context to render on
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
Context to draw on
thisArg
Fires event with an optional options object
Event name to fire
thisArg
Same as straighten but with animation
Basic getter
Property name
Returns coordinates of object's bounding rectangle (left, top, width, height) the box is intented as aligned to axis of canvas.
Object with left, top, width, height properties
Returns the real center coordinates of the object
return correct set of coordinates for intersection
Returns coordinates of a pointer relative to an object
Event to operate upon
Return the object opacity counting also the group property
Return the object scale factor counting also the group scaling
object with scaleX and scaleY properties
Returns the coordinates of the object as if it has a different origin
Horizontal origin: 'left', 'center' or 'right'
Vertical origin: 'top', 'center' or 'bottom'
Returns height of an object bounding box counting transformations before 2.0 it was named getHeight();
height value
Returns width of an object bounding box counting transformations before 2.0 it was named getWidth();
width value
Returns id attribute for svg output
Returns filter for svg shadow
Returns styles-string for svg-export
the object from which to retrieve style properties
a boolean to include an additional attribute in the style.
Returns styles-string for svg-export
a boolean to skip shadow filter output
Returns text-decoration property for svg-export
the object from which to retrieve style properties
Returns transform-string for svg-export
Returns transform-string for svg-export from the transform matrix of single elements
Return the object scale factor counting also the group scaling, zoom and retina
object with scaleX and scaleY properties
Retrieves viewportTransform from Object's canvas if possible
Returns true if object state (one of its state properties) was changed
true if instance' state has changed since {@link fabric.Object#saveState} was called
Checks if object intersects with another object
Object to test
true if object intersects with another object
Checks if object intersects with an area formed by 2 points
top-left point of area
bottom-right point of area
true if object intersects with an area formed by 2 points
Check if cache is dirty
skip canvas checks because this object is painted on parent canvas.
Checks if object is fully contained within area of another object
Object to test
true if object is fully contained within area of another object
Checks if object is fully contained within area formed by 2 points
top-left point of area
bottom-right point of area
Returns true if the specified control is visible, false otherwise.
The name of the control. Possible values are 'tl', 'tr', 'br', 'bl', 'ml', 'mt', 'mr', 'mb', 'mtr'.
Checks if object is contained within the canvas with current viewportTransform the check is done stopping at first point that appears on screen
true if object is fully or partially contained within canvas
Checks if object is partially contained within the canvas with current viewportTransform
true if object is partially contained within canvas
Returns true if specified type is identical to the type of an instance
Type to check against
Moves an object to specified level in stack of drawn objects
New position of object
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
false
Stops event observing for a particular event handler. Calling this method without arguments removes all handlers for all events
Event name (eg. 'after:render') or object with key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler})
Function to be deleted from EventListeners
Observes specified event
Event name (eg. 'after:render')
Function that receives a notification when an event of the specified type occurs
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
true to cancel selection
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
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
Renders an object on a specified context
Context to render on
Sets "angle" of an instance
Angle value
Saves state of an object
thisArg
Scales an object (equally by x and y)
Scale factor
thisArg
Scales an object to a given height, with respect to bounding box (scaling by x/y equally)
New height value
Scales an object to a given width, with respect to bounding box (scaling by x/y equally)
New width value
Moves an object down in stack of drawn objects
Moves an object to the bottom of the stack of drawn objects
Sets property to a given value.
When changing position/dimension -related properties (left, top, scale, angle, etc.) set does not update position of object's borders/controls.
If you need to update those, call setCoords().
Property name
Property value (if function, the value is passed into it and its return value is used as a new one)
Sets property to a given value.
When changing position/dimension -related properties (left, top, scale, angle, etc.) set does not update position of object's borders/controls.
If you need to update those, call setCoords().
Property object, iterate over the object properties
Sets "angle" of an instance
Angle value
Sets the visibility of the specified control.
The name of the control. Possible values are 'tl', 'tr', 'br', 'bl', 'ml', 'mt', 'mr', 'mb', 'mtr'.
true to set the specified control visible, false otherwise
Sets the visibility state of object controls.
Sets corner position coordinates based on current angle, width and height. 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
thisArg
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.
Sets object's properties from options
Sets the position of the object taking into consideration the object's origin
The new position of the object
Horizontal origin: 'left', 'center' or 'right'
Vertical origin: 'top', 'center' or 'bottom'
Sets sourcePath of an object
Value to set sourcePath to
Sets sourcePath of an object
Value to set sourcePath to
Setups state of an object
thisArg
Decide if the object should cache or not. Create its own cache level objectCaching is a global flag, wins over everything needsItsOwnCache should be used when the object drawing method requires a cache step. None of the fabric classes requires it. Generally you do not cache objects in groups because the group outside is cached.
Straightens an object (rotating it from current angle to one of 0, 90, 180, 270, etc. depending on which is closer)
Converts an object into a HTMLCanvas element
Options object
Returns a new HTMLCanvasElement painted with the current canvas object
Returns svg clipPath representation of an instance
svg representation of an instance
Converts an object into a data-url-like string
Options object
Returns (dataless) object representation of an instance
Returns a JSON representation of an instance
Returns the point in local coordinates
The point relative to the global coordinate system
Horizontal origin: 'left', 'center' or 'right'
Vertical origin: 'top', 'center' or 'bottom'
Returns an object representation of an instance
Returns svg representation of an instance
svg representation of an instance
Returns a string representation of an instance
Toggles specified property from true to false or from false to true
Property to toggle
Transforms context when rendering an object
Context
Translates the coordinates from origin to center coordinates (based on the object's dimensions)
The point which corresponds to the originX and originY params
Horizontal origin: 'left', 'center' or 'right'
Vertical origin: 'top', 'center' or 'bottom'
Translates the coordinates from a set of origin to another (based on the object's dimensions)
Horizontal origin: 'left', 'center' or 'right'
Vertical origin: 'top', 'center' or 'bottom'
Horizontal origin: 'left', 'center' or 'right'
Vertical origin: 'top', 'center' or 'bottom'
Translates the coordinates from center to origin coordinates (based on the object's dimensions)
The point which corresponds to center of the object
Horizontal origin: 'left', 'center' or 'right'
Vertical origin: 'top', 'center' or 'bottom'
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.
thisArg
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.
thisArg
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.
thisArg
Check if this object or a child object will cast a shadow used by Group.shouldCache to know if child has a shadow recursively
Creates fabric Object instance
Generated using TypeDoc
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);
fabric.Object.prototype