Skip to content

Canvas

Defined in: src/canvas/Canvas.ts:72

  • SelectableCanvas

new Canvas(el?, options?): Canvas

Defined in: src/canvas/Canvas.ts:122

string | HTMLCanvasElement

TCanvasOptions = {}

Canvas

SelectableCanvas.constructor

optional _activeObject: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>

Defined in: src/canvas/SelectableCanvas.ts:325

SelectableCanvas._activeObject


_objects: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]

Defined in: src/canvas/SelectableCanvas.ts:177

needs to end up in the constructor too

SelectableCanvas._objects


_offset: object

Defined in: src/canvas/StaticCanvas.ts:159

left: number

top: number

SelectableCanvas._offset


allowTouchScrolling: boolean

Defined in: src/canvas/StaticCanvas.ts:123

move to Canvas

CanvasOptions.allowTouchScrolling

SelectableCanvas.allowTouchScrolling


altActionKey: TOptionalModifierKey

Defined in: src/canvas/SelectableCanvas.ts:185

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.

1.6.2

CanvasOptions.altActionKey

SelectableCanvas.altActionKey


altSelectionKey: TOptionalModifierKey

Defined in: src/canvas/SelectableCanvas.ts:190

Indicates which key enable alternative selection in case of a target overlapping with active object and we don’t want to loose the active selection, we can press this modifier key and continue selecting the current selected object also when is covered by another or many valid targets for selection. 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.

1.6.5

CanvasOptions.altSelectionKey

SelectableCanvas.altSelectionKey


backgroundColor: string | TFiller

Defined in: src/canvas/StaticCanvas.ts:98

Background color of canvas instance.

CanvasOptions.backgroundColor

SelectableCanvas.backgroundColor


optional backgroundImage: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>

Defined in: src/canvas/StaticCanvas.ts:99

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

CanvasOptions.backgroundImage

SelectableCanvas.backgroundImage


backgroundVpt: boolean

Defined in: src/canvas/StaticCanvas.ts:97

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

1.6.3

we should really find a different way to do this

CanvasOptions.backgroundVpt

SelectableCanvas.backgroundVpt


centeredKey: TOptionalModifierKey

Defined in: src/canvas/SelectableCanvas.ts:184

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.

1.6.2

CanvasOptions.centeredKey

SelectableCanvas.centeredKey


centeredRotation: boolean

Defined in: src/canvas/SelectableCanvas.ts:183

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

1.3.4

CanvasOptions.centeredRotation

SelectableCanvas.centeredRotation


centeredScaling: boolean

Defined in: src/canvas/SelectableCanvas.ts:182

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

1.3.4

CanvasOptions.centeredScaling

SelectableCanvas.centeredScaling


optional clipPath: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>

Defined in: src/canvas/StaticCanvas.ts:105

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

CanvasOptions.clipPath

SelectableCanvas.clipPath


containerClass: string

Defined in: src/canvas/SelectableCanvas.ts:204

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

CanvasOptions.containerClass

SelectableCanvas.containerClass


controlsAboveOverlay: boolean

Defined in: src/canvas/StaticCanvas.ts:118

move to Canvas

CanvasOptions.controlsAboveOverlay

SelectableCanvas.controlsAboveOverlay


defaultCursor: string

Defined in: src/canvas/SelectableCanvas.ts:200

Default cursor value used for the entire canvas

default

CanvasOptions.defaultCursor

SelectableCanvas.defaultCursor


optional destroyed: boolean

Defined in: src/canvas/StaticCanvas.ts:150

If true the Canvas is in the process or has been disposed/destroyed. No more rendering operation will be executed on this canvas.

SelectableCanvas.destroyed


optional disposed: boolean

Defined in: src/canvas/StaticCanvas.ts:157

Started the process of disposing but not done yet. WIll likely complete the render cycle already scheduled but stopping adding more.

SelectableCanvas.disposed


elements: CanvasDOMManager

Defined in: src/canvas/SelectableCanvas.ts:310

SelectableCanvas.elements


enablePointerEvents: boolean

Defined in: src/canvas/Canvas.ts:80

When the option is enabled, PointerEvent is used instead of TPointerEvent.

CanvasOptions.enablePointerEvents


enableRetinaScaling: boolean

Defined in: src/canvas/StaticCanvas.ts:112

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

CanvasOptions.enableRetinaScaling

SelectableCanvas.enableRetinaScaling


fireMiddleClick: boolean

Defined in: src/canvas/SelectableCanvas.ts:225

Indicates if the canvas can fire middle click events

1.7.8

CanvasOptions.fireMiddleClick

SelectableCanvas.fireMiddleClick


fireRightClick: boolean

Defined in: src/canvas/SelectableCanvas.ts:224

Indicates if the canvas can fire right click events

1.6.5

CanvasOptions.fireRightClick

SelectableCanvas.fireRightClick


optional freeDrawingBrush: BaseBrush

Defined in: src/canvas/SelectableCanvas.ts:324

SelectableCanvas.freeDrawingBrush


freeDrawingCursor: string

Defined in: src/canvas/SelectableCanvas.ts:201

Cursor value used during free drawing

crosshair

CanvasOptions.freeDrawingCursor

SelectableCanvas.freeDrawingCursor


height: number

Defined in: src/canvas/StaticCanvas.ts:94

Height in virtual/logical pixels of the canvas. The canvas can be taller than width if retina scaling is active

CanvasOptions.height

SelectableCanvas.height


hoverCursor: string

Defined in: src/canvas/SelectableCanvas.ts:198

Default cursor value used when hovering over an object on canvas

move

CanvasOptions.hoverCursor

