Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface CanvasOption

Hierarchy

  • ICanvasOptions
    • CanvasOption

Index

Properties

Optional allowTouchScrolling

allowTouchScrolling: boolean | undefined

Indicates whether the browser can be scrolled when using a touchscreen and dragging on the canvas

Optional altActionKey

altActionKey: string | undefined

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

Optional altSelectionKey

altSelectionKey: string | null | undefined

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

Optional backgroundColor

backgroundColor: string | Pattern | undefined

Background color of canvas instance. Should be set via {@link fabric.StaticCanvas#setBackgroundColor}.

Optional backgroundImage

backgroundImage: Image | string | undefined

Background image of canvas instance. Should be set via {@link fabric.StaticCanvas#setBackgroundImage}. Backwards incompatibility note: The "backgroundImageOpacity" and "backgroundImageStretch" properties are deprecated since 1.3.9. Use {@link fabric.Image#opacity}, {@link fabric.Image#width} and {@link fabric.Image#height}. 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

Optional backgroundVpt

backgroundVpt: boolean | undefined

if set to false background image is not affected by viewport transform

since

1.6.3

Optional centeredKey

centeredKey: string | undefined

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

Optional centeredRotation

centeredRotation: boolean | undefined

When true, objects use center point as the origin of rotate transformation. Backwards incompatibility note: This property replaces "centerTransform" (Boolean).

Optional centeredScaling

centeredScaling: boolean | undefined

When true, objects use center point as the origin of scale transformation. Backwards incompatibility note: This property replaces "centerTransform" (Boolean).

Optional clipPath

clipPath: Object | undefined

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

Optional containerClass

containerClass: string | undefined

Default element class that's given to wrapper (div) element of canvas

Optional controlsAboveOverlay

controlsAboveOverlay: boolean | undefined

Indicates whether object controls (borders/controls) are rendered above overlay image

Optional defaultCursor

defaultCursor: string | undefined

Default cursor value used for the entire canvas

Optional enableRetinaScaling

enableRetinaScaling: boolean | undefined

When true, canvas is scaled by devicePixelRatio for better rendering on retina screens

Optional fill

fill: string | Pattern | Gradient | undefined

Color of object's fill

Optional fireMiddleClick

fireMiddleClick: boolean | undefined

Indicates if the canvas can fire middle click events

since

1.7.8

default

Optional fireRightClick

fireRightClick: boolean | undefined

Indicates if the canvas can fire right click events

since

1.6.5

default

Optional freeDrawingCursor

freeDrawingCursor: string | undefined

Cursor value used during free drawing

Optional height

height: number | undefined

Canvas height

default

Optional hoverCursor

hoverCursor: string | undefined

Default cursor value used when hovering over an object on canvas

Optional id

id: string

Unique id of Canvas

Optional imageSmoothingEnabled

imageSmoothingEnabled: boolean | undefined

Indicates whether this canvas will use image smoothing, this is on by default in browsers

Optional includeDefaultValues

includeDefaultValues: boolean | undefined

Indicates whether toObject/toDatalessObject should include default values if set to false, takes precedence over the object value.

Optional interactive

interactive: boolean | undefined

Indicates that canvas is interactive. This property should not be changed.

Optional isDrawingMode

isDrawingMode: boolean | undefined

When true, mouse events on canvas (mousedown/mousemove/mouseup) result in free drawing. After mousedown, mousemove creates a shape, and then mouseup finalizes it and adds an instance of fabric.Path onto canvas.

Optional moveCursor

moveCursor: string | undefined

Default cursor value used when moving an object on canvas

Optional notAllowedCursor

notAllowedCursor: string | undefined

Cursor value used for disabled elements ( corners with disabled action )

since

2.0.0

default

Optional overlayColor

overlayColor: string | Pattern | undefined

Overlay color of canvas instance. Should be set via {@link fabric.StaticCanvas#setOverlayColor}

since

1.3.9

Optional overlayImage

overlayImage: Image | undefined

Overlay image of canvas instance. Should be set via {@link fabric.StaticCanvas#setOverlayImage}. Backwards incompatibility note: The "overlayImageLeft" and "overlayImageTop" properties are deprecated since 1.3.9. Use {@link fabric.Image#left} and {@link fabric.Image#top}. 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

Optional overlayVpt

overlayVpt: boolean | undefined

if set to false overlay image is not affected by viewport transform

since

1.6.3

Optional perPixelTargetFind

perPixelTargetFind: boolean | undefined

When true, object detection happens on per-pixel basis rather than on per-bounding-box

Optional preserveObjectStacking

preserveObjectStacking: boolean | undefined

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

Optional renderOnAddRemove

renderOnAddRemove: boolean | undefined

Indicates whether {@link fabric.Collection.add}, {@link fabric.Collection.insertAt} and {@link fabric.Collection.remove}, {@link fabric.StaticCanvas.moveTo}, {@link fabric.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 quequed 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.

Optional rotationCursor

rotationCursor: string | undefined

Cursor value used for rotation point

Optional selection

selection: boolean | undefined

Indicates whether group selection should be enabled

Optional selectionBorderColor

selectionBorderColor: string | undefined

Color of the border of selection (usually slightly darker than color of selection itself)

Optional selectionColor

selectionColor: string | undefined

Color of selection

Optional selectionDashArray

selectionDashArray: number[] | undefined

Default dash array pattern If not empty the selection border is dashed

Optional selectionFullyContained

selectionFullyContained: boolean | undefined

Select only shapes that are fully contained in the dragged selection rectangle.

default

Optional selectionKey

selectionKey: string | string[] | undefined

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

Optional selectionLineWidth

selectionLineWidth: number | undefined

Width of a line used in object/group selection

Optional skipOffscreen

skipOffscreen: boolean | undefined

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.

memberof

fabric.StaticCanvas.prototype

Optional skipTargetFind

skipTargetFind: boolean | undefined

When true, target detection is skipped when hovering over canvas. This can be used to improve performance.

Optional snapAngle

snapAngle: number | undefined

Indicates the angle that an object will lock to while rotating.

since

1.6.7

Optional snapThreshold

snapThreshold: null | number | undefined

Indicates the distance from the snapAngle the rotation will lock to the snapAngle. When null, the snapThreshold will default to the snapAngle.

since

1.6.7

default

Optional stateful

stateful: boolean | undefined

Indicates whether objects' state should be saved

Optional stopContextMenu

stopContextMenu: boolean | undefined

Indicates if the right click on canvas can output the context menu or not

since

1.6.5

default

Optional svgViewportTransformation

svgViewportTransformation: boolean | undefined

When true, getSvgTransform() will apply the StaticCanvas.viewportTransform to the SVG transformation. When true, a zoomed canvas will then produce zoomed SVG output.

Optional targetFindTolerance

targetFindTolerance: number | undefined

Number of pixels around target pixel to tolerate (consider active) during object detection

Optional targets

targets: Object[] | undefined

Keep track of the subTargets for Mouse Events

since

3.6.0

default

Optional uniScaleKey

uniScaleKey: string | undefined

Indicates which key enable unproportional scaling 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

Optional uniformScaling

uniformScaling: boolean | undefined

When true, objects can be transformed by one side (unproportionally) when dragged on the corners that normally would not do that.

default
since

fabric 4.0 // changed name and default value

Optional viewportTransform

viewportTransform: number[] | undefined

The transformation (in the format of Canvas transform) which focuses the viewport

Optional vptCoords

vptCoords: { bl: { x: number; y: number }; br: { x: number; y: number }; tl: { x: number; y: number }; tr: { x: number; y: number } } | undefined

Describe canvas element extension over design properties are tl,tr,bl,br. if canvas is not zoomed/panned those points are the four corner of canvas if canvas is viewportTransformed you those points indicate the extension of canvas element in plain untrasformed coordinates The coordinates get updated with @method calcViewportBoundaries.

memberof

fabric.StaticCanvas.prototype

Optional width

width: number | undefined

Canvas width

default

Generated using TypeDoc