StaticCanvas
Defined in: src/canvas/StaticCanvas.ts:86
Static canvas class
before:render
after:render
canvas:cleared
object:added
object:removed
Extends
Section titled “Extends”Collection
<{():CommonMethods
<CanvasEvents
>;prototype
:CommonMethods
<any
>; },this
> &CommonMethods
<CanvasEvents
,this
>
Type Parameters
Section titled “Type Parameters”EventSpec
Section titled “EventSpec”EventSpec
extends StaticCanvasEvents
= StaticCanvasEvents
Implements
Section titled “Implements”Constructors
Section titled “Constructors”Constructor
Section titled “Constructor”new StaticCanvas<
EventSpec
>(el?
,options?
):StaticCanvas
<EventSpec
>
Defined in: src/canvas/StaticCanvas.ts:186
Parameters
Section titled “Parameters”string
| HTMLCanvasElement
options?
Section titled “options?”TOptions
<StaticCanvasOptions
> = {}
Returns
Section titled “Returns”StaticCanvas
<EventSpec
>
Overrides
Section titled “Overrides”createCollectionMixin(CommonMethods<CanvasEvents>).constructor
Properties
Section titled “Properties”_objects
Section titled “_objects”_objects:
FabricObject
<Partial
<FabricObjectProps
>,SerializedObjectProps
,ObjectEvents
>[] =[]
Defined in: src/Collection.ts:21
needs to end up in the constructor too
Inherited from
Section titled “Inherited from”createCollectionMixin(CommonMethods<CanvasEvents>)._objects
_offset
Section titled “_offset”_offset:
object
Defined in: src/canvas/StaticCanvas.ts:159
left:
number
top:
number
allowTouchScrolling
Section titled “allowTouchScrolling”allowTouchScrolling:
boolean
Defined in: src/canvas/StaticCanvas.ts:123
move to Canvas
Implementation of
Section titled “Implementation of”StaticCanvasOptions
.allowTouchScrolling
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”StaticCanvasOptions
.backgroundColor
backgroundImage?
Section titled “backgroundImage?”
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
Default
Section titled “Default”
Implementation of
Section titled “Implementation of”StaticCanvasOptions
.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”StaticCanvasOptions
.backgroundVpt
clipPath?
Section titled “clipPath?”
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
Implementation of
Section titled “Implementation of”controlsAboveOverlay
Section titled “controlsAboveOverlay”controlsAboveOverlay:
boolean
Defined in: src/canvas/StaticCanvas.ts:118
move to Canvas
Implementation of
Section titled “Implementation of”StaticCanvasOptions
.controlsAboveOverlay
destroyed?
Section titled “destroyed?”
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.
disposed?
Section titled “disposed?”
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.
elements
Section titled “elements”elements:
StaticCanvasDOMManager
Defined in: src/canvas/StaticCanvas.ts:163
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”StaticCanvasOptions
.enableRetinaScaling
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”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”StaticCanvasOptions
.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”StaticCanvasOptions
.includeDefaultValues
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”StaticCanvasOptions
.overlayColor
overlayImage?
Section titled “overlayImage?”
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
Default
Section titled “Default”
Implementation of
Section titled “Implementation of”StaticCanvasOptions
.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”StaticCanvasOptions
.overlayVpt
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”StaticCanvasOptions
.renderOnAddRemove
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”true
Implementation of
Section titled “Implementation of”StaticCanvasOptions
.skipOffscreen
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”StaticCanvasOptions
.svgViewportTransformation
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”StaticCanvasOptions
.viewportTransform
vptCoords
Section titled “vptCoords”vptCoords:
TCornerPoint
Defined in: src/canvas/StaticCanvas.ts:130
The viewport bounding box in scene plane coordinates, see calcViewportBoundaries
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”ownDefaults
Section titled “ownDefaults”
static
ownDefaults:TOptions
<StaticCanvasOptions
> =staticCanvasDefaults
Defined in: src/canvas/StaticCanvas.ts:174
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
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
Methods
Section titled “Methods”_onObjectAdded()
Section titled “_onObjectAdded()”_onObjectAdded(
obj
):void
Defined in: src/canvas/StaticCanvas.ts:228
Parameters
Section titled “Parameters”Returns
Section titled “Returns”void
Overrides
Section titled “Overrides”createCollectionMixin(CommonMethods<CanvasEvents>)._onObjectAdded
_onObjectRemoved()
Section titled “_onObjectRemoved()”_onObjectRemoved(
obj
):void
Defined in: src/canvas/StaticCanvas.ts:243
Parameters
Section titled “Parameters”Returns
Section titled “Returns”void
Overrides
Section titled “Overrides”createCollectionMixin(CommonMethods<CanvasEvents>)._onObjectRemoved
_onStackOrderChanged()
Section titled “_onStackOrderChanged()”_onStackOrderChanged():
void
Defined in: src/canvas/StaticCanvas.ts:249
Returns
Section titled “Returns”void
Overrides
Section titled “Overrides”createCollectionMixin(CommonMethods<CanvasEvents>)._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”createCollectionMixin(CommonMethods<CanvasEvents>)._set
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
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
Overrides
Section titled “Overrides”createCollectionMixin(CommonMethods<CanvasEvents>).add
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”createCollectionMixin(CommonMethods<CanvasEvents>).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”createCollectionMixin(CommonMethods<CanvasEvents>).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
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”cancelRequestedRender()
Section titled “cancelRequestedRender()”cancelRequestedRender():
void
Defined in: src/canvas/StaticCanvas.ts:546
Returns
Section titled “Returns”void
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
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
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
clear()
Section titled “clear()”clear():
void
Defined in: src/canvas/StaticCanvas.ts:478
Clears all contexts (background, main, top) of an instance
Returns
Section titled “Returns”void
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
clone()
Section titled “clone()”clone(
properties?
):Promise
<StaticCanvas
<EventSpec
>>
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
<StaticCanvas
<EventSpec
>>
cloneWithoutData()
Section titled “cloneWithoutData()”cloneWithoutData():
StaticCanvas
<EventSpec
>
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”StaticCanvas
<EventSpec
>
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”createCollectionMixin(CommonMethods<CanvasEvents>).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”createCollectionMixin(CommonMethods<CanvasEvents>).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”createCollectionMixin(CommonMethods<CanvasEvents>).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
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
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
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
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
drawControls()
Section titled “drawControls()”drawControls(
_ctx
):void
Defined in: src/canvas/StaticCanvas.ts:553
Parameters
Section titled “Parameters”CanvasRenderingContext2D
Returns
Section titled “Returns”void
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”createCollectionMixin(CommonMethods<CanvasEvents>).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”createCollectionMixin(CommonMethods<CanvasEvents>).findNewUpperIndex
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”createCollectionMixin(CommonMethods<CanvasEvents>).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”createCollectionMixin(CommonMethods<CanvasEvents>).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”createCollectionMixin(CommonMethods<CanvasEvents>).get
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
getCenterPoint()
Section titled “getCenterPoint()”getCenterPoint():
Point
Defined in: src/canvas/StaticCanvas.ts:727
Returns coordinates of a center of canvas.
Returns
Section titled “Returns”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
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
getHeight()
Section titled “getHeight()”getHeight():
number
Defined in: src/canvas/StaticCanvas.ts:282
Returns canvas height (in px)
Returns
Section titled “Returns”number
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”createCollectionMixin(CommonMethods<CanvasEvents>).getObjects
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
getWidth()
Section titled “getWidth()”getWidth():
number
Defined in: src/canvas/StaticCanvas.ts:274
Returns canvas width (in px)
Returns
Section titled “Returns”number
getZoom()
Section titled “getZoom()”getZoom():
number
Defined in: src/canvas/StaticCanvas.ts:384
Returns canvas zoom level
Returns
Section titled “Returns”number
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
Overrides
Section titled “Overrides”createCollectionMixin(CommonMethods<CanvasEvents>).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”createCollectionMixin(CommonMethods<CanvasEvents>).isEmpty
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”createCollectionMixin(CommonMethods<CanvasEvents>).item
loadFromJSON()
Section titled “loadFromJSON()”loadFromJSON(
json
,reviver?
,options?
):Promise
<StaticCanvas
<EventSpec
>>
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
<StaticCanvas
<EventSpec
>>
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.});
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”createCollectionMixin(CommonMethods<CanvasEvents>).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”createCollectionMixin(CommonMethods<CanvasEvents>).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”createCollectionMixin(CommonMethods<CanvasEvents>).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
<CanvasEvents
>
handlers key/value pairs (eg. {‘after:render’: handler, ‘selection:cleared’: handler})
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”createCollectionMixin(CommonMethods<CanvasEvents>).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”createCollectionMixin(CommonMethods<CanvasEvents>).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”createCollectionMixin(CommonMethods<CanvasEvents>).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
<CanvasEvents
>
key/value pairs (eg. {‘after:render’: handler, ‘selection:cleared’: handler})
Returns
Section titled “Returns”VoidFunction
disposer
on
Inherited from
Section titled “Inherited from”createCollectionMixin(CommonMethods<CanvasEvents>).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”createCollectionMixin(CommonMethods<CanvasEvents>).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
<CanvasEvents
>
key/value pairs (eg. {‘after:render’: handler, ‘selection:cleared’: handler})
Returns
Section titled “Returns”VoidFunction
disposer
once
Inherited from
Section titled “Inherited from”createCollectionMixin(CommonMethods<CanvasEvents>).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
renderAll()
Section titled “renderAll()”renderAll():
void
Defined in: src/canvas/StaticCanvas.ts:492
Renders the canvas
Returns
Section titled “Returns”void
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
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
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”createCollectionMixin(CommonMethods<CanvasEvents>).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”createCollectionMixin(CommonMethods<CanvasEvents>).sendObjectToBack
set(
key
,value?
):StaticCanvas
<EventSpec
>
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”StaticCanvas
<EventSpec
>
Inherited from
Section titled “Inherited from”createCollectionMixin(CommonMethods<CanvasEvents>).set
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
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
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
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
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
setViewportTransform()
Section titled “setViewportTransform()”setViewportTransform(
vpt
):void
Defined in: src/canvas/StaticCanvas.ts:392
Sets viewport transformation of this canvas instance
Parameters
Section titled “Parameters”a Canvas 2D API transform matrix
Returns
Section titled “Returns”void
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
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
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
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”createCollectionMixin(CommonMethods<CanvasEvents>).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
>
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
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
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
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)});
toggle()
Section titled “toggle()”toggle(
property
):StaticCanvas
<EventSpec
>
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”StaticCanvas
<EventSpec
>
Inherited from
Section titled “Inherited from”createCollectionMixin(CommonMethods<CanvasEvents>).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();
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
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
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; ', '');});
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
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
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
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
getDefaults()
Section titled “getDefaults()”
static
getDefaults():Record
<string
,any
>
Defined in: src/canvas/StaticCanvas.ts:182
Returns
Section titled “Returns”Record
<string
, any
>