SelectableCanvas.hoverCursor


imageSmoothingEnabled: boolean

Defined in: src/canvas/StaticCanvas.ts:113

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

CanvasOptions.imageSmoothingEnabled

SelectableCanvas.imageSmoothingEnabled


includeDefaultValues: boolean

Defined in: src/canvas/StaticCanvas.ts:107

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

CanvasOptions.includeDefaultValues

SelectableCanvas.includeDefaultValues


isDrawingMode: boolean

Defined in: src/canvas/SelectableCanvas.ts:218

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.

http://fabricjs.com/fabric-intro-part-4#free_drawing

SelectableCanvas.isDrawingMode


moveCursor: string

Defined in: src/canvas/SelectableCanvas.ts:199

Default cursor value used when moving an object on canvas

move

CanvasOptions.moveCursor

SelectableCanvas.moveCursor


notAllowedCursor: string

Defined in: src/canvas/SelectableCanvas.ts:202

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

2.0.0

not-allowed

CanvasOptions.notAllowedCursor

SelectableCanvas.notAllowedCursor


overlayColor: string | TFiller

Defined in: src/canvas/StaticCanvas.ts:102

Overlay color of canvas instance.

1.3.9

CanvasOptions.overlayColor

SelectableCanvas.overlayColor


optional overlayImage: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>

Defined in: src/canvas/StaticCanvas.ts:103

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

CanvasOptions.overlayImage

SelectableCanvas.overlayImage


overlayVpt: boolean

Defined in: src/canvas/StaticCanvas.ts:101

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

1.6.3

we should really find a different way to do this

CanvasOptions.overlayVpt

SelectableCanvas.overlayVpt


perPixelTargetFind: boolean

Defined in: src/canvas/SelectableCanvas.ts:207

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

CanvasOptions.perPixelTargetFind

SelectableCanvas.perPixelTargetFind


preserveObjectStacking: boolean

Defined in: src/canvas/SelectableCanvas.ts:220

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

true

CanvasOptions.preserveObjectStacking

SelectableCanvas.preserveObjectStacking


renderOnAddRemove: boolean

Defined in: src/canvas/StaticCanvas.ts:110

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.

CanvasOptions.renderOnAddRemove

SelectableCanvas.renderOnAddRemove


selection: boolean

Defined in: src/canvas/SelectableCanvas.ts:188

Indicates whether group selection should be enabled

CanvasOptions.selection

SelectableCanvas.selection


selectionBorderColor: string

Defined in: src/canvas/SelectableCanvas.ts:193

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

CanvasOptions.selectionBorderColor

SelectableCanvas.selectionBorderColor


selectionColor: string

Defined in: src/canvas/SelectableCanvas.ts:191

Color of selection

CanvasOptions.selectionColor

SelectableCanvas.selectionColor


selectionDashArray: number[]

Defined in: src/canvas/SelectableCanvas.ts:192

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

CanvasOptions.selectionDashArray

SelectableCanvas.selectionDashArray


selectionFullyContained: boolean

Defined in: src/canvas/SelectableCanvas.ts:195

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

CanvasOptions.selectionFullyContained

SelectableCanvas.selectionFullyContained


selectionKey: TOptionalModifierKey | ("altKey" | "ctrlKey" | "metaKey" | "shiftKey")[]

Defined in: src/canvas/SelectableCanvas.ts:189

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.

1.6.2

CanvasOptions.selectionKey

SelectableCanvas.selectionKey


selectionLineWidth: number

Defined in: src/canvas/SelectableCanvas.ts:194

Width of a line used in object/group selection

CanvasOptions.selectionLineWidth

SelectableCanvas.selectionLineWidth


skipOffscreen: boolean

Defined in: src/canvas/StaticCanvas.ts:111

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.

true

CanvasOptions.skipOffscreen

SelectableCanvas.skipOffscreen


skipTargetFind: boolean

Defined in: src/canvas/SelectableCanvas.ts:209

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.

CanvasOptions.skipTargetFind

SelectableCanvas.skipTargetFind


stopContextMenu: boolean

Defined in: src/canvas/SelectableCanvas.ts:223

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

1.6.5

CanvasOptions.stopContextMenu

SelectableCanvas.stopContextMenu


svgViewportTransformation: boolean

Defined in: src/canvas/StaticCanvas.ts:900

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

CanvasOptions.svgViewportTransformation

SelectableCanvas.svgViewportTransformation


targetFindTolerance: number

Defined in: src/canvas/SelectableCanvas.ts:208

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

CanvasOptions.targetFindTolerance

SelectableCanvas.targetFindTolerance


textEditingManager: TextEditingManager

Defined in: src/canvas/Canvas.ts:120


uniformScaling: boolean

Defined in: src/canvas/SelectableCanvas.ts:180

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

fabric 4.0 // changed name and default value

CanvasOptions.uniformScaling

SelectableCanvas.uniformScaling


uniScaleKey: TOptionalModifierKey

Defined in: src/canvas/SelectableCanvas.ts:181

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.

1.6.2

CanvasOptions.uniScaleKey

SelectableCanvas.uniScaleKey


viewportTransform: TMat2D

Defined in: src/canvas/StaticCanvas.ts:125

The transformation (a Canvas 2D API transform matrix) which focuses the viewport

canvas.viewportTransform = [1, 0, 0, 1, 0, 0];
canvas.viewportTransform = [0.7, 0, 0, 0.7, 50, 50];

CanvasOptions.viewportTransform

SelectableCanvas.viewportTransform


vptCoords: TCornerPoint

Defined in: src/canvas/StaticCanvas.ts:130

