ImageProps
Extends
FabricObjectProps.UniqueImageProps
Properties
absolutePositioned
absolutePositioned:
boolean
Meaningful ONLY when the object is used as clipPath. if true, the clipPath will have its top and left relative to canvas, and will not be influenced by the object transform. This will make the clipPath relative to the canvas, but clipping just a particular object. WARNING this is beta, this feature may change or be renamed. since 2.4.0
Default
falseInherited from
FabricObjectProps.absolutePositioned
Defined in
src/shapes/Object/types/SerializedObjectProps.ts:72
angle
angle:
TDegree
Angle of rotation of an object (in degrees)
Default
0Inherited from
Defined in
src/shapes/Object/types/BaseProps.ts:63
backgroundColor
backgroundColor:
string
Background color of an object. takes css colors https://www.w3.org/TR/css-color-3/
Default
Inherited from
FabricObjectProps.backgroundColor
Defined in
src/shapes/Object/types/SerializedObjectProps.ts:26
borderColor
borderColor:
string
Color of controlling borders of an object (when it’s active)
Default
rgb(178,204,255)Inherited from
Defined in
src/shapes/Object/types/BorderProps.ts:7
borderDashArray
borderDashArray:
null|number[]
Array specifying dash pattern of an object’s borders (hasBorder must be true)
Since
1.6.2
Inherited from
FabricObjectProps.borderDashArray
Defined in
src/shapes/Object/types/BorderProps.ts:15
borderOpacityWhenMoving
borderOpacityWhenMoving:
number
Opacity of object’s controlling borders when object is active and moving
Default
0.4Inherited from
FabricObjectProps.borderOpacityWhenMoving
Defined in
src/shapes/Object/types/BorderProps.ts:29
borderScaleFactor
borderScaleFactor:
number
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. Id you need to divide border from control strokeWidth you will need to write your own render function for controls
Default
1Inherited from
FabricObjectProps.borderScaleFactor
Defined in
src/shapes/Object/types/BorderProps.ts:40
canvas?
optionalcanvas:Canvas|StaticCanvas<StaticCanvasEvents>
Inherited from
Defined in
src/shapes/Object/types/ObjectProps.ts:20
centeredRotation
centeredRotation:
boolean
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.
Since
1.3.4
Default
Inherited from
FabricObjectProps.centeredRotation
Defined in
src/shapes/Object/types/ObjectTransformProps.ts:27
centeredScaling
centeredScaling:
boolean
When true, this object will use center point as the origin of transformation when being scaled via the controls.
Since
1.3.4
Default
Inherited from
FabricObjectProps.centeredScaling
Defined in
src/shapes/Object/types/ObjectTransformProps.ts:36
clipPath?
optionalclipPath:BaseFabricObject<Partial<ObjectProps>,SerializedObjectProps,ObjectEvents>
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’
Inherited from
Defined in
src/shapes/Object/types/ObjectProps.ts:16
cornerColor
cornerColor:
string
Color of controlling corners of an object (when it’s active)
Default
rgb(178,204,255)Inherited from
Defined in
src/shapes/Object/types/ControlProps.ts:28
cornerDashArray
cornerDashArray:
null|number[]
Array specifying dash pattern of an object’s control (hasBorder must be true)
Since
1.6.2
Default
nullInherited from
FabricObjectProps.cornerDashArray
Defined in
src/shapes/Object/types/ControlProps.ts:55
cornerSize
cornerSize:
number
Size of object’s controlling corners (in pixels)
Default
13Inherited from
Defined in
src/shapes/Object/types/ControlProps.ts:7
cornerStrokeColor
cornerStrokeColor:
string
Color of controlling corners of an object (when it’s active and transparentCorners false)
Since
1.6.2
Default
''Inherited from
FabricObjectProps.cornerStrokeColor
Defined in
src/shapes/Object/types/ControlProps.ts:36
cornerStyle
cornerStyle:
"circle"|"rect"
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
Since
1.6.2
Default
'rect'Inherited from
Defined in
src/shapes/Object/types/ControlProps.ts:47
cropX
cropX:
number
Inherited from
UniqueImageProps.cropX
Defined in
cropY
cropY:
number
Inherited from
UniqueImageProps.cropY
Defined in
evented
evented:
boolean
When set to false, an object can not be a target of events. All events propagate through it. Introduced in v1.3.4
Default
Inherited from
Defined in
src/shapes/Object/types/FabricObjectProps.ts:65
excludeFromExport
excludeFromExport:
boolean
When true, object is not exported in OBJECT/JSON
Since
1.6.3
Default
Inherited from
FabricObjectProps.excludeFromExport
Defined in
src/shapes/Object/types/ObjectProps.ts:52
fill
fill:
null|string|TFiller
Color of object’s fill takes css colors https://www.w3.org/TR/css-color-3/
Default
rgb(0,0,0)Inherited from
Defined in
src/shapes/Object/types/ObjectProps.ts:17
fillRule
fillRule:
CanvasFillRule
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)
Default
nonzeroInherited from
Defined in
src/shapes/Object/types/FillStrokeProps.ts:26
filters
filters:
BaseFilter<string,Record<string,any>,Record<string,any>>[]
Inherited from
UniqueImageProps.filters
Defined in
flipX
flipX:
boolean
When true, an object is rendered as flipped horizontally
Default
falseInherited from
Defined in
src/shapes/Object/types/BaseProps.ts:70
flipY
flipY:
boolean
When true, an object is rendered as flipped vertically
Default
falseInherited from
Defined in
src/shapes/Object/types/BaseProps.ts:77
globalCompositeOperation
globalCompositeOperation:
GlobalCompositeOperation
Composite rule used for canvas globalCompositeOperation
Default
Inherited from
FabricObjectProps.globalCompositeOperation
Defined in
src/shapes/Object/types/SerializedObjectProps.ts:18
hasBorders
hasBorders:
boolean
When set to false, object’s controlling borders are not rendered
Default
Inherited from
Defined in
src/shapes/Object/types/BorderProps.ts:22
hasControls
hasControls:
boolean
When set to false, object’s controls are not displayed and can not be used to manipulate object
Default
trueInherited from
Defined in
src/shapes/Object/types/ControlProps.ts:69
height
height:
number
Object height
Default
Inherited from
Defined in
src/shapes/Object/types/BaseProps.ts:34
hoverCursor
hoverCursor:
null|string
Default cursor value used when hovering over this object on canvas
Default
nullInherited from
Defined in
src/shapes/Object/types/FabricObjectProps.ts:27
imageSmoothing
imageSmoothing:
boolean
Inherited from
UniqueImageProps.imageSmoothing
Defined in
includeDefaultValues
includeDefaultValues:
boolean
When false, default object’s values are not included in its serialization
Default
Inherited from
FabricObjectProps.includeDefaultValues
Defined in
src/shapes/Object/types/ObjectProps.ts:44
inverted
inverted:
boolean
Meaningful ONLY when the object is used as clipPath. if true, the clipPath will make the object clip to the outside of the clipPath since 2.4.0
Default
falseInherited from
Defined in
src/shapes/Object/types/SerializedObjectProps.ts:60
left
left:
number
Left position of an object. Note that by default it’s relative to object left. You can change this by setting originX
Default
0Inherited from
Defined in
src/shapes/Object/types/BaseProps.ts:11
lockMovementX
lockMovementX:
boolean
When true, object horizontal movement is locked
Default
Inherited from
FabricObjectProps.lockMovementX
Defined in
src/shapes/Object/types/LockInteractionProps.ts:7
lockMovementY
lockMovementY:
boolean
When true, object vertical movement is locked
Default
Inherited from
FabricObjectProps.lockMovementY
Defined in
src/shapes/Object/types/LockInteractionProps.ts:14
lockRotation
lockRotation:
boolean
When true, object rotation is locked
Default
Inherited from
FabricObjectProps.lockRotation
Defined in
src/shapes/Object/types/LockInteractionProps.ts:21
lockScalingFlip
lockScalingFlip:
boolean
When true, object cannot be flipped by scaling into negative values
Default
Inherited from
FabricObjectProps.lockScalingFlip
Defined in
src/shapes/Object/types/LockInteractionProps.ts:56
lockScalingX
lockScalingX:
boolean
When true, object horizontal scaling is locked
Default
Inherited from
FabricObjectProps.lockScalingX
Defined in
src/shapes/Object/types/LockInteractionProps.ts:28
lockScalingY
lockScalingY:
boolean
When true, object vertical scaling is locked
Default
Inherited from
FabricObjectProps.lockScalingY
Defined in
src/shapes/Object/types/LockInteractionProps.ts:35
lockSkewingX
lockSkewingX:
boolean
When true, object horizontal skewing is locked
Default
Inherited from
FabricObjectProps.lockSkewingX
Defined in
src/shapes/Object/types/LockInteractionProps.ts:42
lockSkewingY
lockSkewingY:
boolean
When true, object vertical skewing is locked
Default
Inherited from
FabricObjectProps.lockSkewingY
Defined in
src/shapes/Object/types/LockInteractionProps.ts:49
minScaleLimit
minScaleLimit:
number
Minimum allowed scale value of an object
Default
0Inherited from
FabricObjectProps.minScaleLimit
Defined in
src/shapes/Object/types/ObjectProps.ts:27
minimumScaleTrigger
minimumScaleTrigger:
number
Inherited from
UniqueImageProps.minimumScaleTrigger
Defined in
moveCursor
moveCursor:
null|string
Default cursor value used when moving this object on canvas
Default
nullInherited from
Defined in
src/shapes/Object/types/FabricObjectProps.ts:34
noScaleCache?
optionalnoScaleCache:boolean
When true, cache does not get updated during scaling. The picture will get blocky if scaled
too much and will be redrawn with correct details at the end of scaling.
this setting is performance and application dependant.
default to true
since 1.7.0
Default
trueInherited from
FabricObjectProps.noScaleCache
Defined in
src/shapes/Object/types/FabricObjectProps.ts:20
objectCaching
objectCaching:
boolean
When true, object is cached on an additional canvas.
When false, object is not cached unless necessary ( clipPath )
default to true
Since
1.7.0
Default
trueInherited from
FabricObjectProps.objectCaching
Defined in
src/shapes/Object/types/ObjectProps.ts:37
opacity
opacity:
number
Opacity of an object
Default
1Inherited from
Defined in
src/shapes/Object/types/SerializedObjectProps.ts:11
originX
originX:
TOriginX
Horizontal origin of transformation of an object (left, center, right or [0, 1])
See http://jsfiddle.net/1ow02gea/244/ on how originX/originY affect objects in groups
Default
'left'Inherited from
Defined in
src/shapes/Object/types/BaseProps.ts:45
originY
originY:
TOriginY
Vertical origin of transformation of an object (top, center, bottom or [0, 1])
See http://jsfiddle.net/1ow02gea/244/ on how originX/originY affect objects in groups
Default
'top'Inherited from
Defined in
src/shapes/Object/types/BaseProps.ts:56
padding
padding:
number
Padding between object and its controlling borders (in pixels)
Default
0Inherited from
Defined in
src/shapes/Object/types/ControlProps.ts:62
paintFirst
paintFirst:
"fill"|"stroke"
Determines if the fill or the stroke is drawn first (one of “fill” or “stroke”)
Default
Inherited from
Defined in
src/shapes/Object/types/FillStrokeProps.ts:9
perPixelTargetFind
perPixelTargetFind:
boolean
When set to true, objects are “found” on canvas on per-pixel basis rather than according to bounding box
Default
Inherited from
FabricObjectProps.perPixelTargetFind
Defined in
src/shapes/Object/types/FabricObjectProps.ts:50
resizeFilter?
optionalresizeFilter:Resize
Inherited from
UniqueImageProps.resizeFilter
Defined in
scaleX
scaleX:
number
Object scale factor (horizontal)
Default
1Inherited from
Defined in
src/shapes/Object/types/BaseProps.ts:84
scaleY
scaleY:
number
Object scale factor (vertical)
Default
1Inherited from
Defined in
src/shapes/Object/types/BaseProps.ts:91
selectable
selectable:
boolean
When set to false, an object can not be selected for modification (using either point-click-based or group-based selection).
But events still fire on it.
Default
Inherited from
Defined in
src/shapes/Object/types/FabricObjectProps.ts:58
selectionBackgroundColor
selectionBackgroundColor:
string
Selection Background color of an object. colored layer behind the object when it is active. does not mix good with globalCompositeOperation methods.
Default
Inherited from
FabricObjectProps.selectionBackgroundColor
Defined in
src/shapes/Object/types/FabricObjectProps.ts:43
shadow
shadow:
null|Shadow
Shadow object representing shadow of this shape
Default
nullInherited from
Defined in
src/shapes/Object/types/ObjectProps.ts:19
skewX
skewX:
TDegree
Angle of skew on x axes of an object (in degrees)
Default
0Inherited from
Defined in
src/shapes/Object/types/BaseProps.ts:98
skewY
skewY:
TDegree
Angle of skew on y axes of an object (in degrees)
Default
0Inherited from
Defined in
src/shapes/Object/types/BaseProps.ts:105
snapAngle?
optionalsnapAngle:TDegree
The angle that an object will lock to while rotating.
Inherited from
Defined in
src/shapes/Object/types/ObjectTransformProps.ts:8
snapThreshold?
optionalsnapThreshold:TDegree
The angle difference from the current snapped angle in which snapping should occur. When undefined, the snapThreshold will default to the snapAngle.
Inherited from
FabricObjectProps.snapThreshold
Defined in
src/shapes/Object/types/ObjectTransformProps.ts:15
srcFromAttribute
srcFromAttribute:
boolean
Inherited from
UniqueImageProps.srcFromAttribute
Defined in
stroke
stroke:
null|string|TFiller
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/
Default
nullInherited from
Defined in
src/shapes/Object/types/ObjectProps.ts:18
strokeDashArray
strokeDashArray:
null|number[]
Array specifying dash pattern of an object’s stroke (stroke must be defined)
Default
null;Inherited from
FabricObjectProps.strokeDashArray
Defined in
src/shapes/Object/types/FillStrokeProps.ts:48
strokeDashOffset
strokeDashOffset:
number
Line offset of an object’s stroke
Default
0Inherited from
FabricObjectProps.strokeDashOffset
Defined in
src/shapes/Object/types/FillStrokeProps.ts:55
strokeLineCap
strokeLineCap:
CanvasLineCap
Line endings style of an object’s stroke (one of “butt”, “round”, “square”)
Default
buttInherited from
FabricObjectProps.strokeLineCap
Defined in
src/shapes/Object/types/FillStrokeProps.ts:62
strokeLineJoin
strokeLineJoin:
CanvasLineJoin
Corner style of an object’s stroke (one of “bevel”, “round”, “miter”)
Default
Inherited from
FabricObjectProps.strokeLineJoin
Defined in
src/shapes/Object/types/FillStrokeProps.ts:69
strokeMiterLimit
strokeMiterLimit:
number
Maximum miter length (used for strokeLineJoin = “miter”) of an object’s stroke
Default
4Inherited from
FabricObjectProps.strokeMiterLimit
Defined in
src/shapes/Object/types/FillStrokeProps.ts:76
strokeUniform
strokeUniform:
boolean
When false, the stoke width will scale with the object.
When true, the stroke will always match the exact pixel size entered for stroke width.
this Property does not work on Text classes or drawing call that uses strokeText,fillText methods
default to false
Since
2.6.0
Default
falseDefault
falseInherited from
FabricObjectProps.strokeUniform
Defined in
src/shapes/Object/types/FillStrokeProps.ts:89
strokeWidth
strokeWidth:
number
Width of a stroke used to render this object
Default
1Inherited from
Defined in
src/shapes/Object/types/FillStrokeProps.ts:41
top
top:
number
Top position of an object. Note that by default it’s relative to object top. You can change this by setting originY
Default
0Inherited from
Defined in
src/shapes/Object/types/BaseProps.ts:20
touchCornerSize
touchCornerSize:
number
Size of object’s controlling corners when touch interaction is detected
Default
24Inherited from
FabricObjectProps.touchCornerSize
Defined in
src/shapes/Object/types/ControlProps.ts:14
transparentCorners
transparentCorners:
boolean
When true, object’s controlling corners are rendered as transparent inside (i.e. stroke instead of fill)
Default
trueInherited from
FabricObjectProps.transparentCorners
Defined in
src/shapes/Object/types/ControlProps.ts:21
visible
visible:
boolean
When set to false, an object is not rendered on canvas
Default
Inherited from
Defined in
src/shapes/Object/types/SerializedObjectProps.ts:40
width
width:
number
Object width
Default