Canvas
Defined in: src/canvas/Canvas.ts:74
Extends
Section titled “Extends”SelectableCanvas
Implements
Section titled “Implements”Constructors
Section titled “Constructors”Constructor
Section titled “Constructor”new Canvas(
el?,options?):Canvas
Defined in: src/canvas/Canvas.ts:124
Parameters
Section titled “Parameters”string | HTMLCanvasElement
options?
Section titled “options?”TCanvasOptions = {}
Returns
Section titled “Returns”Canvas
Overrides
Section titled “Overrides”SelectableCanvas.constructor
Properties
Section titled “Properties”_activeObject?
Section titled “_activeObject?”
optional_activeObject:FabricObject<Partial<FabricObjectProps>,SerializedObjectProps,ObjectEvents>
Defined in: src/canvas/SelectableCanvas.ts:309
Inherited from
Section titled “Inherited from”SelectableCanvas._activeObject
_objects
Section titled “_objects”_objects:
FabricObject<Partial<FabricObjectProps>,SerializedObjectProps,ObjectEvents>[]
Defined in: src/canvas/SelectableCanvas.ts:153
needs to end up in the constructor too
Inherited from
Section titled “Inherited from”SelectableCanvas._objects
_offset
Section titled “_offset”_offset:
object
Defined in: src/canvas/StaticCanvas.ts:159
left:
number
top:
number
Inherited from
Section titled “Inherited from”SelectableCanvas._offset
allowTouchScrolling
Section titled “allowTouchScrolling”allowTouchScrolling:
boolean
Defined in: src/canvas/StaticCanvas.ts:123
move to Canvas
Implementation of
Section titled “Implementation of”CanvasOptions.allowTouchScrolling
Inherited from
Section titled “Inherited from”SelectableCanvas.allowTouchScrolling
altActionKey
Section titled “altActionKey”altActionKey:
TOptionalModifierKey
Defined in: src/canvas/SelectableCanvas.ts:161
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
Default
Section titled “Default”Implementation of
Section titled “Implementation of”Inherited from
Section titled “Inherited from”SelectableCanvas.altActionKey
altSelectionKey
Section titled “altSelectionKey”altSelectionKey:
TOptionalModifierKey
Defined in: src/canvas/SelectableCanvas.ts:166
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.
1.6.5
Default
Section titled “Default”Implementation of
Section titled “Implementation of”Inherited from
Section titled “Inherited from”SelectableCanvas.altSelectionKey
backgroundColor
Section titled “backgroundColor”backgroundColor:
string|TFiller
Defined in: src/canvas/StaticCanvas.ts:98
Background color of canvas instance.
Default
Section titled “Default”Implementation of
Section titled “Implementation of”Inherited from
Section titled “Inherited from”SelectableCanvas.backgroundColor
backgroundImage?
Section titled “backgroundImage?”
optionalbackgroundImage: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
Default
Section titled “Default”Implementation of
Section titled “Implementation of”Inherited from
Section titled “Inherited from”SelectableCanvas.backgroundImage
backgroundVpt
Section titled “backgroundVpt”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
Default
Section titled “Default”Implementation of
Section titled “Implementation of”Inherited from
Section titled “Inherited from”SelectableCanvas.backgroundVpt
centeredKey
Section titled “centeredKey”centeredKey:
TOptionalModifierKey
Defined in: src/canvas/SelectableCanvas.ts:160
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
Default
Section titled “Default”Implementation of
Section titled “Implementation of”Inherited from
Section titled “Inherited from”SelectableCanvas.centeredKey
centeredRotation
Section titled “centeredRotation”centeredRotation:
boolean
Defined in: src/canvas/SelectableCanvas.ts:159
When true, objects use center point as the origin of rotate transformation. Backwards incompatibility note: This property replaces “centerTransform” (Boolean).
1.3.4
Default
Section titled “Default”Implementation of
Section titled “Implementation of”CanvasOptions.centeredRotation
Inherited from
Section titled “Inherited from”SelectableCanvas.centeredRotation
centeredScaling
Section titled “centeredScaling”centeredScaling:
boolean
Defined in: src/canvas/SelectableCanvas.ts:158
When true, objects use center point as the origin of scale transformation. Backwards incompatibility note: This property replaces “centerTransform” (Boolean).
1.3.4
Default
Section titled “Default”Implementation of
Section titled “Implementation of”Inherited from
Section titled “Inherited from”SelectableCanvas.centeredScaling
clipPath?
Section titled “clipPath?”
optionalclipPath: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
Implementation of
Section titled “Implementation of”Inherited from
Section titled “Inherited from”SelectableCanvas.clipPath
containerClass
Section titled “containerClass”containerClass:
string
Defined in: src/canvas/SelectableCanvas.ts:180
Default element class that’s given to wrapper (div) element of canvas
Default
Section titled “Default”Implementation of
Section titled “Implementation of”Inherited from
Section titled “Inherited from”SelectableCanvas.containerClass
controlsAboveOverlay
Section titled “controlsAboveOverlay”controlsAboveOverlay:
boolean
Defined in: src/canvas/StaticCanvas.ts:118
move to Canvas
Implementation of
Section titled “Implementation of”CanvasOptions.controlsAboveOverlay
Inherited from
Section titled “Inherited from”SelectableCanvas.controlsAboveOverlay
defaultCursor
Section titled “defaultCursor”defaultCursor:
string
Defined in: src/canvas/SelectableCanvas.ts:176
Default cursor value used for the entire canvas
Default
Section titled “Default”defaultImplementation of
Section titled “Implementation of”Inherited from
Section titled “Inherited from”SelectableCanvas.defaultCursor
destroyed?
Section titled “destroyed?”
optionaldestroyed: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.
Inherited from
Section titled “Inherited from”SelectableCanvas.destroyed
disposed?
Section titled “disposed?”
optionaldisposed: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.
Inherited from
Section titled “Inherited from”SelectableCanvas.disposed
elements
Section titled “elements”elements:
CanvasDOMManager
Defined in: src/canvas/SelectableCanvas.ts:294
Inherited from
Section titled “Inherited from”SelectableCanvas.elements
enablePointerEvents
Section titled “enablePointerEvents”enablePointerEvents:
boolean
Defined in: src/canvas/Canvas.ts:82
When the option is enabled, PointerEvent is used instead of TPointerEvent.
Default
Section titled “Default”Implementation of
Section titled “Implementation of”CanvasOptions.enablePointerEvents
enableRetinaScaling
Section titled “enableRetinaScaling”enableRetinaScaling:
boolean
Defined in: src/canvas/StaticCanvas.ts:112
When true, canvas is scaled by devicePixelRatio for better rendering on retina screens
Default
Section titled “Default”Implementation of
Section titled “Implementation of”CanvasOptions.enableRetinaScaling
Inherited from
Section titled “Inherited from”SelectableCanvas.enableRetinaScaling
fireMiddleClick
Section titled “fireMiddleClick”fireMiddleClick:
boolean
Defined in: src/canvas/SelectableCanvas.ts:202
Indicates if the canvas can fire middle click events
1.7.8
Default
Section titled “Default”Implementation of
Section titled “Implementation of”Inherited from
Section titled “Inherited from”SelectableCanvas.fireMiddleClick
fireRightClick
Section titled “fireRightClick”fireRightClick:
boolean
Defined in: src/canvas/SelectableCanvas.ts:201
Indicates if the canvas can fire right click events
1.6.5
Default
Section titled “Default”Implementation of
Section titled “Implementation of”Inherited from
Section titled “Inherited from”SelectableCanvas.fireRightClick
freeDrawingBrush?
Section titled “freeDrawingBrush?”
optionalfreeDrawingBrush:BaseBrush
Defined in: src/canvas/SelectableCanvas.ts:308
Inherited from
Section titled “Inherited from”SelectableCanvas.freeDrawingBrush
freeDrawingCursor
Section titled “freeDrawingCursor”freeDrawingCursor:
string
Defined in: src/canvas/SelectableCanvas.ts:177
Cursor value used during free drawing
Default
Section titled “Default”crosshairImplementation of
Section titled “Implementation of”CanvasOptions.freeDrawingCursor
Inherited from
Section titled “Inherited from”SelectableCanvas.freeDrawingCursor
height
Section titled “height”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
Implementation of
Section titled “Implementation of”Inherited from
Section titled “Inherited from”SelectableCanvas.height
hoverCursor
Section titled “hoverCursor”hoverCursor:
string
Defined in: src/canvas/SelectableCanvas.ts:174
Default cursor value used when hovering over an object on canvas
Default
Section titled “Default”moveImplementation of
Section titled “Implementation of”Inherited from
Section titled “Inherited from”SelectableCanvas.hoverCursor
imageSmoothingEnabled
Section titled “imageSmoothingEnabled”imageSmoothingEnabled:
boolean
Defined in: src/canvas/StaticCanvas.ts:113
Indicates whether this canvas will use image smoothing, this is on by default in browsers
Default
Section titled “Default”Implementation of
Section titled “Implementation of”CanvasOptions.imageSmoothingEnabled
Inherited from
Section titled “Inherited from”SelectableCanvas.imageSmoothingEnabled
includeDefaultValues
Section titled “includeDefaultValues”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.
Default
Section titled “Default”Implementation of
Section titled “Implementation of”CanvasOptions.includeDefaultValues
Inherited from
Section titled “Inherited from”SelectableCanvas.includeDefaultValues
isDrawingMode
Section titled “isDrawingMode”isDrawingMode:
boolean
Defined in: src/canvas/SelectableCanvas.ts:195
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.
Tutorial
Section titled “Tutorial”http://fabricjs.com/fabric-intro-part-4#free_drawing
Default
Section titled “Default”Inherited from
Section titled “Inherited from”SelectableCanvas.isDrawingMode
moveCursor
Section titled “moveCursor”moveCursor:
string
Defined in: src/canvas/SelectableCanvas.ts:175
Default cursor value used when moving an object on canvas
Default
Section titled “Default”moveImplementation of
Section titled “Implementation of”Inherited from
Section titled “Inherited from”SelectableCanvas.moveCursor
notAllowedCursor
Section titled “notAllowedCursor”notAllowedCursor:
string
Defined in: src/canvas/SelectableCanvas.ts:178
Cursor value used for disabled elements ( corners with disabled action )
2.0.0
Default
Section titled “Default”not-allowedImplementation of
Section titled “Implementation of”CanvasOptions.notAllowedCursor
Inherited from
Section titled “Inherited from”SelectableCanvas.notAllowedCursor
overlayColor
Section titled “overlayColor”overlayColor:
string|TFiller
Defined in: src/canvas/StaticCanvas.ts:102
Overlay color of canvas instance.
1.3.9
Default
Section titled “Default”Implementation of
Section titled “Implementation of”Inherited from
Section titled “Inherited from”SelectableCanvas.overlayColor
overlayImage?
Section titled “overlayImage?”
optionaloverlayImage: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
Default
Section titled “Default”Implementation of
Section titled “Implementation of”Inherited from
Section titled “Inherited from”SelectableCanvas.overlayImage
overlayVpt
Section titled “overlayVpt”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
Default
Section titled “Default”Implementation of
Section titled “Implementation of”Inherited from
Section titled “Inherited from”SelectableCanvas.overlayVpt
perPixelTargetFind
Section titled “perPixelTargetFind”perPixelTargetFind:
boolean
Defined in: src/canvas/SelectableCanvas.ts:183
When true, object detection happens on per-pixel basis rather than on per-bounding-box
Default
Section titled “Default”Implementation of
Section titled “Implementation of”CanvasOptions.perPixelTargetFind
Inherited from
Section titled “Inherited from”SelectableCanvas.perPixelTargetFind
preserveObjectStacking
Section titled “preserveObjectStacking”preserveObjectStacking:
boolean
Defined in: src/canvas/SelectableCanvas.ts:197
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
Section titled “Default”Implementation of
Section titled “Implementation of”CanvasOptions.preserveObjectStacking
Inherited from
Section titled “Inherited from”SelectableCanvas.preserveObjectStacking
renderOnAddRemove
Section titled “renderOnAddRemove”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.
Default
Section titled “Default”Implementation of
Section titled “Implementation of”CanvasOptions.renderOnAddRemove
Inherited from
Section titled “Inherited from”SelectableCanvas.renderOnAddRemove
selection
Section titled “selection”selection:
boolean
Defined in: src/canvas/SelectableCanvas.ts:164
Indicates whether group selection should be enabled
Default
Section titled “Default”Implementation of
Section titled “Implementation of”Inherited from
Section titled “Inherited from”SelectableCanvas.selection
selectionBorderColor
Section titled “selectionBorderColor”selectionBorderColor:
string
Defined in: src/canvas/SelectableCanvas.ts:169
Color of the border of selection (usually slightly darker than color of selection itself)
Default
Section titled “Default”Implementation of
Section titled “Implementation of”CanvasOptions.selectionBorderColor
Inherited from
Section titled “Inherited from”SelectableCanvas.selectionBorderColor
selectionColor
Section titled “selectionColor”selectionColor:
string
Defined in: src/canvas/SelectableCanvas.ts:167
Color of selection
Default
Section titled “Default”Implementation of
Section titled “Implementation of”Inherited from
Section titled “Inherited from”SelectableCanvas.selectionColor
selectionDashArray
Section titled “selectionDashArray”selectionDashArray:
number[]
Defined in: src/canvas/SelectableCanvas.ts:168
Default dash array pattern If not empty the selection border is dashed
Implementation of
Section titled “Implementation of”CanvasOptions.selectionDashArray
Inherited from
Section titled “Inherited from”SelectableCanvas.selectionDashArray
selectionFullyContained
Section titled “selectionFullyContained”selectionFullyContained:
boolean
Defined in: src/canvas/SelectableCanvas.ts:171
Select only shapes that are fully contained in the dragged selection rectangle.
Default
Section titled “Default”Implementation of
Section titled “Implementation of”CanvasOptions.selectionFullyContained
Inherited from
Section titled “Inherited from”SelectableCanvas.selectionFullyContained
selectionKey
Section titled “selectionKey”selectionKey:
TOptionalModifierKey| ("altKey"|"ctrlKey"|"metaKey"|"shiftKey")[]
Defined in: src/canvas/SelectableCanvas.ts:165
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
Default
Section titled “Default”Implementation of
Section titled “Implementation of”Inherited from
Section titled “Inherited from”SelectableCanvas.selectionKey
selectionLineWidth
Section titled “selectionLineWidth”selectionLineWidth:
number
Defined in: src/canvas/SelectableCanvas.ts:170
Width of a line used in object/group selection
Default
Section titled “Default”Implementation of
Section titled “Implementation of”CanvasOptions.selectionLineWidth
Inherited from
Section titled “Inherited from”SelectableCanvas.selectionLineWidth
skipOffscreen
Section titled “skipOffscreen”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.
Default
Section titled “Default”trueImplementation of
Section titled “Implementation of”Inherited from
Section titled “Inherited from”SelectableCanvas.skipOffscreen
skipTargetFind
Section titled “skipTargetFind”skipTargetFind:
boolean
Defined in: src/canvas/SelectableCanvas.ts:185
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
Section titled “Default”Implementation of
Section titled “Implementation of”Inherited from
Section titled “Inherited from”SelectableCanvas.skipTargetFind
stopContextMenu
Section titled “stopContextMenu”stopContextMenu:
boolean
Defined in: src/canvas/SelectableCanvas.ts:200
Indicates if the right click on canvas can output the context menu or not
1.6.5
Default
Section titled “Default”Implementation of
Section titled “Implementation of”Inherited from
Section titled “Inherited from”SelectableCanvas.stopContextMenu
svgViewportTransformation
Section titled “svgViewportTransformation”svgViewportTransformation:
boolean
Defined in: src/canvas/StaticCanvas.ts:954
When true, getSvgTransform() will apply the StaticCanvas.viewportTransform to the SVG transformation. When true, a zoomed canvas will then produce zoomed SVG output.
Default
Section titled “Default”Implementation of
Section titled “Implementation of”CanvasOptions.svgViewportTransformation
Inherited from
Section titled “Inherited from”SelectableCanvas.svgViewportTransformation
targetFindTolerance
Section titled “targetFindTolerance”targetFindTolerance:
number
Defined in: src/canvas/SelectableCanvas.ts:184
Number of pixels around target pixel to tolerate (consider active) during object detection
Default
Section titled “Default”Implementation of
Section titled “Implementation of”CanvasOptions.targetFindTolerance
Inherited from
Section titled “Inherited from”SelectableCanvas.targetFindTolerance
targets
Section titled “targets”targets:
FabricObject<Partial<FabricObjectProps>,SerializedObjectProps,ObjectEvents>[] =[]
Defined in: src/canvas/SelectableCanvas.ts:208
Keep track of the subTargets for Mouse Events, ordered bottom up from innermost nested subTarget
Inherited from
Section titled “Inherited from”SelectableCanvas.targets
textEditingManager
Section titled “textEditingManager”textEditingManager:
TextEditingManager
Defined in: src/canvas/Canvas.ts:122
uniformScaling
Section titled “uniformScaling”uniformScaling:
boolean
Defined in: src/canvas/SelectableCanvas.ts:156
When true, objects can be transformed by one side (unproportionately) when dragged on the corners that normally would not do that.
Default
Section titled “Default”fabric 4.0 // changed name and default value
Implementation of
Section titled “Implementation of”Inherited from
Section titled “Inherited from”SelectableCanvas.uniformScaling
uniScaleKey
Section titled “uniScaleKey”uniScaleKey:
TOptionalModifierKey
Defined in: src/canvas/SelectableCanvas.ts:157
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
Default
Section titled “Default”Implementation of
Section titled “Implementation of”Inherited from
Section titled “Inherited from”SelectableCanvas.uniScaleKey
viewportTransform
Section titled “viewportTransform”viewportTransform:
TMat2D
Defined in: src/canvas/StaticCanvas.ts:125
The transformation (a Canvas 2D API transform matrix) which focuses the viewport
Examples
Section titled “Examples”canvas.viewportTransform = [1, 0, 0, 1, 0, 0];canvas.viewportTransform = [0.7, 0, 0, 0.7, 50, 50];Default
Section titled “Default”Implementation of
Section titled “Implementation of”CanvasOptions.viewportTransform
Inherited from
Section titled “Inherited from”SelectableCanvas.viewportTransform
vptCoords
Section titled “vptCoords”vptCoords:
TCornerPoint
Defined in: src/canvas/StaticCanvas.ts:130
The viewport bounding box in scene plane coordinates, see calcViewportBoundaries
Inherited from
Section titled “Inherited from”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
Implementation of
Section titled “Implementation of”Inherited from
Section titled “Inherited from”SelectableCanvas.width
ownDefaults
Section titled “ownDefaults”
staticownDefaults:TOptions<CanvasOptions> =canvasDefaults
Defined in: src/canvas/SelectableCanvas.ts:288
Inherited from
Section titled “Inherited from”SelectableCanvas.ownDefaults
Accessors
Section titled “Accessors”contextContainer
Section titled “contextContainer”Get Signature
Section titled “Get Signature”get contextContainer():
CanvasRenderingContext2D
Defined in: src/canvas/StaticCanvas.ts:141
Returns
Section titled “Returns”CanvasRenderingContext2D
Inherited from
Section titled “Inherited from”SelectableCanvas.contextContainer
contextTop
Section titled “contextTop”Get Signature
Section titled “Get Signature”get contextTop():
CanvasRenderingContext2D
Defined in: src/canvas/SelectableCanvas.ts:298
Returns
Section titled “Returns”CanvasRenderingContext2D
Inherited from
Section titled “Inherited from”SelectableCanvas.contextTop
lowerCanvasEl
Section titled “lowerCanvasEl”Get Signature
Section titled “Get Signature”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
Returns
Section titled “Returns”HTMLCanvasElement
Inherited from
Section titled “Inherited from”SelectableCanvas.lowerCanvasEl
upperCanvasEl
Section titled “upperCanvasEl”Get Signature
Section titled “Get Signature”get upperCanvasEl():
HTMLCanvasElement
Defined in: src/canvas/SelectableCanvas.ts:295
Returns
Section titled “Returns”HTMLCanvasElement
Inherited from
Section titled “Inherited from”SelectableCanvas.upperCanvasEl
wrapperEl
Section titled “wrapperEl”Get Signature
Section titled “Get Signature”get wrapperEl():
HTMLDivElement
Defined in: src/canvas/SelectableCanvas.ts:301
Returns
Section titled “Returns”HTMLDivElement
Inherited from
Section titled “Inherited from”SelectableCanvas.wrapperEl
Methods
Section titled “Methods”__onMouseWheel()
Section titled “__onMouseWheel()”__onMouseWheel(
e):void
Defined in: src/canvas/Canvas.ts:1306
Method that defines actions when an Event Mouse Wheel
Parameters
Section titled “Parameters”Event object fired on mouseup
Returns
Section titled “Returns”void
_basicEventHandler()
Section titled “_basicEventHandler()”_basicEventHandler<
T>(eventType,options):CanvasEvents&ObjectEvents[T]
Defined in: src/canvas/Canvas.ts:904
Type Parameters
Section titled “Type Parameters”T extends "contextmenu" | "drag" | "dragend" | "dragenter" | "dragleave" | "dragover" | "dragstart" | "drop" | "erasing:end" | "drop:before" | "drop:after" | "contextmenu:before"
Parameters
Section titled “Parameters”eventType
Section titled “eventType”T
options
Section titled “options”CanvasEvents & ObjectEvents[T]
Returns
Section titled “Returns”CanvasEvents & ObjectEvents[T]
_chooseObjectsToRender()
Section titled “_chooseObjectsToRender()”_chooseObjectsToRender():
FabricObject<Partial<FabricObjectProps>,SerializedObjectProps,ObjectEvents>[]
Defined in: src/canvas/SelectableCanvas.ts:360
Divides objects in two groups, one to render immediately and one to render as activeGroup.
Returns
Section titled “Returns”FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]
objects to render immediately and pushes the other in the activeGroup.
Inherited from
Section titled “Inherited from”SelectableCanvas._chooseObjectsToRender
_discardActiveObject()
Section titled “_discardActiveObject()”_discardActiveObject(
e?,object?):this is { _activeObject: undefined }
Defined in: src/canvas/SelectableCanvas.ts:1179
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.
Parameters
Section titled “Parameters”Event (passed along when firing “object:deselected”)
object?
Section titled “object?”FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>
the next object to set as active, reason why we are discarding this
Returns
Section titled “Returns”this is { _activeObject: undefined }
true if the active object has been discarded
Inherited from
Section titled “Inherited from”SelectableCanvas._discardActiveObject
_onStackOrderChanged()
Section titled “_onStackOrderChanged()”_onStackOrderChanged():
void
Defined in: src/canvas/SelectableCanvas.ts:350
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”SelectableCanvas._onStackOrderChanged
_set()
Section titled “_set()”_set(
key,value):void
Defined in: src/CommonMethods.ts:38
Parameters
Section titled “Parameters”string
any
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”SelectableCanvas._set
_setActiveObject()
Section titled “_setActiveObject()”_setActiveObject(
object,e?):boolean
Defined in: src/canvas/SelectableCanvas.ts:1147
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.
Parameters
Section titled “Parameters”object
Section titled “object”to set as active
Event (passed along when firing “object:selected”)
Returns
Section titled “Returns”boolean
true if the object has been selected
Inherited from
Section titled “Inherited from”SelectableCanvas._setActiveObject
_setCursorFromEvent()
Section titled “_setCursorFromEvent()”_setCursorFromEvent(
e,target?):void
Defined in: src/canvas/Canvas.ts:1364
Sets the cursor depending on where the canvas is being hovered. Note: very buggy in Opera
Parameters
Section titled “Parameters”Event object
target?
Section titled “target?”FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>
Object that the mouse is hovering, if so.
Returns
Section titled “Returns”void
absolutePan()
Section titled “absolutePan()”absolutePan(
point):void
Defined in: src/canvas/StaticCanvas.ts:431
Pan viewport so as to place point at top left corner of canvas
Parameters
Section titled “Parameters”to move to
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”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
Parameters
Section titled “Parameters”objects
Section titled “objects”…FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]
to add
Returns
Section titled “Returns”number
new array length
Inherited from
Section titled “Inherited from”SelectableCanvas.add
addOrRemove()
Section titled “addOrRemove()”addOrRemove(
functor,_eventjsFunctor):void
Defined in: src/canvas/Canvas.ts:169
Parameters
Section titled “Parameters”functor
Section titled “functor”any
_eventjsFunctor
Section titled “_eventjsFunctor”"add" | "remove"
Returns
Section titled “Returns”void
bringObjectForward()
Section titled “bringObjectForward()”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.
Parameters
Section titled “Parameters”object
Section titled “object”Object to send
intersecting?
Section titled “intersecting?”boolean
If true, send object in front of next upper intersecting object
Returns
Section titled “Returns”boolean
true if change occurred
Inherited from
Section titled “Inherited from”SelectableCanvas.bringObjectForward
bringObjectToFront()
Section titled “bringObjectToFront()”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
Parameters
Section titled “Parameters”object
Section titled “object”Object to send
Returns
Section titled “Returns”boolean
true if change occurred
Inherited from
Section titled “Inherited from”SelectableCanvas.bringObjectToFront
calcOffset()
Section titled “calcOffset()”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
Returns
Section titled “Returns”object
left:
number=0
top:
number=0
Inherited from
Section titled “Inherited from”SelectableCanvas.calcOffset
calcViewportBoundaries()
Section titled “calcViewportBoundaries()”calcViewportBoundaries():
TCornerPoint
Defined in: src/canvas/StaticCanvas.ts:528
Calculate the position of the 4 corner of canvas with current viewportTransform. helps to determinate when an object is in the current rendering viewport
Returns
Section titled “Returns”Inherited from
Section titled “Inherited from”SelectableCanvas.calcViewportBoundaries
cancelRequestedRender()
Section titled “cancelRequestedRender()”cancelRequestedRender():
void
Defined in: src/canvas/StaticCanvas.ts:546
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”SelectableCanvas.cancelRequestedRender
centerObject()
Section titled “centerObject()”centerObject(
object):void
Defined in: src/canvas/StaticCanvas.ts:756
Centers object vertically and horizontally in the canvas
Parameters
Section titled “Parameters”object
Section titled “object”Object to center vertically and horizontally
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”SelectableCanvas.centerObject
centerObjectH()
Section titled “centerObjectH()”centerObjectH(
object):void
Defined in: src/canvas/StaticCanvas.ts:734
Centers object horizontally in the canvas
Parameters
Section titled “Parameters”object
Section titled “object”Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”SelectableCanvas.centerObjectH
centerObjectV()
Section titled “centerObjectV()”centerObjectV(
object):void
Defined in: src/canvas/StaticCanvas.ts:745
Centers object vertically in the canvas
Parameters
Section titled “Parameters”object
Section titled “object”Object to center vertically
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”SelectableCanvas.centerObjectV
clear()
Section titled “clear()”clear():
void
Defined in: src/canvas/Canvas.ts:1555
clear textEditingManager
Returns
Section titled “Returns”void
Overrides
Section titled “Overrides”SelectableCanvas.clear
clearContext()
Section titled “clearContext()”clearContext(
ctx):void
Defined in: src/canvas/StaticCanvas.ts:463
Clears specified context of canvas element
Parameters
Section titled “Parameters”CanvasRenderingContext2D
Context to clear
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”SelectableCanvas.clearContext
clone()
Section titled “clone()”clone(
properties?):Promise<Canvas>
Defined in: src/canvas/StaticCanvas.ts:1327
Clones canvas instance
Parameters
Section titled “Parameters”properties?
Section titled “properties?”string[]
Array of properties to include in the cloned canvas and children
Returns
Section titled “Returns”Promise<Canvas>
Inherited from
Section titled “Inherited from”SelectableCanvas.clone
cloneWithoutData()
Section titled “cloneWithoutData()”cloneWithoutData():
Canvas
Defined in: src/canvas/StaticCanvas.ts:1337
Clones canvas instance without cloning existing data. This essentially copies canvas dimensions since loadFromJSON does not affect canvas size.
Returns
Section titled “Returns”Canvas
Inherited from
Section titled “Inherited from”SelectableCanvas.cloneWithoutData
collectObjects()
Section titled “collectObjects()”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.
Parameters
Section titled “Parameters”a bounding box in scene coordinates
options
Section titled “options”an object with includeIntersecting
includeIntersecting?
Section titled “includeIntersecting?”boolean = true
Returns
Section titled “Returns”InteractiveFabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]
array of objects contained in the bounding box, ordered from top to bottom stacking wise
Inherited from
Section titled “Inherited from”SelectableCanvas.collectObjects
complexity()
Section titled “complexity()”complexity():
number
Defined in: src/Collection.ts:165
Returns number representation of a collection complexity
Returns
Section titled “Returns”number
complexity
Inherited from
Section titled “Inherited from”SelectableCanvas.complexity
contains()
Section titled “contains()”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)
Parameters
Section titled “Parameters”object
Section titled “object”Object to check against
boolean
true to check all descendants, false to check only _objects
Returns
Section titled “Returns”boolean
true if collection contains an object
Inherited from
Section titled “Inherited from”SelectableCanvas.contains
createSVGClipPathMarkup()
Section titled “createSVGClipPathMarkup()”createSVGClipPathMarkup(
options):string
Defined in: src/canvas/StaticCanvas.ts:1080
Parameters
Section titled “Parameters”options
Section titled “options”Returns
Section titled “Returns”string
Inherited from
Section titled “Inherited from”SelectableCanvas.createSVGClipPathMarkup
createSVGFontFacesMarkup()
Section titled “createSVGFontFacesMarkup()”createSVGFontFacesMarkup():
string
Defined in: src/canvas/StaticCanvas.ts:1123
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
Returns
Section titled “Returns”string
Inherited from
Section titled “Inherited from”SelectableCanvas.createSVGFontFacesMarkup
createSVGRefElementsMarkup()
Section titled “createSVGRefElementsMarkup()”createSVGRefElementsMarkup():
string
Defined in: src/canvas/StaticCanvas.ts:1095
Creates markup containing SVG referenced elements like patterns, gradients etc.
Returns
Section titled “Returns”string
Inherited from
Section titled “Inherited from”SelectableCanvas.createSVGRefElementsMarkup
destroy()
Section titled “destroy()”destroy():
void
Defined in: src/canvas/Canvas.ts:1563
clear textEditingManager
Returns
Section titled “Returns”void
Overrides
Section titled “Overrides”SelectableCanvas.destroy
discardActiveObject()
Section titled “discardActiveObject()”discardActiveObject(
e?):this is { _activeObject: undefined }
Defined in: src/canvas/SelectableCanvas.ts:1209
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.
Parameters
Section titled “Parameters”Returns
Section titled “Returns”this is { _activeObject: undefined }
true if the active object has been discarded
Inherited from
Section titled “Inherited from”SelectableCanvas.discardActiveObject
dispose()
Section titled “dispose()”dispose():
Promise<boolean>
Defined in: src/canvas/StaticCanvas.ts:1471
Waits until rendering has settled to destroy the canvas
Returns
Section titled “Returns”Promise<boolean>
a promise resolving to true once the canvas has been destroyed or to false if the canvas has was already destroyed
Throws
Section titled “Throws”if aborted by a consequent call
Inherited from
Section titled “Inherited from”SelectableCanvas.dispose
drawClipPathOnCanvas()
Section titled “drawClipPathOnCanvas()”drawClipPathOnCanvas(
ctx,clipPath):void
Defined in: src/canvas/StaticCanvas.ts:610
Paint the cached clipPath on the lowerCanvasEl
Parameters
Section titled “Parameters”CanvasRenderingContext2D
Context to render on
clipPath
Section titled “clipPath”TCachedFabricObject
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”SelectableCanvas.drawClipPathOnCanvas
drawControls()
Section titled “drawControls()”drawControls(
ctx):void
Defined in: src/canvas/SelectableCanvas.ts:1317
Draws objects’ controls (borders/controls)
Parameters
Section titled “Parameters”CanvasRenderingContext2D
Context to render controls on
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”SelectableCanvas.drawControls
endCurrentTransform()
Section titled “endCurrentTransform()”endCurrentTransform(
e?):void
Defined in: src/canvas/SelectableCanvas.ts:1229
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 )
Parameters
Section titled “Parameters”send the mouse event that generate the finalize down, so it can be used in the event
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”SelectableCanvas.endCurrentTransform
findNewLowerIndex()
Section titled “findNewLowerIndex()”findNewLowerIndex(
object,idx,intersecting?):number
Defined in: src/Collection.ts:272
Parameters
Section titled “Parameters”object
Section titled “object”number
intersecting?
Section titled “intersecting?”boolean
Returns
Section titled “Returns”number
Inherited from
Section titled “Inherited from”SelectableCanvas.findNewLowerIndex
findNewUpperIndex()
Section titled “findNewUpperIndex()”findNewUpperIndex(
object,idx,intersecting?):number
Defined in: src/Collection.ts:295
Parameters
Section titled “Parameters”object
Section titled “object”number
intersecting?
Section titled “intersecting?”boolean
Returns
Section titled “Returns”number
Inherited from
Section titled “Inherited from”SelectableCanvas.findNewUpperIndex
findTarget()
Section titled “findTarget()”findTarget(
e):undefined|FabricObject<Partial<FabricObjectProps>,SerializedObjectProps,ObjectEvents>
Defined in: src/canvas/SelectableCanvas.ts:712
Method that determines what object we are clicking on 11/09/2018 TODO: would be cool if findTarget could discern between being a full target or the outside part of the corner.
Parameters
Section titled “Parameters”mouse event
Returns
Section titled “Returns”undefined | FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>
the target found
Inherited from
Section titled “Inherited from”SelectableCanvas.findTarget
fire()
Section titled “fire()”fire<
K>(eventName,options?):void
Defined in: src/Observable.ts:167
Fires event with an optional options object
Type Parameters
Section titled “Type Parameters”K extends keyof CanvasEvents
Parameters
Section titled “Parameters”eventName
Section titled “eventName”K
Event name to fire
options?
Section titled “options?”CanvasEvents[K]
Options object
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”SelectableCanvas.fire
forEachObject()
Section titled “forEachObject()”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.
Parameters
Section titled “Parameters”callback
Section titled “callback”(object, index, array) => any
Callback invoked with current object as first argument, index - as second and an array of all objects - as third.
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”SelectableCanvas.forEachObject
get(
property):any
Defined in: src/CommonMethods.ts:59
Basic getter
Parameters
Section titled “Parameters”property
Section titled “property”string
Property name
Returns
Section titled “Returns”any
value of a property
Inherited from
Section titled “Inherited from”SelectableCanvas.get
getActiveObject()
Section titled “getActiveObject()”getActiveObject():
undefined|FabricObject<Partial<FabricObjectProps>,SerializedObjectProps,ObjectEvents>
Defined in: src/canvas/SelectableCanvas.ts:1049
Returns currently active object
Returns
Section titled “Returns”undefined | FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>
active object
Inherited from
Section titled “Inherited from”SelectableCanvas.getActiveObject
getActiveObjects()
Section titled “getActiveObjects()”getActiveObjects():
FabricObject<Partial<FabricObjectProps>,SerializedObjectProps,ObjectEvents>[]
Defined in: src/canvas/SelectableCanvas.ts:1057
Returns an array with the current selected objects
Returns
Section titled “Returns”FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]
active objects array
Inherited from
Section titled “Inherited from”SelectableCanvas.getActiveObjects
getCenter()
Section titled “getCenter()”getCenter():
object
Defined in: src/canvas/StaticCanvas.ts:716
Returns coordinates of a center of canvas. Returned value is an object with top and left properties
Returns
Section titled “Returns”object
object with “top” and “left” number values
left:
number
top:
number
Inherited from
Section titled “Inherited from”SelectableCanvas.getCenter
getCenterPoint()
Section titled “getCenterPoint()”getCenterPoint():
Point
Defined in: src/canvas/StaticCanvas.ts:727
Returns coordinates of a center of canvas.
Returns
Section titled “Returns”Inherited from
Section titled “Inherited from”SelectableCanvas.getCenterPoint
getContext()
Section titled “getContext()”getContext():
CanvasRenderingContext2D
Defined in: src/canvas/StaticCanvas.ts:471
Returns context of canvas where objects are drawn
Returns
Section titled “Returns”CanvasRenderingContext2D
Inherited from
Section titled “Inherited from”SelectableCanvas.getContext
getElement()
Section titled “getElement()”getElement():
HTMLCanvasElement
Defined in: src/canvas/StaticCanvas.ts:455
Returns <canvas> element corresponding to this instance
Returns
Section titled “Returns”HTMLCanvasElement
Inherited from
Section titled “Inherited from”SelectableCanvas.getElement
getHeight()
Section titled “getHeight()”getHeight():
number
Defined in: src/canvas/StaticCanvas.ts:282
Returns canvas height (in px)
Returns
Section titled “Returns”number
Inherited from
Section titled “Inherited from”SelectableCanvas.getHeight
getObjects()
Section titled “getObjects()”getObjects(…
types?):FabricObject<Partial<FabricObjectProps>,SerializedObjectProps,ObjectEvents>[]
Defined in: src/Collection.ts:108
Returns an array of children objects of this instance
Parameters
Section titled “Parameters”types?
Section titled “types?”…string[]
When specified, only objects of these types are returned
Returns
Section titled “Returns”FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]
Inherited from
Section titled “Inherited from”SelectableCanvas.getObjects
getPointer()
Section titled “getPointer()”getPointer(
e,fromViewport?):Point
Defined in: src/canvas/SelectableCanvas.ts:954
Returns pointer relative to canvas.
Parameters
Section titled “Parameters”fromViewport?
Section titled “fromViewport?”boolean = false
whether to return the point from the viewport or in the scene
Returns
Section titled “Returns”Inherited from
Section titled “Inherited from”SelectableCanvas.getPointer
getScenePoint()
Section titled “getScenePoint()”getScenePoint(
e):Point
Defined in: src/canvas/SelectableCanvas.ts:937
Parameters
Section titled “Parameters”Returns
Section titled “Returns”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.
Example
Section titled “Example”const viewportPoint = sendPointToPlane( this.getScenePoint(e), canvas.viewportTransform);Inherited from
Section titled “Inherited from”SelectableCanvas.getScenePoint
getSelectionContext()
Section titled “getSelectionContext()”getSelectionContext():
CanvasRenderingContext2D
Defined in: src/canvas/SelectableCanvas.ts:1033
Returns context of canvas where object selection is drawn
Returns
Section titled “Returns”CanvasRenderingContext2D
Inherited from
Section titled “Inherited from”SelectableCanvas.getSelectionContext
getSelectionElement()
Section titled “getSelectionElement()”getSelectionElement():
HTMLCanvasElement
Defined in: src/canvas/SelectableCanvas.ts:1041
Returns <canvas> element on which object selection is drawn
Returns
Section titled “Returns”HTMLCanvasElement
Inherited from
Section titled “Inherited from”SelectableCanvas.getSelectionElement
getTopContext()
Section titled “getTopContext()”getTopContext():
CanvasRenderingContext2D
Defined in: src/canvas/SelectableCanvas.ts:1024
Returns context of top canvas where interactions are drawn
Returns
Section titled “Returns”CanvasRenderingContext2D
Inherited from
Section titled “Inherited from”SelectableCanvas.getTopContext
getViewportPoint()
Section titled “getViewportPoint()”getViewportPoint(
e):Point
Defined in: src/canvas/SelectableCanvas.ts:918
Parameters
Section titled “Parameters”Returns
Section titled “Returns”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.
Example
Section titled “Example”const scenePoint = sendPointToPlane( this.getViewportPoint(e), undefined, canvas.viewportTransform);Inherited from
Section titled “Inherited from”SelectableCanvas.getViewportPoint
getVpCenter()
Section titled “getVpCenter()”getVpCenter():
Point
Defined in: src/canvas/StaticCanvas.ts:794
Calculate the point in canvas that correspond to the center of actual viewport.
Returns
Section titled “Returns”vpCenter, viewport center
Inherited from
Section titled “Inherited from”SelectableCanvas.getVpCenter
getWidth()
Section titled “getWidth()”getWidth():
number
Defined in: src/canvas/StaticCanvas.ts:274
Returns canvas width (in px)
Returns
Section titled “Returns”number
Inherited from
Section titled “Inherited from”SelectableCanvas.getWidth
getZoom()
Section titled “getZoom()”getZoom():
number
Defined in: src/canvas/StaticCanvas.ts:384
Returns canvas zoom level
Returns
Section titled “Returns”number
Inherited from
Section titled “Inherited from”SelectableCanvas.getZoom
insertAt()
Section titled “insertAt()”insertAt(
index, …objects):number
Defined in: src/canvas/StaticCanvas.ts:216
Inserts an object into collection at specified index
Parameters
Section titled “Parameters”number
Index to insert object at
objects
Section titled “objects”…FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]
Object(s) to insert
Returns
Section titled “Returns”number
new array length
Inherited from
Section titled “Inherited from”SelectableCanvas.insertAt
isEmpty()
Section titled “isEmpty()”isEmpty():
boolean
Defined in: src/Collection.ts:128
Returns true if collection contains no objects
Returns
Section titled “Returns”boolean
true if collection is empty
Inherited from
Section titled “Inherited from”SelectableCanvas.isEmpty
isTargetTransparent()
Section titled “isTargetTransparent()”isTargetTransparent(
target,x,y):boolean
Defined in: src/canvas/SelectableCanvas.ts:444
Returns true if object is transparent at a certain location
Clarification: this is is target transparent at location X or are controls there
Parameters
Section titled “Parameters”target
Section titled “target”Object to check
number
Left coordinate in viewport space
number
Top coordinate in viewport space
Returns
Section titled “Returns”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
Inherited from
Section titled “Inherited from”SelectableCanvas.isTargetTransparent
item()
Section titled “item()”item(
index):FabricObject<Partial<FabricObjectProps>,SerializedObjectProps,ObjectEvents>
Defined in: src/Collection.ts:120
Returns object at specified index
Parameters
Section titled “Parameters”number
Returns
Section titled “Returns”FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>
object at index
Inherited from
Section titled “Inherited from”SelectableCanvas.item
loadFromJSON()
Section titled “loadFromJSON()”loadFromJSON(
json,reviver?,options?):Promise<Canvas>
Defined in: src/canvas/StaticCanvas.ts:1276
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
Parameters
Section titled “Parameters”JSON string or object
string | Record<string, any>
reviver?
Section titled “reviver?”<T>(serializedObj, instance) => void
Method for further parsing of JSON elements, called after each fabric object created.
options?
Section titled “options?”Abortable = {}
options
Returns
Section titled “Returns”Promise<Canvas>
instance
Tutorial
Section titled “Tutorial”http://fabricjs.com/fabric-intro-part-3#deserialization
Examples
Section titled “Examples”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.});Inherited from
Section titled “Inherited from”SelectableCanvas.loadFromJSON
moveObjectTo()
Section titled “moveObjectTo()”moveObjectTo(
object,index):boolean
Defined in: src/Collection.ts:262
Moves an object to specified level in stack of drawn objects
Parameters
Section titled “Parameters”object
Section titled “object”Object to send
number
Position to move to
Returns
Section titled “Returns”boolean
true if change occurred
Inherited from
Section titled “Inherited from”SelectableCanvas.moveObjectTo
Call Signature
Section titled “Call Signature”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
Type Parameters
Section titled “Type Parameters”K extends keyof CanvasEvents
Parameters
Section titled “Parameters”eventName
Section titled “eventName”K
event name (eg. ‘after:render’)
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”SelectableCanvas.off
Call Signature
Section titled “Call Signature”off<
K>(eventName,handler):void
Defined in: src/Observable.ts:128
unsubscribe an event listener
Type Parameters
Section titled “Type Parameters”K extends keyof CanvasEvents
Parameters
Section titled “Parameters”eventName
Section titled “eventName”K
event name (eg. ‘after:render’)
handler
Section titled “handler”TEventCallback
event listener to unsubscribe
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”SelectableCanvas.off
Call Signature
Section titled “Call Signature”off(
handlers):void
Defined in: src/Observable.ts:133
unsubscribe event listeners
Parameters
Section titled “Parameters”handlers
Section titled “handlers”EventRegistryObject<EventSpec>
handlers key/value pairs (eg. {‘after:render’: handler, ‘selection:cleared’: handler})
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”SelectableCanvas.off
Call Signature
Section titled “Call Signature”off():
void
Defined in: src/Observable.ts:137
unsubscribe all event listeners
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”SelectableCanvas.off
Call Signature
Section titled “Call Signature”on<
K,E>(eventName,handler):VoidFunction
Defined in: src/Observable.ts:23
Observes specified event
Type Parameters
Section titled “Type Parameters”K extends keyof CanvasEvents
E extends TPointerEventInfo<TPointerEvent> | TPointerEventInfo<TPointerEvent> & object | TPointerEventInfo<WheelEvent> | TPointerEventInfo<TPointerEvent> & InEvent | TPointerEventInfo<TPointerEvent> & OutEvent | TPointerEventInfo<TPointerEvent> & TPointerEventInfo<TPointerEvent> & object | TEventWithTarget<DragEvent> | DragEventData | DragEventData & InEvent | DragEventData & OutEvent | DropEventData | SimpleEventHandler<Event> | ModifiedEvent<TPointerEvent> | { 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>[]; } | { target: FabricObject; } | { target: FabricObject; } | { path: FabricObject; } | { path: FabricObject; } | { target: IText; } | { target: IText; } | object & Partial<TEvent<TPointerEvent>> | { target: IText; } | { ctx: CanvasRenderingContext2D; } | { ctx: CanvasRenderingContext2D; } | LayoutBeforeEvent & object | LayoutAfterEvent & object | 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 | Partial<TEvent<TPointerEvent>> & object | Partial<TEvent<TPointerEvent>> & object | Partial<TEvent<TPointerEvent>> & object | Partial<TEvent<TPointerEvent>> & object
Parameters
Section titled “Parameters”eventName
Section titled “eventName”K
Event name (eg. ‘after:render’)
handler
Section titled “handler”TEventCallback<E>
Function that receives a notification when an event of the specified type occurs
Returns
Section titled “Returns”VoidFunction
disposer
on
Inherited from
Section titled “Inherited from”SelectableCanvas.on
Call Signature
Section titled “Call Signature”on(
handlers):VoidFunction
Defined in: src/Observable.ts:27
Observes specified event
Parameters
Section titled “Parameters”handlers
Section titled “handlers”EventRegistryObject<EventSpec>
key/value pairs (eg. {‘after:render’: handler, ‘selection:cleared’: handler})
Returns
Section titled “Returns”VoidFunction
disposer
on
Inherited from
Section titled “Inherited from”SelectableCanvas.on
once()
Section titled “once()”Call Signature
Section titled “Call Signature”once<
K,E>(eventName,handler):VoidFunction
Defined in: src/Observable.ts:62
Observes specified event once
Type Parameters
Section titled “Type Parameters”K extends keyof CanvasEvents
E extends TPointerEventInfo<TPointerEvent> | TPointerEventInfo<TPointerEvent> & object | TPointerEventInfo<WheelEvent> | TPointerEventInfo<TPointerEvent> & InEvent | TPointerEventInfo<TPointerEvent> & OutEvent | TPointerEventInfo<TPointerEvent> & TPointerEventInfo<TPointerEvent> & object | TEventWithTarget<DragEvent> | DragEventData | DragEventData & InEvent | DragEventData & OutEvent | DropEventData | SimpleEventHandler<Event> | ModifiedEvent<TPointerEvent> | { 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>[]; } | { target: FabricObject; } | { target: FabricObject; } | { path: FabricObject; } | { path: FabricObject; } | { target: IText; } | { target: IText; } | object & Partial<TEvent<TPointerEvent>> | { target: IText; } | { ctx: CanvasRenderingContext2D; } | { ctx: CanvasRenderingContext2D; } | LayoutBeforeEvent & object | LayoutAfterEvent & object | 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 | Partial<TEvent<TPointerEvent>> & object | Partial<TEvent<TPointerEvent>> & object | Partial<TEvent<TPointerEvent>> & object | Partial<TEvent<TPointerEvent>> & object
Parameters
Section titled “Parameters”eventName
Section titled “eventName”K
Event name (eg. ‘after:render’)
handler
Section titled “handler”TEventCallback<E>
Function that receives a notification when an event of the specified type occurs
Returns
Section titled “Returns”VoidFunction
disposer
once
Inherited from
Section titled “Inherited from”SelectableCanvas.once
Call Signature
Section titled “Call Signature”once(
handlers):VoidFunction
Defined in: src/Observable.ts:66
Observes specified event once
Parameters
Section titled “Parameters”handlers
Section titled “handlers”EventRegistryObject<EventSpec>
key/value pairs (eg. {‘after:render’: handler, ‘selection:cleared’: handler})
Returns
Section titled “Returns”VoidFunction
disposer
once
Inherited from
Section titled “Inherited from”SelectableCanvas.once
relativePan()
Section titled “relativePan()”relativePan(
point):void
Defined in: src/canvas/StaticCanvas.ts:442
Pans viewpoint relatively
Parameters
Section titled “Parameters”(position vector) to move by
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”SelectableCanvas.relativePan
removeListeners()
Section titled “removeListeners()”removeListeners():
void
Defined in: src/canvas/Canvas.ts:212
Removes all event listeners, used when disposing the instance
Returns
Section titled “Returns”void
renderAll()
Section titled “renderAll()”renderAll():
void
Defined in: src/canvas/SelectableCanvas.ts:372
Renders both the top canvas and the secondary container canvas.
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”SelectableCanvas.renderAll
renderCanvas()
Section titled “renderCanvas()”renderCanvas(
ctx,objects):void
Defined in: src/canvas/StaticCanvas.ts:562
Renders background, objects, overlay and controls.
Parameters
Section titled “Parameters”CanvasRenderingContext2D
objects
Section titled “objects”FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]
to render
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”SelectableCanvas.renderCanvas
renderTop()
Section titled “renderTop()”renderTop():
void
Defined in: src/canvas/SelectableCanvas.ts:412
Method to render only the top canvas. Also used to render the group selection box. Does not render text selection.
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”SelectableCanvas.renderTop
renderTopLayer()
Section titled “renderTopLayer()”renderTopLayer(
ctx):void
Defined in: src/canvas/SelectableCanvas.ts:393
text selection is rendered by the active text instance during the rendering cycle
Parameters
Section titled “Parameters”CanvasRenderingContext2D
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”SelectableCanvas.renderTopLayer
requestRenderAll()
Section titled “requestRenderAll()”requestRenderAll():
void
Defined in: src/canvas/StaticCanvas.ts:518
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.
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”SelectableCanvas.requestRenderAll
searchPossibleTargets()
Section titled “searchPossibleTargets()”searchPossibleTargets(
objects?,pointer?):undefined|FabricObject<Partial<FabricObjectProps>,SerializedObjectProps,ObjectEvents>
Defined in: src/canvas/SelectableCanvas.ts:872
Function used to search inside objects an object that contains pointer in bounding box or that contains pointerOnCanvas when painted
Parameters
Section titled “Parameters”objects?
Section titled “objects?”FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]
objects array to look into
pointer?
Section titled “pointer?”coordinates from viewport to check.
Returns
Section titled “Returns”undefined | FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>
top most object on screen that contains pointer
_searchPossibleTargets
Inherited from
Section titled “Inherited from”SelectableCanvas.searchPossibleTargets
sendObjectBackwards()
Section titled “sendObjectBackwards()”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.
Parameters
Section titled “Parameters”object
Section titled “object”Object to send
intersecting?
Section titled “intersecting?”boolean
If true, send object behind next lower intersecting object
Returns
Section titled “Returns”boolean
true if change occurred
Inherited from
Section titled “Inherited from”SelectableCanvas.sendObjectBackwards
sendObjectToBack()
Section titled “sendObjectToBack()”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
Parameters
Section titled “Parameters”object
Section titled “object”Object to send to back
Returns
Section titled “Returns”boolean
true if change occurred
Inherited from
Section titled “Inherited from”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().
Parameters
Section titled “Parameters”Property name or object (if object, iterate over the object properties)
string | Record<string, any>
value?
Section titled “value?”any
Property value (if function, the value is passed into it and its return value is used as a new one)
Returns
Section titled “Returns”Canvas
Inherited from
Section titled “Inherited from”SelectableCanvas.set
setActiveObject()
Section titled “setActiveObject()”setActiveObject(
object,e?):boolean
Defined in: src/canvas/SelectableCanvas.ts:1131
Sets given object as the only active object on canvas
Parameters
Section titled “Parameters”object
Section titled “object”Object to set as an active one
Event (passed along when firing “object:selected”)
Returns
Section titled “Returns”boolean
true if the object has been selected
Inherited from
Section titled “Inherited from”SelectableCanvas.setActiveObject
setCursor()
Section titled “setCursor()”setCursor(
value):void
Defined in: src/canvas/SelectableCanvas.ts:660
Set the cursor type of the canvas element
Parameters
Section titled “Parameters”string
Cursor type of the canvas element.
Returns
Section titled “Returns”void
http://www.w3.org/TR/css3-ui/#cursor
Inherited from
Section titled “Inherited from”SelectableCanvas.setCursor
setDimensions()
Section titled “setDimensions()”Call Signature
Section titled “Call Signature”setDimensions(
dimensions,options?):void
Defined in: src/canvas/StaticCanvas.ts:361
Sets dimensions (width, height) of this canvas instance. when options.cssOnly flag active you should also supply the unit of measure (px/%/em)
Parameters
Section titled “Parameters”dimensions
Section titled “dimensions”Partial<CSSDimensions>
Object with width/height properties
options?
Section titled “options?”Options object
backstoreOnly?
Section titled “backstoreOnly?”false
Set the given dimensions only as canvas backstore dimensions
cssOnly?
Section titled “cssOnly?”true
Set the given dimensions only as css dimensions
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”SelectableCanvas.setDimensions
Call Signature
Section titled “Call Signature”setDimensions(
dimensions,options?):void
Defined in: src/canvas/StaticCanvas.ts:365
Sets dimensions (width, height) of this canvas instance. when options.cssOnly flag active you should also supply the unit of measure (px/%/em)
Parameters
Section titled “Parameters”dimensions
Section titled “dimensions”Partial<TSize>
Object with width/height properties
options?
Section titled “options?”Options object
backstoreOnly?
Section titled “backstoreOnly?”true
Set the given dimensions only as canvas backstore dimensions
cssOnly?
Section titled “cssOnly?”false
Set the given dimensions only as css dimensions
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”SelectableCanvas.setDimensions
Call Signature
Section titled “Call Signature”setDimensions(
dimensions,options?):void
Defined in: src/canvas/StaticCanvas.ts:369
Sets dimensions (width, height) of this canvas instance. when options.cssOnly flag active you should also supply the unit of measure (px/%/em)
Parameters
Section titled “Parameters”dimensions
Section titled “dimensions”Partial<TSize>
Object with width/height properties
options?
Section titled “options?”undefined
Options object
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”SelectableCanvas.setDimensions
setHeight()
Section titled “setHeight()”Call Signature
Section titled “Call Signature”setHeight(
value,options?):void
Defined in: src/canvas/StaticCanvas.ts:314
s Sets height of this canvas instance
Parameters
Section titled “Parameters”number
Value to set height to
options?
Section titled “options?”Options object
backstoreOnly?
Section titled “backstoreOnly?”true
Set the given dimensions only as canvas backstore dimensions
cssOnly?
Section titled “cssOnly?”false
Set the given dimensions only as css dimensions
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”SelectableCanvas.setHeight
Call Signature
Section titled “Call Signature”setHeight(
value,options?):void
Defined in: src/canvas/StaticCanvas.ts:318
s Sets height of this canvas instance
Parameters
Section titled “Parameters”Value to set height to
string | number
options?
Section titled “options?”Options object
backstoreOnly?
Section titled “backstoreOnly?”false
Set the given dimensions only as canvas backstore dimensions
cssOnly?
Section titled “cssOnly?”true
Set the given dimensions only as css dimensions
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”SelectableCanvas.setHeight
setViewportTransform()
Section titled “setViewportTransform()”setViewportTransform(
vpt):void
Defined in: src/canvas/SelectableCanvas.ts:1269
Sets viewport transformation of this canvas instance
Parameters
Section titled “Parameters”a Canvas 2D API transform matrix
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”SelectableCanvas.setViewportTransform
setWidth()
Section titled “setWidth()”Call Signature
Section titled “Call Signature”setWidth(
value,options?):void
Defined in: src/canvas/StaticCanvas.ts:294
Sets width of this canvas instance
Parameters
Section titled “Parameters”number
Value to set width to
options?
Section titled “options?”Options object
backstoreOnly?
Section titled “backstoreOnly?”true
Set the given dimensions only as canvas backstore dimensions
cssOnly?
Section titled “cssOnly?”false
Set the given dimensions only as css dimensions
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”SelectableCanvas.setWidth
Call Signature
Section titled “Call Signature”setWidth(
value,options?):void
Defined in: src/canvas/StaticCanvas.ts:298
Sets width of this canvas instance
Parameters
Section titled “Parameters”Value to set width to
string | number
options?
Section titled “options?”Options object
backstoreOnly?
Section titled “backstoreOnly?”false
Set the given dimensions only as canvas backstore dimensions
cssOnly?
Section titled “cssOnly?”true
Set the given dimensions only as css dimensions
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”SelectableCanvas.setWidth
setZoom()
Section titled “setZoom()”setZoom(
value):void
Defined in: src/canvas/StaticCanvas.ts:423
Sets zoom level of this canvas instance
Parameters
Section titled “Parameters”number
to set zoom to, less than 1 zooms out
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”SelectableCanvas.setZoom
size()
Section titled “size()”size():
number
Defined in: src/Collection.ts:136
Returns a size of a collection (i.e: length of an array containing its objects)
Returns
Section titled “Returns”number
Collection size
Inherited from
Section titled “Inherited from”SelectableCanvas.size
toBlob()
Section titled “toBlob()”toBlob(
options):Promise<null|Blob>
Defined in: src/canvas/StaticCanvas.ts:1396
Parameters
Section titled “Parameters”options
Section titled “options”TDataUrlOptions = ...
Returns
Section titled “Returns”Promise<null | Blob>
Inherited from
Section titled “Inherited from”SelectableCanvas.toBlob
toCanvasElement()
Section titled “toCanvasElement()”toCanvasElement(
multiplier?,options?):HTMLCanvasElement
Defined in: src/canvas/StaticCanvas.ts:1427
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
Parameters
Section titled “Parameters”multiplier?
Section titled “multiplier?”number = 1
a zoom factor.
options?
Section titled “options?”TToCanvasElementOptions = ...
Cropping informations
Returns
Section titled “Returns”HTMLCanvasElement
Inherited from
Section titled “Inherited from”SelectableCanvas.toCanvasElement
toDatalessJSON()
Section titled “toDatalessJSON()”toDatalessJSON(
propertiesToInclude?):any
Defined in: src/canvas/StaticCanvas.ts:817
Returns dataless JSON representation of canvas
Parameters
Section titled “Parameters”propertiesToInclude?
Section titled “propertiesToInclude?”string[]
Any properties that you might want to additionally include in the output
Returns
Section titled “Returns”any
json string
Inherited from
Section titled “Inherited from”SelectableCanvas.toDatalessJSON
toDatalessObject()
Section titled “toDatalessObject()”toDatalessObject(
propertiesToInclude?):any
Defined in: src/canvas/StaticCanvas.ts:854
Returns dataless object representation of canvas
Parameters
Section titled “Parameters”propertiesToInclude?
Section titled “propertiesToInclude?”string[]
Any properties that you might want to additionally include in the output
Returns
Section titled “Returns”any
object representation of an instance
Inherited from
Section titled “Inherited from”SelectableCanvas.toDatalessObject
toDataURL()
Section titled “toDataURL()”toDataURL(
options?):string
Defined in: src/canvas/StaticCanvas.ts:1380
Exports canvas element to a dataurl image. Note that when multiplier is used, cropping is scaled appropriately
Parameters
Section titled “Parameters”options?
Section titled “options?”TDataUrlOptions = ...
Options object
Returns
Section titled “Returns”string
Returns a data: URL containing a representation of the object in the format specified by options.format
Examples
Section titled “Examples”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)});Inherited from
Section titled “Inherited from”SelectableCanvas.toDataURL
toggle()
Section titled “toggle()”toggle(
property):Canvas
Defined in: src/CommonMethods.ts:46
Toggles specified property from true to false or from false to true
Parameters
Section titled “Parameters”property
Section titled “property”string
Property to toggle
Returns
Section titled “Returns”Canvas
Inherited from
Section titled “Inherited from”SelectableCanvas.toggle
toJSON()
Section titled “toJSON()”toJSON():
any
Defined in: src/canvas/StaticCanvas.ts:845
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)
Returns
Section titled “Returns”any
JSON compatible object
Tutorial
Section titled “Tutorial”http://fabricjs.com/fabric-intro-part-3#serialization
Examples
Section titled “Examples”var json = canvas.toJSON();var json = canvas.toJSON(['lockMovementX', 'lockMovementY', 'lockRotation', 'lockScalingX', 'lockScalingY']);var json = canvas.toJSON();Inherited from
Section titled “Inherited from”SelectableCanvas.toJSON
toObject()
Section titled “toObject()”toObject(
propertiesToInclude?):any
Defined in: src/canvas/StaticCanvas.ts:826
Returns object representation of canvas
Parameters
Section titled “Parameters”propertiesToInclude?
Section titled “propertiesToInclude?”string[]
Any properties that you might want to additionally include in the output
Returns
Section titled “Returns”any
object representation of an instance
Inherited from
Section titled “Inherited from”SelectableCanvas.toObject
toString()
Section titled “toString()”toString():
string
Defined in: src/canvas/StaticCanvas.ts:1530
Returns a string representation of an instance
Returns
Section titled “Returns”string
string representation of an instance
Inherited from
Section titled “Inherited from”SelectableCanvas.toString
toSVG()
Section titled “toSVG()”toSVG(
options?,reviver?):string
Defined in: src/canvas/StaticCanvas.ts:993
Function
Returns SVG representation of canvas
Parameters
Section titled “Parameters”options?
Section titled “options?”TSVGExportOptions = {}
Options object for SVG output
reviver?
Section titled “reviver?”Method for further parsing of svg elements, called after each fabric object converted into svg representation.
Returns
Section titled “Returns”string
SVG string
Tutorial
Section titled “Tutorial”http://fabricjs.com/fabric-intro-part-3#serialization
Examples
Section titled “Examples”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; ', '');});Inherited from
Section titled “Inherited from”SelectableCanvas.toSVG
viewportCenterObject()
Section titled “viewportCenterObject()”viewportCenterObject(
object):void
Defined in: src/canvas/StaticCanvas.ts:764
Centers object vertically and horizontally in the viewport
Parameters
Section titled “Parameters”object
Section titled “object”Object to center vertically and horizontally
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”SelectableCanvas.viewportCenterObject
viewportCenterObjectH()
Section titled “viewportCenterObjectH()”viewportCenterObjectH(
object):void
Defined in: src/canvas/StaticCanvas.ts:772
Centers object horizontally in the viewport, object.top is unchanged
Parameters
Section titled “Parameters”object
Section titled “object”Object to center vertically and horizontally
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”SelectableCanvas.viewportCenterObjectH
viewportCenterObjectV()
Section titled “viewportCenterObjectV()”viewportCenterObjectV(
object):void
Defined in: src/canvas/StaticCanvas.ts:783
Centers object Vertically in the viewport, object.top is unchanged
Parameters
Section titled “Parameters”object
Section titled “object”Object to center vertically and horizontally
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”SelectableCanvas.viewportCenterObjectV
zoomToPoint()
Section titled “zoomToPoint()”zoomToPoint(
point,value):void
Defined in: src/canvas/StaticCanvas.ts:406
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.
Parameters
Section titled “Parameters”to zoom with respect to
number
to set zoom to, less than 1 zooms out
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”SelectableCanvas.zoomToPoint
getDefaults()
Section titled “getDefaults()”
staticgetDefaults():Record<string,any>
Defined in: src/canvas/SelectableCanvas.ts:290
Returns
Section titled “Returns”Record<string, any>
Inherited from
Section titled “Inherited from”SelectableCanvas.getDefaults