The viewport bounding box in scene plane coordinates, see calcViewportBoundaries

SelectableCanvas.vptCoords


width: number

Defined in: src/canvas/StaticCanvas.ts:93

Width in virtual/logical pixels of the canvas. The canvas can be larger than width if retina scaling is active

CanvasOptions.width

SelectableCanvas.width


static ownDefaults: TOptions<CanvasOptions> = canvasDefaults

Defined in: src/canvas/SelectableCanvas.ts:304

SelectableCanvas.ownDefaults

get contextContainer(): CanvasRenderingContext2D

Defined in: src/canvas/StaticCanvas.ts:141

CanvasRenderingContext2D

SelectableCanvas.contextContainer


get contextTop(): CanvasRenderingContext2D

Defined in: src/canvas/SelectableCanvas.ts:314

CanvasRenderingContext2D

SelectableCanvas.contextTop


get lowerCanvasEl(): HTMLCanvasElement

Defined in: src/canvas/StaticCanvas.ts:137

A reference to the canvas actual HTMLCanvasElement. Can be use to read the raw pixels, but never write or manipulate

HTMLCanvasElement

SelectableCanvas.lowerCanvasEl


get upperCanvasEl(): HTMLCanvasElement

Defined in: src/canvas/SelectableCanvas.ts:311

HTMLCanvasElement

SelectableCanvas.upperCanvasEl


get wrapperEl(): HTMLDivElement

Defined in: src/canvas/SelectableCanvas.ts:317

HTMLDivElement

SelectableCanvas.wrapperEl

_basicEventHandler<T>(eventType, options): CanvasEvents & ObjectEvents[T]

Defined in: src/canvas/Canvas.ts:898

T extends "contextmenu" | "drag" | "dragend" | "dragenter" | "dragleave" | "dragover" | "dragstart" | "drop" | "erasing:end" | "drop:before" | "drop:after" | "contextmenu:before"

T

CanvasEvents & ObjectEvents[T]

CanvasEvents & ObjectEvents[T]


_chooseObjectsToRender(): FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]

Defined in: src/canvas/SelectableCanvas.ts:376

Divides objects in two groups, one to render immediately and one to render as activeGroup.

FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]

objects to render immediately and pushes the other in the activeGroup.

SelectableCanvas._chooseObjectsToRender


_discardActiveObject(e?, object?): this is { _activeObject: undefined }

Defined in: src/canvas/SelectableCanvas.ts:1250

This is supposed to be equivalent to discardActiveObject but without firing any selection events ( can still fire object transformation events ). There is commitment to have this stay this way. This is the functional part of discardActiveObject.

TPointerEvent

Event (passed along when firing “object:deselected”)

FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>

the next object to set as active, reason why we are discarding this

this is { _activeObject: undefined }

true if the active object has been discarded

SelectableCanvas._discardActiveObject


_onStackOrderChanged(): void

Defined in: src/canvas/SelectableCanvas.ts:366

void

SelectableCanvas._onStackOrderChanged


_set(key, value): void

Defined in: src/CommonMethods.ts:38

string

any

void

SelectableCanvas._set


_setActiveObject(object, e?): boolean

Defined in: src/canvas/SelectableCanvas.ts:1218

This is supposed to be equivalent to setActiveObject but without firing any event. There is commitment to have this stay this way. This is the functional part of setActiveObject.

FabricObject

to set as active

TPointerEvent

Event (passed along when firing “object:selected”)

boolean

true if the object has been selected

SelectableCanvas._setActiveObject


_setCursorFromEvent(e, target?): void

Defined in: src/canvas/Canvas.ts:1350

Sets the cursor depending on where the canvas is being hovered. Note: very buggy in Opera

TPointerEvent

Event object

FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>

Object that the mouse is hovering, if so.

void


absolutePan(point): void

Defined in: src/canvas/StaticCanvas.ts:391

Pan viewport so as to place point at top left corner of canvas

Point

to move to

void

SelectableCanvas.absolutePan


add(…objects): number

Defined in: src/canvas/StaticCanvas.ts:210

Adds objects to collection Objects should be instances of (or inherit from) FabricObject

FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]

to add

number

new array length

SelectableCanvas.add


addOrRemove(functor, _eventjsFunctor): void

Defined in: src/canvas/Canvas.ts:167

any

"add" | "remove"

void


bringObjectForward(object, intersecting?): boolean

Defined in: src/Collection.ts:240

Moves an object or a selection up in stack of drawn objects An optional parameter, intersecting allows to move the object in front of the first intersecting object. Where intersection is calculated with bounding box. If no intersection is found, there will not be change in the stack.

FabricObject

Object to send

boolean

If true, send object in front of next upper intersecting object

boolean

true if change occurred

SelectableCanvas.bringObjectForward


bringObjectToFront(object): boolean

Defined in: src/Collection.ts:194

Moves an object or the objects of a multiple selection to the top of the stack of drawn objects

FabricObject

Object to send

boolean

true if change occurred

SelectableCanvas.bringObjectToFront


calcOffset(): object

Defined in: src/canvas/StaticCanvas.ts:266

Calculates canvas element offset relative to the document This method is also attached as “resize” event handler of window

object

left: number = 0

top: number = 0

SelectableCanvas.calcOffset


calcViewportBoundaries(): TCornerPoint

Defined in: src/canvas/StaticCanvas.ts:488

Calculate the position of the 4 corner of canvas with current viewportTransform. helps to determinate when an object is in the current rendering viewport

TCornerPoint

SelectableCanvas.calcViewportBoundaries


cancelRequestedRender(): void

Defined in: src/canvas/StaticCanvas.ts:506

void

