CanvasOptions
Extends
StaticCanvasOptions.CanvasTransformOptions.CanvasSelectionOptions.CanvasCursorOptions.TargetFindOptions.CanvasEventsOptions
Properties
allowTouchScrolling
allowTouchScrolling:
boolean
Indicates whether the browser can be scrolled when using a touchscreen and dragging on the canvas It gives PRIORITY to DOM scrolling, it doesn’t make it always possible. If is true, when using a touch event on the canvas, the canvas will scroll if scroll is possible. If we are in drawing mode or if we are selecting an object the canvas preventDefault and so it won’t scroll
Default
Todo
move to Canvas
Inherited from
StaticCanvasOptions.allowTouchScrolling
Defined in
src/canvas/StaticCanvasOptions.ts:163
altActionKey
altActionKey:
TOptionalModifierKey
Indicates which key enable alternate action on corner
values: ‘altKey’, ‘shiftKey’, ‘ctrlKey’.
If null or ‘none’ or any other string that is not a modifier key
feature is disabled feature disabled.
Since
1.6.2
Default
Inherited from
CanvasTransformOptions.altActionKey
Defined in
src/canvas/CanvasOptions.ts:67
altSelectionKey
altSelectionKey:
TOptionalModifierKey
Indicates which key enable alternative selection
in case of target overlapping with active object
values: ‘altKey’, ‘shiftKey’, ‘ctrlKey’.
For a series of reason that come from the general expectations on how
things should work, this feature works only for preserveObjectStacking true.
If null or ‘none’ or any other string that is not a modifier key
feature is disabled.
Since
1.6.5
Default
Inherited from
CanvasSelectionOptions.altSelectionKey
Defined in
src/canvas/CanvasOptions.ts:102
backgroundColor
backgroundColor:
string|TFiller
Background color of canvas instance.
Default
Inherited from
StaticCanvasOptions.backgroundColor
Defined in
src/canvas/StaticCanvasOptions.ts:20
backgroundImage?
optionalbackgroundImage:FabricObject<Partial<FabricObjectProps>,SerializedObjectProps,ObjectEvents>
Background image of canvas instance. since 2.4.0 image caching is active, please when putting an image as background, add to the canvas property a reference to the canvas it is on. Otherwise the image cannot detect the zoom vale. As an alternative you can disable image objectCaching
Default
Inherited from
StaticCanvasOptions.backgroundImage
Defined in
src/canvas/StaticCanvasOptions.ts:30
backgroundVpt
backgroundVpt:
boolean
if set to false background image is not affected by viewport transform
Since
1.6.3
Todo
we should really find a different way to do this
Default
Inherited from
StaticCanvasOptions.backgroundVpt
Defined in
src/canvas/StaticCanvasOptions.ts:13
centeredKey
centeredKey:
TOptionalModifierKey
Indicates which key enable centered Transform
values: ‘altKey’, ‘shiftKey’, ‘ctrlKey’.
If null or ‘none’ or any other string that is not a modifier key
feature is disabled feature disabled.
Since
1.6.2
Default
Inherited from
CanvasTransformOptions.centeredKey
Defined in
src/canvas/CanvasOptions.ts:56
centeredRotation
centeredRotation:
boolean
When true, objects use center point as the origin of rotate transformation. Backwards incompatibility note: This property replaces “centerTransform” (Boolean).
Since
1.3.4
Default
Inherited from
CanvasTransformOptions.centeredRotation
Defined in
src/canvas/CanvasOptions.ts:45
centeredScaling
centeredScaling:
boolean
When true, objects use center point as the origin of scale transformation. Backwards incompatibility note: This property replaces “centerTransform” (Boolean).
Since
1.3.4
Default
Inherited from
CanvasTransformOptions.centeredScaling
Defined in
src/canvas/CanvasOptions.ts:36
clipPath?
optionalclipPath:FabricObject<Partial<FabricObjectProps>,SerializedObjectProps,ObjectEvents>
a fabricObject that, without stroke define a clipping area with their shape. filled in black the clipPath object gets used when the canvas has rendered, and the context is placed in the top left corner of the canvas. clipPath will clip away controls, if you do not want this to happen use controlsAboveOverlay = true
Inherited from
Defined in
src/canvas/StaticCanvasOptions.ts:105
containerClass
containerClass:
string
Default element class that’s given to wrapper (div) element of canvas
Default
Defined in
src/canvas/CanvasOptions.ts:251
controlsAboveOverlay
controlsAboveOverlay:
boolean
Indicates whether object controls (borders/controls) are rendered above overlay image
Default
Todo
move to Canvas
Inherited from
StaticCanvasOptions.controlsAboveOverlay
Defined in
src/canvas/StaticCanvasOptions.ts:151
defaultCursor
defaultCursor:
string
Default cursor value used for the entire canvas
Default
defaultInherited from
CanvasCursorOptions.defaultCursor
Defined in
src/canvas/CanvasOptions.ts:160
enablePointerEvents
enablePointerEvents:
boolean
When the option is enabled, PointerEvent is used instead of TPointerEvent.
Default
Inherited from
CanvasEventsOptions.enablePointerEvents
Defined in
src/canvas/CanvasOptions.ts:235
enableRetinaScaling
enableRetinaScaling:
boolean
When true, canvas is scaled by devicePixelRatio for better rendering on retina screens
Default
Inherited from
StaticCanvasOptions.enableRetinaScaling
Defined in
src/canvas/StaticCanvasOptions.ts:89
fireMiddleClick
fireMiddleClick:
boolean
Indicates if the canvas can fire middle click events
Since
1.7.8
Default
Inherited from
CanvasEventsOptions.fireMiddleClick
Defined in
src/canvas/CanvasOptions.ts:228
fireRightClick
fireRightClick:
boolean
Indicates if the canvas can fire right click events
Since
1.6.5
Default
Inherited from
CanvasEventsOptions.fireRightClick
Defined in
src/canvas/CanvasOptions.ts:220
freeDrawingCursor
freeDrawingCursor:
string
Cursor value used during free drawing
Default
crosshairInherited from
CanvasCursorOptions.freeDrawingCursor
Defined in
src/canvas/CanvasOptions.ts:167
height
height:
number
Height in virtual/logical pixels of the canvas. The canvas can be taller than width if retina scaling is active
Inherited from
Defined in
src/canvas/StaticCanvasOptions.ts:142
hoverCursor
hoverCursor:
string
Default cursor value used when hovering over an object on canvas
Default
moveInherited from
CanvasCursorOptions.hoverCursor
Defined in
src/canvas/CanvasOptions.ts:146
imageSmoothingEnabled
imageSmoothingEnabled:
boolean
Indicates whether this canvas will use image smoothing, this is on by default in browsers
Default
Inherited from
StaticCanvasOptions.imageSmoothingEnabled
Defined in
src/canvas/StaticCanvasOptions.ts:96
includeDefaultValues
includeDefaultValues:
boolean
Indicates whether toObject/toDatalessObject should include default values if set to false, takes precedence over the object value.
Default
Inherited from
StaticCanvasOptions.includeDefaultValues
Defined in
src/canvas/StaticCanvasOptions.ts:115
moveCursor
moveCursor:
string
Default cursor value used when moving an object on canvas
Default
moveInherited from
CanvasCursorOptions.moveCursor
Defined in
src/canvas/CanvasOptions.ts:153
notAllowedCursor
notAllowedCursor:
string
Cursor value used for disabled elements ( corners with disabled action )
Since
2.0.0
Default
not-allowedInherited from
CanvasCursorOptions.notAllowedCursor
Defined in
src/canvas/CanvasOptions.ts:175
overlayColor
overlayColor:
string|TFiller
Overlay color of canvas instance.
Since
1.3.9
Default
Inherited from
StaticCanvasOptions.overlayColor
Defined in
src/canvas/StaticCanvasOptions.ts:47
overlayImage?
optionaloverlayImage:FabricObject<Partial<FabricObjectProps>,SerializedObjectProps,ObjectEvents>
Overlay image of canvas instance. since 2.4.0 image caching is active, please when putting an image as overlay, add to the canvas property a reference to the canvas it is on. Otherwise the image cannot detect the zoom vale. As an alternative you can disable image objectCaching
Default
Inherited from
StaticCanvasOptions.overlayImage
Defined in
src/canvas/StaticCanvasOptions.ts:57
overlayVpt
overlayVpt:
boolean
if set to false overlay image is not affected by viewport transform
Since
1.6.3
Todo
we should really find a different way to do this
Default
Inherited from
StaticCanvasOptions.overlayVpt
Defined in
src/canvas/StaticCanvasOptions.ts:39
perPixelTargetFind
perPixelTargetFind:
boolean
When true, object detection happens on per-pixel basis rather than on per-bounding-box
Default
Inherited from
TargetFindOptions.perPixelTargetFind
Defined in
src/canvas/CanvasOptions.ts:184
preserveObjectStacking
preserveObjectStacking:
boolean
Indicates whether objects should remain in current stack position when selected. When false objects are brought to top and rendered as part of the selection group
Default
Defined in
src/canvas/CanvasOptions.ts:259
renderOnAddRemove
renderOnAddRemove:
boolean
Indicates whether StaticCanvas#add, StaticCanvas#insertAt and StaticCanvas#remove, StaticCanvas#moveTo, StaticCanvas#clear and many more, should also re-render canvas. Disabling this option will not give a performance boost when adding/removing a lot of objects to/from canvas at once since the renders are queued and executed one per frame. Disabling is suggested anyway and managing the renders of the app manually is not a big effort ( canvas.requestRenderAll() ) Left default to true to do not break documentation and old app, fiddles.
Default
Inherited from
StaticCanvasOptions.renderOnAddRemove
Defined in
src/canvas/StaticCanvasOptions.ts:71
selection
selection:
boolean
Indicates whether group selection should be enabled
Default
Inherited from
CanvasSelectionOptions.selection
Defined in
src/canvas/CanvasOptions.ts:76
selectionBorderColor
selectionBorderColor:
string
Color of the border of selection (usually slightly darker than color of selection itself)
Default
Inherited from
CanvasSelectionOptions.selectionBorderColor
Defined in
src/canvas/CanvasOptions.ts:123
selectionColor
selectionColor:
string
Color of selection
Default
Inherited from
CanvasSelectionOptions.selectionColor
Defined in
src/canvas/CanvasOptions.ts:109
selectionDashArray
selectionDashArray:
number[]
Default dash array pattern If not empty the selection border is dashed
Inherited from
CanvasSelectionOptions.selectionDashArray
Defined in
src/canvas/CanvasOptions.ts:116
selectionFullyContained
selectionFullyContained:
boolean
Select only shapes that are fully contained in the dragged selection rectangle.
Default
Inherited from
CanvasSelectionOptions.selectionFullyContained
Defined in
src/canvas/CanvasOptions.ts:137
selectionKey
selectionKey:
TOptionalModifierKey| ("altKey"|"shiftKey"|"ctrlKey"|"metaKey")[]
Indicates which key or keys enable multiple click selection
Pass value as a string or array of strings
values: ‘altKey’, ‘shiftKey’, ‘ctrlKey’.
If null or empty or containing any other string that is not a modifier key
feature is disabled.
Since
1.6.2
Default
Inherited from
CanvasSelectionOptions.selectionKey
Defined in
src/canvas/CanvasOptions.ts:88
selectionLineWidth
selectionLineWidth:
number
Width of a line used in object/group selection
Default
Inherited from
CanvasSelectionOptions.selectionLineWidth
Defined in
src/canvas/CanvasOptions.ts:130
skipOffscreen
skipOffscreen:
boolean
Based on vptCoords and object.aCoords, skip rendering of objects that are not included in current viewport. May greatly help in applications with crowded canvas and use of zoom/pan If One of the corner of the bounding box of the object is on the canvas the objects get rendered.
Default
trueInherited from
StaticCanvasOptions.skipOffscreen
Defined in
src/canvas/StaticCanvasOptions.ts:82
skipTargetFind
skipTargetFind:
boolean
When true, target detection is skipped. Target detection will return always undefined.
click selection won’t work anymore, events will fire with no targets.
if something is selected before setting it to true, it will be deselected at the first click.
area selection will still work. check the selection property too.
if you deactivate both, you should look into staticCanvas.
Default
Inherited from
TargetFindOptions.skipTargetFind
Defined in
src/canvas/CanvasOptions.ts:202
stopContextMenu
stopContextMenu:
boolean
Indicates if the right click on canvas can output the context menu or not
Since
1.6.5
Default
Inherited from
CanvasEventsOptions.stopContextMenu
Defined in
src/canvas/CanvasOptions.ts:212
svgViewportTransformation
svgViewportTransformation:
boolean
When true, getSvgTransform() will apply the StaticCanvas.viewportTransform to the SVG transformation. When true, a zoomed canvas will then produce zoomed SVG output.
Default
Inherited from
StaticCanvasOptions.svgViewportTransformation
Defined in
src/canvas/StaticCanvasOptions.ts:123
targetFindTolerance
targetFindTolerance:
number
Number of pixels around target pixel to tolerate (consider active) during object detection
Default
Inherited from
TargetFindOptions.targetFindTolerance
Defined in
src/canvas/CanvasOptions.ts:191
uniScaleKey
uniScaleKey:
TOptionalModifierKey
Indicates which key switches uniform scaling.
values: ‘altKey’, ‘shiftKey’, ‘ctrlKey’.
If null or ‘none’ or any other string that is not a modifier key
feature is disabled.
totally wrong named. this sounds like uniform scaling
if Canvas.uniformScaling is true, pressing this will set it to false
and viceversa.
Since
1.6.2
Default
Inherited from
CanvasTransformOptions.uniScaleKey
Defined in
src/canvas/CanvasOptions.ts:27
uniformScaling
uniformScaling:
boolean
When true, objects can be transformed by one side (unproportionately) when dragged on the corners that normally would not do that.
Default
Since
fabric 4.0 // changed name and default value
Inherited from
CanvasTransformOptions.uniformScaling
Defined in
src/canvas/CanvasOptions.ts:13
viewportTransform
viewportTransform:
TMat2D
The transformation (a Canvas 2D API transform matrix) which focuses the viewport
Examples
canvas.viewportTransform = [1, 0, 0, 1, 0, 0];canvas.viewportTransform = [0.7, 0, 0, 0.7, 50, 50];Default
Inherited from
StaticCanvasOptions.viewportTransform
Defined in
src/canvas/StaticCanvasOptions.ts:174
width
width:
number
Width in virtual/logical pixels of the canvas. The canvas can be larger than width if retina scaling is active