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?

optional backgroundImage: 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?

optional clipPath: 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

StaticCanvasOptions.clipPath

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

default

Inherited 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

crosshair

Inherited 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

StaticCanvasOptions.height

Defined in

src/canvas/StaticCanvasOptions.ts:142

hoverCursor

hoverCursor: string

Default cursor value used when hovering over an object on canvas

Default

move

Inherited 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

move

Inherited 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-allowed

Inherited 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?

optional overlayImage: 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

true

Inherited 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

Inherited from

StaticCanvasOptions.width

Defined in

src/canvas/StaticCanvasOptions.ts:135