SelectableCanvas.cancelRequestedRender


centerObject(object): void

Defined in: src/canvas/StaticCanvas.ts:703

Centers object vertically and horizontally in the canvas

FabricObject

Object to center vertically and horizontally

void

SelectableCanvas.centerObject


centerObjectH(object): void

Defined in: src/canvas/StaticCanvas.ts:681

Centers object horizontally in the canvas

FabricObject

void

SelectableCanvas.centerObjectH


centerObjectV(object): void

Defined in: src/canvas/StaticCanvas.ts:692

Centers object vertically in the canvas

FabricObject

Object to center vertically

void

SelectableCanvas.centerObjectV


clear(): void

Defined in: src/canvas/Canvas.ts:1552

clear textEditingManager

void

SelectableCanvas.clear


clearContext(ctx): void

Defined in: src/canvas/StaticCanvas.ts:423

Clears specified context of canvas element

CanvasRenderingContext2D

Context to clear

void

SelectableCanvas.clearContext


clone(properties?): Promise<Canvas>

Defined in: src/canvas/StaticCanvas.ts:1272

Clones canvas instance

string[]

Array of properties to include in the cloned canvas and children

Promise<Canvas>

SelectableCanvas.clone


cloneWithoutData(): Canvas

Defined in: src/canvas/StaticCanvas.ts:1282

Clones canvas instance without cloning existing data. This essentially copies canvas dimensions since loadFromJSON does not affect canvas size.

Canvas

SelectableCanvas.cloneWithoutData


collectObjects(bbox, options): InteractiveFabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]

Defined in: src/Collection.ts:326

Given a bounding box, return all the objects of the collection that are contained in the bounding box. If includeIntersecting is true, return also the objects that intersect the bounding box as well. This is meant to work with selection. Is not a generic method.

TBBox

a bounding box in scene coordinates

an object with includeIntersecting

boolean = true

InteractiveFabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]

array of objects contained in the bounding box, ordered from top to bottom stacking wise

SelectableCanvas.collectObjects


complexity(): number

Defined in: src/Collection.ts:165

Returns number representation of a collection complexity

number

complexity

SelectableCanvas.complexity


contains(object, deep?): boolean

Defined in: src/Collection.ts:148

Returns true if collection contains an object.
Prefer using FabricObject#isDescendantOf for performance reasons instead of a.contains(b) use b.isDescendantOf(a)

FabricObject

Object to check against

boolean

true to check all descendants, false to check only _objects

boolean

true if collection contains an object

SelectableCanvas.contains


createSVGClipPathMarkup(options): string

Defined in: src/canvas/StaticCanvas.ts:1025

TSVGExportOptions

string

SelectableCanvas.createSVGClipPathMarkup


createSVGFontFacesMarkup(): string

Defined in: src/canvas/StaticCanvas.ts:1068

Creates markup containing SVG font faces, font URLs for font faces must be collected by developers and are not extracted from the DOM by fabricjs

string

SelectableCanvas.createSVGFontFacesMarkup


createSVGRefElementsMarkup(): string

Defined in: src/canvas/StaticCanvas.ts:1040

Creates markup containing SVG referenced elements like patterns, gradients etc.

string

SelectableCanvas.createSVGRefElementsMarkup


destroy(): void

Defined in: src/canvas/Canvas.ts:1560

clear textEditingManager

void

SelectableCanvas.destroy


discardActiveObject(e?): this is { _activeObject: undefined }

Defined in: src/canvas/SelectableCanvas.ts:1280

Discards currently active object and fire events. If the function is called by fabric as a consequence of a mouse event, the event is passed as a parameter and sent to the fire function for the custom events. When used as a method the e param does not have any application.

TPointerEvent

this is { _activeObject: undefined }

true if the active object has been discarded

SelectableCanvas.discardActiveObject


dispose(): Promise<boolean>

Defined in: src/canvas/StaticCanvas.ts:1416

Waits until rendering has settled to destroy the canvas

Promise<boolean>

a promise resolving to true once the canvas has been destroyed or to false if the canvas has was already destroyed

if aborted by a consequent call

SelectableCanvas.dispose


drawClipPathOnCanvas(ctx, clipPath): void

Defined in: src/canvas/StaticCanvas.ts:570

Paint the cached clipPath on the lowerCanvasEl

CanvasRenderingContext2D

Context to render on

TCachedFabricObject

void

SelectableCanvas.drawClipPathOnCanvas


drawControls(ctx): void

Defined in: src/canvas/SelectableCanvas.ts:1388

Draws objects’ controls (borders/controls)

CanvasRenderingContext2D

Context to render controls on

void

SelectableCanvas.drawControls


endCurrentTransform(e?): void

Defined in: src/canvas/SelectableCanvas.ts:1300

End the current transform. You don’t usually need to call this method unless you are interrupting a user initiated transform because of some other event ( a press of key combination, or something that block the user UX )

TPointerEvent

send the mouse event that generate the finalize down, so it can be used in the event

void

SelectableCanvas.endCurrentTransform


findNewLowerIndex(object, idx, intersecting?): number

Defined in: src/Collection.ts:272

FabricObject

number

boolean

number

SelectableCanvas.findNewLowerIndex


findNewUpperIndex(object, idx, intersecting?): number

Defined in: src/Collection.ts:295

FabricObject

number

boolean

number

SelectableCanvas.findNewUpperIndex


findTarget(e): FullTargetsInfoWithContainer

Defined in: src/canvas/SelectableCanvas.ts:730

This function is in charge of deciding which is the object that is the current target of an interaction event. For interaction event we mean a pointer related action on the canvas. Which is the 11/09/2018 TODO: would be cool if findTarget could discern between being a full target or the outside part of the corner.

