Optional__keeps the value of the last hovered corner during mouse move. 0 is no corner, or 'mt', 'ml', 'mtr' etc.. It should be private, but there is no harm in using it as a read-only property. this isn't cleaned automatically. Non selected objects may have wrong values
a map of control visibility for this object. this was left when controls were introduced to not break the api too much this takes priority over the generic control visibility
Optional_A boolean used from the gesture module to keep tracking of a scaling action when there is no scaling transform in place. This is an edge case and is used twice in all codebase. Probably added to keep track of some performance issues
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
Describe object's corner position in scene coordinates. The coordinates are derived from the following: left, top, width, height, scaleX, scaleY, skewX, skewY, angle, strokeWidth. The coordinates do not depend on viewport changes. The coordinates get updated with setCoords. You can calculate them without updating with ()
Angle of rotation of an object (in degrees)
Background color of an object. takes css colors https://www.w3.org/TR/css-color-3/
Color of controlling borders of an object (when it's active)
Array specifying dash pattern of an object's borders (hasBorder must be true)
Opacity of object's controlling borders when object is active and moving
Scale factor for the border of the objects ( selection box and controls stroke ). Bigger number will make a thicker border border default value is 1, so this scale value is equal to a border and control strokeWidth. If you need to divide border from control strokeWidth you will need to write your own render function for controls
When true the object will rotate on its center.
When false will rotate around the origin point defined by originX and originY.
The value of this property is IGNORED during a transform if the canvas has already
centeredRotation set to true
The object method rotate will always consider this property and never the canvas's one.
When true, this object will use center point as the origin of transformation when being scaled via the controls.
OptionalclipOptionalclipWhen an object is being exported as SVG as a clippath, a reference inside the SVG is needed. This reference is a UID in the fabric namespace and is temporary stored here.
holds the controls for the object. controls are added by default_controls.js
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' This is deprecated. In the future there will be a standard control render And you can swap it with one of the alternative proposed with the control api
OptionalcustomCustom properties for serialization
When set to true, object's cache will be rerendered next render call.
since 1.7.0
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
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
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
Object height
Default cursor value used when hovering over this object on canvas
OptionalidUnique identifier
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
Optionalisinternal boolean to signal the code that the object is part of the move action.
Left position of an object. Note that by default it's relative to object left. You can change this by setting FabricObject#originX
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
Optionalmatrixstorage cache for object full transform matrix
Minimum allowed scale value of an object
Default cursor value used when moving this object on canvas
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
When true, object is cached on an additional canvas.
When false, object is not cached unless necessary ( clipPath )
default to true
The object's controls' position in viewport coordinates
Calculated by Control#positionHandler and Control#calcCornerCoords, depending on padding.
corner/touchCorner describe the 4 points forming the interactive area of the corner.
Used to draw and locate controls.
Opacity of an object
Optionalownstorage cache 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")
OptionalparentA reference to the parent of the object
Used to keep the original parent ref when the object has been added to an ActiveSelection, hence loosing the group ref
When set to true, objects are "found" on canvas on per-pixel basis rather than according to bounding box
OptionalremoteWhether this object was received from a remote user
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.
Angle of skew on x axes of an object (in degrees)
Angle of skew on y axes of an object (in degrees)
OptionalsnapThe angle that an object will lock to while rotating.
OptionalsnapThe angle difference from the current snapped angle in which snapping should occur. When undefined, the snapThreshold will default to the snapAngle.
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 "bevel", "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.
this Property does not work on Text classes or drawing call that uses strokeText,fillText methods
default to false
Width of a stroke used to render this object
Top position of an object. Note that by default it's relative to object top. You can change this by setting FabricObject#originY
Size of object's controlling corners when touch interaction is detected
When true, object's controlling corners are rendered as transparent inside (i.e. stroke instead of fill)
When set to false, an object is not rendered on canvas
Object width
Legacy identifier of the class. Prefer using utils like isType or instanceOf Will be removed in fabric 7 or 8. The setter exists to avoid type errors in old code and possibly current deserialization code. DO NOT build new code around this type value
Prepare clipPath state and cache and draw it on instance's cache
Limit the cache dimensions so that X * Y do not cross config.perfLimitSizeTotal and each side do not cross fabric.cacheSideLimit those numbers are configurable so that you can get as much detail as you want making bargain with performances.
.width width of canvas
Remove cacheCanvas and its dimensions from the objects
Protected_ProtectedHandles setting values on the instance and handling internal side effects
Protected_ProtectedSets object's properties from options, for initialization only
Optionaloptions: anyOptions object
Sets canvas globalCompositeOperation for specific object custom composition operation for the particular object can be specified using globalCompositeOperation property
Rendering canvas context
Returns svg representation of an instance This function is implemented in each subclass This is just because typescript otherwise cryies all the time
Optional_reviver: TSVGReviveran array of strings with the specific svg representation of the instance
Animates object's properties
map of animation contexts
As object — multiple properties
object.animate({ left: ..., top: ... }); object.animate({ left: ..., top: ... }, { duration: ... });
Calculates the coordinates of the 4 corner of the bbox, in absolute coordinates. those never change with zoom or viewport changes.
Calculates the coordinates of the center of each control plus the corners of the control itself This basically just delegates to each control positionHandler WARNING: changing what is passed to positionHandler is a breaking change, since position handler is a public api and should be done just if extremely necessary
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 transform matrix that represents the current transformations from the object's properties.
OptionalskipGroup: booleanreturn transform matrix for object not counting parent transformations There are some situation in which this is useful to avoid the fake rotation.
transform matrix for the object
Override to customize drag and drop behavior
true if the object currently dragged can be dropped on the target
Clears the canvas.contextTop in a specific area that corresponds to the object's bounding box that is in the canvas.contextContainer. This function is used to clear pieces of contextTop where we render ephemeral effects on top of the object. Example: blinking cursor text selection, drag effects.
OptionalrestoreManually: booleanWhen true won't restore the context after clear, in order to draw something else.
canvas.contextTop that is either still transformed with the object transformMatrix, or restored to neutral transform
Clones an instance.
OptionalpropertiesToInclude: string[]Any properties that you might want to additionally include in the output
Creates an instance of Image out of an object makes use of toCanvasElement. Once this method was based on toDataUrl and loadImage, so it also had a quality and format option. toCanvasElement is faster and produce no loss of quality. If you need to get a real Jpeg or Png from an object, using toDataURL is the right way to do it. toCanvasElement and then toBlob from the obtained canvas is also a good option.
Optionaloptions: ObjectToCanvasElementOptionsfor clone as image, passed to toDataURL
Multiplier to scale by
Cropping left offset. Introduced in v1.2.14
Cropping top offset. Introduced in v1.2.14
Cropping width. Introduced in v1.2.14
Cropping height. Introduced in v1.2.14
Enable retina scaling for clone image. Introduce in 1.6.4
Remove current object transform ( no scale , no angle, no flip, no skew ). Introduced in 2.3.4
Remove current object shadow. Introduced in 2.4.2
Object cloned as image.
Returns complexity of an instance
complexity of this instance (is 1 unless subclassed)
Checks if point is inside the object
Point to check against
true if point is inside the object
cancel instance's running animations
override if necessary to dispose artifacts such as clipPath
Draws borders of an object's bounding box. Requires public properties: width, height Requires public options: padding, borderColor
Context to draw on
object representing current object parameters
OptionalstyleOverride: TStyleOverrideobject to override the object style
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 Be aware that since fabric 6.0 this function does not call setCoords anymore. setCoords needs to be called manually if the object of which we are rendering controls is outside the standard selection and transform process.
Context to draw on
OptionalstyleOverride: Partial<object to override the object style
Draws lines from a borders of an object's bounding box to controls that have withConnection property set.
Requires public properties: width, height
Requires public options: padding, borderColor
Context to draw on
object size x = width, y = height
Execute the drawing operation for an object on a specified context
Context to render on
apply clipping styles
additional context for rendering
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
Compare ancestors
an object that represent the ancestry situation.
Calls a function for each control. The function gets called, with the control, the control's key and the object that is calling the iterator
function to iterate over the controls over
Basic getter
Property name
value of a property
ancestors (excluding ActiveSelection) from bottom to top
Returns coordinates of object's bounding rectangle (left, top, width, height) the box is intended as aligned to axis of canvas.
Object with left, top, width, height properties
Returns the center coordinates of the object relative to canvas
[tl, tr, br, bl] in the scene plane
Return the object opacity counting also the group property
Return the object scale factor counting also the group scaling
Returns the position of the object as if it has a different origin. Take an object that has left, top set to 100, 100 with origin 'left', 'top'. Return the values of left top ( wrapped in a point ) that you would need to keep the same position if origin where different. Alternatively you can use this to also find which point in the parent plane is a specific origin ( where is the bottom right corner of my object? )
Horizontal origin: 'left', 'center' or 'right'
Vertical origin: 'top', 'center' or 'bottom'
Returns the center coordinates of the object relative to it's parent
x position according to object's FabricObject#originX property in parent's coordinate plane
if parent is canvas then this property is identical to getX
x,y position according to object's FabricObject#originX FabricObject#originY properties in parent's coordinate plane
y position according to object's FabricObject#originY property in parent's coordinate plane
if parent is canvas then this property is identical to getY
Returns id attribute for svg output
Returns filter for svg shadow
Returns styles-string for svg-export
OptionalskipShadow: booleana boolean to skip shadow filter output
Returns transform-string for svg-export
Optionalfull: booleanOptionaladditionalTransform: stringReturns the object angle relative to canvas counting also the group property
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 available
x position according to object's FabricObject#originX property in canvas coordinate plane
x position according to object's FabricObject#originX FabricObject#originY properties in canvas coordinate plane
y position according to object's FabricObject#originY property in canvas coordinate plane
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.
Boolean
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.
Boolean
Checks if object intersects with another object
Object to test
true if object intersects with another object
Checks if object intersects with the scene rect formed by TL and BR In this case the rect is meant aligned with the axis of the canvas. TL is the TOP LEFT point while br is the BOTTOM RIGHT point
Check if cache is dirty and if is dirty clear the context. This check has a big side effect, it changes the underlying cache canvas if necessary. Do not call this method on your own to check if the cache is dirty, because if it is, it is also going to wipe the cache. This is badly designed and needs to be fixed.
OptionalskipCanvas: booleanskip 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 the scene rect formed by TL and BR
Returns true if the specified control is visible, false otherwise.
The key of the control. Possible values are usually 'tl', 'tr', 'br', 'bl', 'ml', 'mt', 'mr', 'mb', 'mtr', but since the control api allow for any control name, can be any string.
true if the specified control is visible, false otherwise
Checks if object is descendant of target Should be used instead of Group.contains or StaticCanvas.contains for performance reasons
object to compare against
if objects do not share a common ancestor or they are strictly equal it is impossible to determine which is in front of the other; in such cases the function returns undefined
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
ProtectedisReturns true if any of the specified types is identical to the type of an instance
When returns true, force the object to have its own cache, even if it is inside a group
it may be needed when your object behave in a particular way on the cache and always needs
its own isolated canvas to render correctly.
Created to be overridden
since 1.7.12
Boolean
Unsubscribe all event listeners for eventname. Do not use this pattern. You could kill internal fabricJS events. We know we should have protected events for internal flows, but we don't have yet
event name (eg. 'after:render')
unsubscribe an event listener
event name (eg. 'after:render')
event listener to unsubscribe
unsubscribe event listeners
handlers key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler})
unsubscribe all event listeners
Observes specified event
disposer
Observes specified event once
disposer
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
Optional_options: {options sent from the upper functions
Override to customize Drag behavior
Fired once a drag session has started
true to handle the drag event
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
Optional_options: { e?: TPointerEvent }options sent from the upper functions
Optionale?: TPointerEventevent if the process is generated by an event
Renders an object on a specified context
Context to render on
Optionaloptions: anyOverride to customize drag and drop behavior render a specific effect when an object is the source of a drag event example: render the selection status for the part of text that is being dragged from a text object
Override to customize drag and drop behavior render a specific effect when an object is the target of a drag event used to show that the underly object can receive a drop, or to show how the object will change when dropping. example: show the cursor where the text is about to be dropped
Sets "angle" of an instance with centered rotation
Angle value (in degrees)
Scales an object (equally by x and y)
Scale factor
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
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 or object (if object, iterate over the object properties)
Optionalvalue: anyProperty value (if function, the value is passed into it and its return value is used as a new one)
Sets the visibility state of object controls, this is just a bulk option for setControlVisible;
Optionaloptions: Record<string, boolean>with an optional key per control example: {Boolean} [options.bl] true to enable the bottom-left control, false to disable it
Sets the visibility of the specified control. please do not use.
The key of the control. Possible values are 'tl', 'tr', 'br', 'bl', 'ml', 'mt', 'mr', 'mb', 'mtr'. but since the control api allow for any control name, can be any string.
true to set the specified control visible, false otherwise
set controls' coordinates as well See https://github.com/fabricjs/fabric.js/wiki/When-to-call-setCoords and http://fabricjs.com/fabric-gotchas
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.
ProtectedsetProtectedSets object's properties from options, for class constructor only. Needs to be overridden for different defaults.
Optionaloptions: Record<string, any>Options object
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'
x position according to object's FabricObject#originX property in parent's coordinate plane
if parent is canvas then this method is identical to setX
As setXY, but in current parent's coordinate plane (the current group if any or the canvas)
position according to object's FabricObject#originX FabricObject#originY properties in parent's coordinate plane
OptionaloriginX: TOriginXHorizontal origin: 'left', 'center' or 'right'
OptionaloriginY: TOriginYVertical origin: 'top', 'center' or 'bottom'
y position according to object's FabricObject#originY property in parent's coordinate plane
if parent is canvas then this property is identical to setY
x position according to object's FabricObject#originX property in canvas coordinate plane
Set an object position to a particular point, the point is intended in absolute ( canvas ) coordinate. You can specify FabricObject#originX and FabricObject#originY values, that otherwise are the object's current values.
position in scene coordinate plane
OptionaloriginX: TOriginXHorizontal origin: 'left', 'center' or 'right'
OptionaloriginY: TOriginYVertical origin: 'top', 'center' or 'bottom'
y position according to object's FabricObject#originY property in canvas coordinate plane
Decide if the object should cache or not. Create its own cache level objectCaching is a global flag, wins over everything needsItsOwnCache should be used when the object drawing method requires a cache step. Generally you do not cache objects in groups because the group outside is cached. Read as: cache if is needed, or if the feature is enabled but we are not already caching.
Override to customize Drag behavior Fired from Canvas#_onMouseMove
true in order for the window to start a drag session
override this function in order to customize the drawing of the control box, e.g. rounded corners, different border style.
ctx is rotated and translated so that (0,0) is at object's center
the control box size used
Optionaloptions: toDataURLOptionsConverts an object into a HTMLCanvas element
Optionaloptions: ObjectToCanvasElementOptionsOptions object
Multiplier to scale by
Cropping left offset. Introduced in v1.2.14
Cropping top offset. Introduced in v1.2.14
Cropping width. Introduced in v1.2.14
Cropping height. Introduced in v1.2.14
Enable retina scaling for clone image. Introduce in 1.6.4
Remove current object transform ( no scale , no angle, no flip, no skew ). Introduced in 2.3.4
Remove current object shadow. Introduced in 2.4.2
Account for canvas viewport transform
Create the output canvas
Returns DOM element
Returns svg clipPath representation of an instance
Optionalreviver: TSVGReviverMethod for further parsing of svg representation.
svg representation of an instance
Returns (dataless) object representation of an instance
OptionalpropertiesToInclude: any[]Any properties that you might want to additionally include in the output
Object representation of an instance
Converts an object into a data-url-like string
Optionaloptions: toDataURLOptionsOptions object
The format of the output image. Either "jpeg" or "png"
Quality level (0..1). Only used for jpeg.
Multiplier to scale by
Cropping left offset. Introduced in v1.2.14
Cropping top offset. Introduced in v1.2.14
Cropping width. Introduced in v1.2.14
Cropping height. Introduced in v1.2.14
Enable retina scaling for clone image. Introduce in 1.6.4
Remove current object transform ( no scale , no angle, no flip, no skew ). Introduced in 2.3.4
Remove current object shadow. Introduced in 2.4.2
Returns a data: URL containing a representation of the object in the format specified by options.format
Toggles specified property from true to false or from false to true
Property to toggle
Returns a JSON representation of an instance
JSON
Returns an object representation of an instance
OptionalpropertiesToInclude: any[]Any properties that you might want to additionally include in the output
Object representation of an instance
Returns a string representation of an instance
Returns svg representation of an instance
Optionalreviver: TSVGReviverMethod for further parsing of svg representation.
svg representation of an instance
Transforms context when rendering an object
Context
OptionalskipGroup: booleanTranslates 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)
The point which corresponds to the originX and originY params
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'
Extended Fabric.js object with whiteboard-specific properties