TPointerEvent

mouse event

FullTargetsInfoWithContainer

the target found

SelectableCanvas.findTarget


fire<K>(eventName, options?): void

Defined in: src/Observable.ts:167

Fires event with an optional options object

K extends keyof CanvasEvents

K

Event name to fire

CanvasEvents[K]

Options object

void

SelectableCanvas.fire


forEachObject(callback): void

Defined in: src/Collection.ts:91

Executes given function for each object in this group A simple shortcut for getObjects().forEach, before es6 was more complicated, now is just a shortcut.

(object, index, array) => any

Callback invoked with current object as first argument, index - as second and an array of all objects - as third.

void

SelectableCanvas.forEachObject


get(property): any

Defined in: src/CommonMethods.ts:59

Basic getter

string

Property name

any

value of a property

SelectableCanvas.get


getActiveObject(): undefined | FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>

Defined in: src/canvas/SelectableCanvas.ts:1120

Returns currently active object

undefined | FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>

active object

SelectableCanvas.getActiveObject


getActiveObjects(): FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]

Defined in: src/canvas/SelectableCanvas.ts:1128

Returns an array with the current selected objects

FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]

active objects array

SelectableCanvas.getActiveObjects


getCenterPoint(): Point

Defined in: src/canvas/StaticCanvas.ts:674

Returns coordinates of a center of canvas.

Point

SelectableCanvas.getCenterPoint


getContext(): CanvasRenderingContext2D

Defined in: src/canvas/StaticCanvas.ts:431

Returns context of canvas where objects are drawn

CanvasRenderingContext2D

SelectableCanvas.getContext


getElement(): HTMLCanvasElement

Defined in: src/canvas/StaticCanvas.ts:415

Returns <canvas> element corresponding to this instance

HTMLCanvasElement

SelectableCanvas.getElement


getHeight(): number

Defined in: src/canvas/StaticCanvas.ts:282

Returns canvas height (in px)

number

SelectableCanvas.getHeight


getObjects(…types?): FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]

Defined in: src/Collection.ts:108

Returns an array of children objects of this instance

string[]

When specified, only objects of these types are returned

FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]

SelectableCanvas.getObjects


getScenePoint(e): Point

Defined in: src/canvas/SelectableCanvas.ts:1009

TPointerEvent

Point

point existing in the scene (the same plane as the plane FabricObject#getCenterPoint exists in). This means that changes to the viewportTransform do not change the values of the point, however, from the viewer’s perspective, the point is changed.

const viewportPoint = sendPointToPlane(
this.getScenePoint(e),
canvas.viewportTransform
);

SelectableCanvas.getScenePoint


getSelectionContext(): CanvasRenderingContext2D

Defined in: src/canvas/SelectableCanvas.ts:1104

Returns context of canvas where object selection is drawn

CanvasRenderingContext2D

SelectableCanvas.getSelectionContext


getSelectionElement(): HTMLCanvasElement

Defined in: src/canvas/SelectableCanvas.ts:1112

Returns <canvas> element on which object selection is drawn

HTMLCanvasElement

SelectableCanvas.getSelectionElement


getTopContext(): CanvasRenderingContext2D

Defined in: src/canvas/SelectableCanvas.ts:1095

Returns context of top canvas where interactions are drawn

CanvasRenderingContext2D

SelectableCanvas.getTopContext


getViewportPoint(e): Point

Defined in: src/canvas/SelectableCanvas.ts:990

TPointerEvent

Point

point existing in the same plane as the HTMLCanvasElement, (0, 0) being the top left corner of the HTMLCanvasElement. This means that changes to the viewportTransform do not change the values of the point and it remains unchanged from the viewer’s perspective.

const scenePoint = sendPointToPlane(
this.getViewportPoint(e),
undefined,
canvas.viewportTransform
);

SelectableCanvas.getViewportPoint


getVpCenter(): Point

Defined in: src/canvas/StaticCanvas.ts:741

Calculate the point in canvas that correspond to the center of actual viewport.

Point

vpCenter, viewport center

SelectableCanvas.getVpCenter


getWidth(): number

Defined in: src/canvas/StaticCanvas.ts:274

Returns canvas width (in px)

number

SelectableCanvas.getWidth


getZoom(): number

Defined in: src/canvas/StaticCanvas.ts:344

Returns canvas zoom level

number

SelectableCanvas.getZoom


insertAt(index, …objects): number

Defined in: src/canvas/StaticCanvas.ts:216

Inserts an object into collection at specified index

number

Index to insert object at

FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]

Object(s) to insert

number

new array length

SelectableCanvas.insertAt


isEmpty(): boolean

Defined in: src/Collection.ts:128

Returns true if collection contains no objects

boolean

true if collection is empty

SelectableCanvas.isEmpty


isTargetTransparent(target, x, y): boolean

Defined in: src/canvas/SelectableCanvas.ts:460

Returns true if object is transparent at a certain location Clarification: this is is target transparent at location X or are controls there

FabricObject

Object to check

number

Left coordinate in viewport space

number

Top coordinate in viewport space

boolean

this seems dumb that we treat controls with transparency. we can find controls programmatically without painting them, the cache canvas optimization is always valid

SelectableCanvas.isTargetTransparent


item(index): FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>

Defined in: src/Collection.ts:120

Returns object at specified index

number

FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>

object at index

SelectableCanvas.item


loadFromJSON(json, reviver?, options?): Promise<Canvas>

Defined in: src/canvas/StaticCanvas.ts:1221

Populates canvas with data from the specified JSON. JSON format must conform to the one of fabric.Canvas#toJSON

IMPORTANT: It is recommended to abort loading tasks before calling this method to prevent race conditions and unnecessary networking

JSON string or object

string | Record<string, any>

<T>(serializedObj, instance) => void

Method for further parsing of JSON elements, called after each fabric object created.

Abortable = {}

options

Promise<Canvas>

instance

canvas.loadFromJSON(json).then((canvas) => canvas.requestRenderAll());
canvas.loadFromJSON(json, function(o, object) {
// `o` = json object
// `object` = fabric.Object instance
// ... do some stuff ...
}).then((canvas) => {
... canvas is restored, add your code.
});

SelectableCanvas.loadFromJSON


moveObjectTo(object, index): boolean

Defined in: src/Collection.ts:262

Moves an object to specified level in stack of drawn objects

FabricObject

Object to send

number

Position to move to

boolean

true if change occurred

SelectableCanvas.moveObjectTo


off<K>(eventName): void

Defined in: src/Observable.ts:122

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

K extends keyof CanvasEvents

K

event name (eg. ‘after:render’)

void

SelectableCanvas.off

off<K>(eventName, handler): void

Defined in: src/Observable.ts:128

unsubscribe an event listener

K extends keyof CanvasEvents

K

event name (eg. ‘after:render’)

TEventCallback

event listener to unsubscribe

void

SelectableCanvas.off

off(handlers): void

Defined in: src/Observable.ts:133

unsubscribe event listeners

EventRegistryObject<EventSpec>

handlers key/value pairs (eg. {‘after:render’: handler, ‘selection:cleared’: handler})

void

SelectableCanvas.off

off(): void

Defined in: src/Observable.ts:137

unsubscribe all event listeners

void

SelectableCanvas.off


on<K, E>(eventName, handler): VoidFunction

Defined in: src/Observable.ts:23

Observes specified event

K extends keyof CanvasEvents

E extends TPointerEventInfo<TPointerEvent> | TPointerEventInfo<TPointerEvent> & object | TPointerEventInfo<WheelEvent> | TPointerEventInfo<TPointerEvent> & InEvent | TPointerEventInfo<TPointerEvent> & OutEvent | TPointerEventInfo<TPointerEvent> & TPointerEventInfo<TPointerEvent> & object | SimpleEventHandler<Event> | DragEventData | DragEventData & InEvent | DragEventData & OutEvent | TEventWithTarget<DragEvent> | DropEventData | { drawables: { backgroundImage?: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>; overlayImage?: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>; }; path: FabricObject; subTargets: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]; targets: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]; } | { path: FabricObject; } | { path: FabricObject; } | { target: IText; } | { target: IText; } | object & Partial<TEvent<TPointerEvent>> | { target: IText; } | { ctx: CanvasRenderingContext2D; } | { ctx: CanvasRenderingContext2D; } | LayoutBeforeEvent & object | LayoutAfterEvent & object | { target: FabricObject; } | { target: FabricObject; } | TEvent<TPointerEvent> & object | BasicTransformEvent<TPointerEvent> & object | BasicTransformEvent<TPointerEvent> & object | BasicTransformEvent<TPointerEvent> & object | BasicTransformEvent<TPointerEvent> & object | BasicTransformEvent<TPointerEvent> & object | BasicTransformEvent<TPointerEvent> & object | BasicTransformEvent<TPointerEvent> & object & ModifyPathEvent | ModifiedEvent<TPointerEvent> | Partial<TEvent<TPointerEvent>> & object | Partial<TEvent<TPointerEvent>> & object | Partial<TEvent<TPointerEvent>> & object | Partial<TEvent<TPointerEvent>> & object

K

Event name (eg. ‘after:render’)

TEventCallback<E>

Function that receives a notification when an event of the specified type occurs

VoidFunction

disposer

on

SelectableCanvas.on

on(handlers): VoidFunction

Defined in: src/Observable.ts:27

Observes specified event

EventRegistryObject<EventSpec>

key/value pairs (eg. {‘after:render’: handler, ‘selection:cleared’: handler})

VoidFunction

disposer

on

SelectableCanvas.on


once<K, E>(eventName, handler): VoidFunction

Defined in: src/Observable.ts:62

Observes specified event once

K extends keyof CanvasEvents

E extends TPointerEventInfo<TPointerEvent> | TPointerEventInfo<TPointerEvent> & object | TPointerEventInfo<WheelEvent> | TPointerEventInfo<TPointerEvent> & InEvent | TPointerEventInfo<TPointerEvent> & OutEvent | TPointerEventInfo<TPointerEvent> & TPointerEventInfo<TPointerEvent> & object | SimpleEventHandler<Event> | DragEventData | DragEventData & InEvent | DragEventData & OutEvent | TEventWithTarget<DragEvent> | DropEventData | { drawables: { backgroundImage?: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>; overlayImage?: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>; }; path: FabricObject; subTargets: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]; targets: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]; } | { path: FabricObject; } | { path: FabricObject; } | { target: IText; } | { target: IText; } | object & Partial<TEvent<TPointerEvent>> | { target: IText; } | { ctx: CanvasRenderingContext2D; } | { ctx: CanvasRenderingContext2D; } | LayoutBeforeEvent & object | LayoutAfterEvent & object | { target: FabricObject; } | { target: FabricObject; } | TEvent<TPointerEvent> & object | BasicTransformEvent<TPointerEvent> & object | BasicTransformEvent<TPointerEvent> & object | BasicTransformEvent<TPointerEvent> & object | BasicTransformEvent<TPointerEvent> & object | BasicTransformEvent<TPointerEvent> & object | BasicTransformEvent<TPointerEvent> & object | BasicTransformEvent<TPointerEvent> & object & ModifyPathEvent | ModifiedEvent<TPointerEvent> | Partial<TEvent<TPointerEvent>> & object | Partial<TEvent<TPointerEvent>> & object | Partial<TEvent<TPointerEvent>> & object | Partial<TEvent<TPointerEvent>> & object

K

Event name (eg. ‘after:render’)

TEventCallback<E>

Function that receives a notification when an event of the specified type occurs

VoidFunction

disposer

once

SelectableCanvas.once

once(handlers): VoidFunction

Defined in: src/Observable.ts:66

Observes specified event once

EventRegistryObject<EventSpec>

key/value pairs (eg. {‘after:render’: handler, ‘selection:cleared’: handler})

VoidFunction

disposer

once

SelectableCanvas.once


relativePan(point): void

Defined in: src/canvas/StaticCanvas.ts:402

Pans viewpoint relatively

Point

(position vector) to move by

void

SelectableCanvas.relativePan


removeListeners(): void

Defined in: src/canvas/Canvas.ts:210

Removes all event listeners, used when disposing the instance

void


renderAll(): void

Defined in: src/canvas/SelectableCanvas.ts:388

Renders both the top canvas and the secondary container canvas.

void

SelectableCanvas.renderAll


renderCanvas(ctx, objects): void

Defined in: src/canvas/StaticCanvas.ts:522

Renders background, objects, overlay and controls.

CanvasRenderingContext2D

FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]

to render

void

SelectableCanvas.renderCanvas


renderTop(): void

Defined in: src/canvas/SelectableCanvas.ts:428

Method to render only the top canvas. Also used to render the group selection box. Does not render text selection.

void

SelectableCanvas.renderTop


renderTopLayer(ctx): void

Defined in: src/canvas/SelectableCanvas.ts:409

text selection is rendered by the active text instance during the rendering cycle

CanvasRenderingContext2D

void

SelectableCanvas.renderTopLayer


requestRenderAll(): void

Defined in: src/canvas/StaticCanvas.ts:478

Append a renderAll request to next animation frame. unless one is already in progress, in that case nothing is done a boolean flag will avoid appending more.

void

SelectableCanvas.requestRenderAll


searchPossibleTargets(objects, pointer): TargetsInfoWithContainer

Defined in: src/canvas/SelectableCanvas.ts:936

Search inside an objects array the fiurst object that contains pointer Collect subTargets of that object inside the subTargets array passed as parameter

FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]

objects array to look into

Point

coordinates from viewport to check.

TargetsInfoWithContainer

top most object on screen that contains pointer

SelectableCanvas.searchPossibleTargets


sendObjectBackwards(object, intersecting?): boolean

Defined in: src/Collection.ts:214

Moves an object or a selection down in stack of drawn objects An optional parameter, intersecting allows to move the object in behind the first intersecting object. Where intersection is calculated with bounding box. If no intersection is found, there will not be change in the stack.

FabricObject

Object to send

boolean

If true, send object behind next lower intersecting object

boolean

true if change occurred

SelectableCanvas.sendObjectBackwards


sendObjectToBack(object): boolean

Defined in: src/Collection.ts:178

Moves an object or the objects of a multiple selection to the bottom of the stack of drawn objects

FabricObject

Object to send to back

boolean

true if change occurred

SelectableCanvas.sendObjectToBack


set(key, value?): Canvas

Defined in: src/CommonMethods.ts:29

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)

string | Record<string, any>

any

Property value (if function, the value is passed into it and its return value is used as a new one)

Canvas

SelectableCanvas.set


setActiveObject(object, e?): boolean

Defined in: src/canvas/SelectableCanvas.ts:1202

Sets given object as the only active object on canvas

FabricObject

Object to set as an active one

TPointerEvent

Event (passed along when firing “object:selected”)

boolean

true if the object has been selected

SelectableCanvas.setActiveObject


setCursor(value): void

Defined in: src/canvas/SelectableCanvas.ts:676

Set the cursor type of the canvas element

string

Cursor type of the canvas element.

void

http://www.w3.org/TR/css3-ui/#cursor

SelectableCanvas.setCursor


setDimensions(dimensions, options?): void

Defined in: src/canvas/StaticCanvas.ts:321

Sets dimensions (width, height) of this canvas instance. when options.cssOnly flag active you should also supply the unit of measure (px/%/em)

Partial<CSSDimensions>

Object with width/height properties

Options object

false

Set the given dimensions only as canvas backstore dimensions

true

Set the given dimensions only as css dimensions

void

SelectableCanvas.setDimensions

setDimensions(dimensions, options?): void

Defined in: src/canvas/StaticCanvas.ts:325

Sets dimensions (width, height) of this canvas instance. when options.cssOnly flag active you should also supply the unit of measure (px/%/em)

Partial<TSize>

Object with width/height properties

Options object

true

Set the given dimensions only as canvas backstore dimensions

false

Set the given dimensions only as css dimensions

void

SelectableCanvas.setDimensions

setDimensions(dimensions, options?): void

Defined in: src/canvas/StaticCanvas.ts:329

Sets dimensions (width, height) of this canvas instance. when options.cssOnly flag active you should also supply the unit of measure (px/%/em)

Partial<TSize>

Object with width/height properties

undefined

Options object

void

SelectableCanvas.setDimensions


setViewportTransform(vpt): void

Defined in: src/canvas/SelectableCanvas.ts:1340

Sets viewport transformation of this canvas instance

TMat2D

a Canvas 2D API transform matrix

void

SelectableCanvas.setViewportTransform


setZoom(value): void

Defined in: src/canvas/StaticCanvas.ts:383

Sets zoom level of this canvas instance

number

to set zoom to, less than 1 zooms out

void

SelectableCanvas.setZoom


size(): number

Defined in: src/Collection.ts:136

Returns a size of a collection (i.e: length of an array containing its objects)

number

Collection size

SelectableCanvas.size


toBlob(options): Promise<null | Blob>

Defined in: src/canvas/StaticCanvas.ts:1341

TDataUrlOptions = ...

Promise<null | Blob>

SelectableCanvas.toBlob


toCanvasElement(multiplier?, options?): HTMLCanvasElement

Defined in: src/canvas/StaticCanvas.ts:1372

Create a new HTMLCanvas element painted with the current canvas content. No need to resize the actual one or repaint it. Will transfer object ownership to a new canvas, paint it, and set everything back. This is an intermediary step used to get to a dataUrl but also it is useful to create quick image copies of a canvas without passing for the dataUrl string

number = 1

a zoom factor.

TToCanvasElementOptions = ...

Cropping informations

HTMLCanvasElement

SelectableCanvas.toCanvasElement


toDatalessJSON(propertiesToInclude?): any

Defined in: src/canvas/StaticCanvas.ts:764

Returns dataless JSON representation of canvas

string[]

Any properties that you might want to additionally include in the output

any

json string

SelectableCanvas.toDatalessJSON


toDatalessObject(propertiesToInclude?): any

Defined in: src/canvas/StaticCanvas.ts:800

Returns dataless object representation of canvas

string[]

Any properties that you might want to additionally include in the output

any

object representation of an instance

SelectableCanvas.toDatalessObject


toDataURL(options?): string

Defined in: src/canvas/StaticCanvas.ts:1325

Exports canvas element to a dataurl image. Note that when multiplier is used, cropping is scaled appropriately

TDataUrlOptions = ...

Options object

string

Returns a data: URL containing a representation of the object in the format specified by options.format

demo

var dataURL = canvas.toDataURL({
format: 'jpeg',
quality: 0.8
});
var dataURL = canvas.toDataURL({
format: 'png',
left: 100,
top: 100,
width: 200,
height: 200
});
var dataURL = canvas.toDataURL({
format: 'png',
multiplier: 2
});
var myObject;
var dataURL = canvas.toDataURL({
filter: (object) => object.isContainedWithinObject(myObject) || object.intersectsWithObject(myObject)
});

SelectableCanvas.toDataURL


toggle(property): Canvas

Defined in: src/CommonMethods.ts:46

Toggles specified property from true to false or from false to true

string

Property to toggle

Canvas

SelectableCanvas.toggle


toJSON(): any

Defined in: src/canvas/StaticCanvas.ts:791

Returns Object representation of canvas this alias is provided because if you call JSON.stringify on an instance, the toJSON object will be invoked if it exists. Having a toJSON method means you can do JSON.stringify(myCanvas) JSON does not support additional properties because toJSON has its own signature

any

JSON compatible object

const json = canvas.toJSON();
const json = JSON.stringify(canvas);

SelectableCanvas.toJSON


toObject(propertiesToInclude?): any

Defined in: src/canvas/StaticCanvas.ts:773

Returns object representation of canvas

string[]

Any properties that you might want to additionally include in the output

any

object representation of an instance

SelectableCanvas.toObject


toString(): string

Defined in: src/canvas/StaticCanvas.ts:1475

Returns a string representation of an instance

string

string representation of an instance

SelectableCanvas.toString


toSVG(options?, reviver?): string

Defined in: src/canvas/StaticCanvas.ts:938

Returns SVG representation of canvas

TSVGExportOptions = {}

Options object for SVG output

TSVGReviver

Method for further parsing of svg elements, called after each fabric object converted into svg representation.

string

SVG string

var svg = canvas.toSVG();
var svg = canvas.toSVG({suppressPreamble: true});
var svg = canvas.toSVG({
viewBox: {
x: 100,
y: 100,
width: 200,
height: 300
}
});
var svg = canvas.toSVG({encoding: 'ISO-8859-1'});
var svg = canvas.toSVG(null, function(svg) {
return svg.replace('stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; ', '');
});

SelectableCanvas.toSVG


viewportCenterObject(object): void

Defined in: src/canvas/StaticCanvas.ts:711

Centers object vertically and horizontally in the viewport

FabricObject

Object to center vertically and horizontally

void

SelectableCanvas.viewportCenterObject


viewportCenterObjectH(object): void

Defined in: src/canvas/StaticCanvas.ts:719

Centers object horizontally in the viewport, object.top is unchanged

FabricObject

Object to center vertically and horizontally

void

SelectableCanvas.viewportCenterObjectH


viewportCenterObjectV(object): void

Defined in: src/canvas/StaticCanvas.ts:730

Centers object Vertically in the viewport, object.top is unchanged

FabricObject

Object to center vertically and horizontally

void

SelectableCanvas.viewportCenterObjectV


zoomToPoint(point, value): void

Defined in: src/canvas/StaticCanvas.ts:366

Sets zoom level of this canvas instance, the zoom centered around point meaning that following zoom to point with the same point will have the visual effect of the zoom originating from that point. The point won’t move. It has nothing to do with canvas center or visual center of the viewport.

Point

to zoom with respect to

number

to set zoom to, less than 1 zooms out

void

SelectableCanvas.zoomToPoint


static getDefaults(): Record<string, any>

Defined in: src/canvas/SelectableCanvas.ts:306

Record<string, any>

SelectableCanvas.getDefaults