Skip to content

StaticCanvas

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

Static canvas class

demo

before:render

after:render

canvas:cleared

object:added

object:removed

  • Collection<{(): CommonMethods<CanvasEvents>; prototype: CommonMethods<any>; }, this> & CommonMethods<CanvasEvents, this>

EventSpec extends StaticCanvasEvents = StaticCanvasEvents

new StaticCanvas<EventSpec>(el?, options?): StaticCanvas<EventSpec>

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

string | HTMLCanvasElement

TOptions<StaticCanvasOptions> = {}

StaticCanvas<EventSpec>

createCollectionMixin(CommonMethods<CanvasEvents>).constructor

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

Defined in: src/Collection.ts:21

needs to end up in the constructor too

createCollectionMixin(CommonMethods<CanvasEvents>)._objects


_offset: object

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

left: number

top: number


allowTouchScrolling: boolean

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

move to Canvas

StaticCanvasOptions.allowTouchScrolling


backgroundColor: string | TFiller

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

Background color of canvas instance.

StaticCanvasOptions.backgroundColor


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

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

Background image of canvas instance. since 2.4.0 image caching is active, please when putting an image as background, add to the canvas property a reference to the canvas it is on. Otherwise the image cannot detect the zoom vale. As an alternative you can disable image objectCaching

StaticCanvasOptions.backgroundImage


backgroundVpt: boolean

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

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

1.6.3

we should really find a different way to do this

StaticCanvasOptions.backgroundVpt


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

StaticCanvasOptions.clipPath


controlsAboveOverlay: boolean

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

move to Canvas

StaticCanvasOptions.controlsAboveOverlay


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.


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: StaticCanvasDOMManager

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


enableRetinaScaling: boolean

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

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

StaticCanvasOptions.enableRetinaScaling


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

StaticCanvasOptions.height


imageSmoothingEnabled: boolean

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

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

StaticCanvasOptions.imageSmoothingEnabled


includeDefaultValues: boolean

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

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

StaticCanvasOptions.includeDefaultValues


overlayColor: string | TFiller

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

Overlay color of canvas instance.

1.3.9

StaticCanvasOptions.overlayColor


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

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

Overlay image of canvas instance. since 2.4.0 image caching is active, please when putting an image as overlay, add to the canvas property a reference to the canvas it is on. Otherwise the image cannot detect the zoom vale. As an alternative you can disable image objectCaching

StaticCanvasOptions.overlayImage


overlayVpt: boolean

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

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

1.6.3

we should really find a different way to do this

StaticCanvasOptions.overlayVpt


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.

StaticCanvasOptions.renderOnAddRemove


skipOffscreen: boolean

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

Based on vptCoords and object.aCoords, skip rendering of objects that are not included in current viewport. May greatly help in applications with crowded canvas and use of zoom/pan If One of the corner of the bounding box of the object is on the canvas the objects get rendered.

true

StaticCanvasOptions.skipOffscreen


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.

StaticCanvasOptions.svgViewportTransformation


viewportTransform: TMat2D

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

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

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

StaticCanvasOptions.viewportTransform


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

StaticCanvasOptions.width


static ownDefaults: TOptions<StaticCanvasOptions> = staticCanvasDefaults

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

get contextContainer(): CanvasRenderingContext2D

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

CanvasRenderingContext2D


get lowerCanvasEl(): HTMLCanvasElement

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

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

HTMLCanvasElement

_onObjectAdded(obj): void

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

FabricObject

void

createCollectionMixin(CommonMethods<CanvasEvents>)._onObjectAdded


_onObjectRemoved(obj): void

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

FabricObject

void

createCollectionMixin(CommonMethods<CanvasEvents>)._onObjectRemoved


_onStackOrderChanged(): void

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

void

createCollectionMixin(CommonMethods<CanvasEvents>)._onStackOrderChanged


_set(key, value): void

Defined in: src/CommonMethods.ts:38

string

any

void

createCollectionMixin(CommonMethods<CanvasEvents>)._set


absolutePan(point): void

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

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

Point

to move to

void


add(…objects): number

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

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

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

to add

number

new array length

createCollectionMixin(CommonMethods<CanvasEvents>).add


bringObjectForward(object, intersecting?): boolean

Defined in: src/Collection.ts:240

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

FabricObject

Object to send

boolean

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

boolean

true if change occurred

createCollectionMixin(CommonMethods<CanvasEvents>).bringObjectForward


bringObjectToFront(object): boolean

Defined in: src/Collection.ts:194

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

FabricObject

Object to send

boolean

true if change occurred

createCollectionMixin(CommonMethods<CanvasEvents>).bringObjectToFront


calcOffset(): object

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

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

object

left: number = 0

top: number = 0


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

TCornerPoint


cancelRequestedRender(): void

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

void


centerObject(object): void

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

Centers object vertically and horizontally in the canvas

FabricObject

Object to center vertically and horizontally

void


centerObjectH(object): void

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

Centers object horizontally in the canvas

FabricObject

void


centerObjectV(object): void

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

Centers object vertically in the canvas

FabricObject

Object to center vertically

void


clear(): void

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

Clears all contexts (background, main, top) of an instance

void


clearContext(ctx): void

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

Clears specified context of canvas element

CanvasRenderingContext2D

Context to clear

void


clone(properties?): Promise<StaticCanvas<EventSpec>>

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

Clones canvas instance

string[]

Array of properties to include in the cloned canvas and children

Promise<StaticCanvas<EventSpec>>


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.

StaticCanvas<EventSpec>


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

Defined in: src/Collection.ts:326

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

TBBox

a bounding box in scene coordinates

an object with includeIntersecting

boolean = true

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

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

createCollectionMixin(CommonMethods<CanvasEvents>).collectObjects


complexity(): number

Defined in: src/Collection.ts:165

Returns number representation of a collection complexity

number

complexity

createCollectionMixin(CommonMethods<CanvasEvents>).complexity


contains(object, deep?): boolean

Defined in: src/Collection.ts:148

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

FabricObject

Object to check against

boolean

true to check all descendants, false to check only _objects

boolean

true if collection contains an object

createCollectionMixin(CommonMethods<CanvasEvents>).contains


createSVGClipPathMarkup(options): string

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

TSVGExportOptions

string


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

string


createSVGRefElementsMarkup(): string

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

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

string


dispose(): Promise<boolean>

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

Waits until rendering has settled to destroy the canvas

Promise<boolean>

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

if aborted by a consequent call


drawClipPathOnCanvas(ctx, clipPath): void

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

Paint the cached clipPath on the lowerCanvasEl

CanvasRenderingContext2D

Context to render on

TCachedFabricObject

void


drawControls(_ctx): void

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

CanvasRenderingContext2D

void


findNewLowerIndex(object, idx, intersecting?): number

Defined in: src/Collection.ts:272

FabricObject

number

boolean

number

createCollectionMixin(CommonMethods<CanvasEvents>).findNewLowerIndex


findNewUpperIndex(object, idx, intersecting?): number

Defined in: src/Collection.ts:295

FabricObject

number

boolean

number

createCollectionMixin(CommonMethods<CanvasEvents>).findNewUpperIndex


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

Defined in: src/Observable.ts:167

Fires event with an optional options object

K extends keyof CanvasEvents

K

Event name to fire

CanvasEvents[K]

Options object

void

createCollectionMixin(CommonMethods<CanvasEvents>).fire


forEachObject(callback): void

Defined in: src/Collection.ts:91

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

(object, index, array) => any

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

void

createCollectionMixin(CommonMethods<CanvasEvents>).forEachObject


get(property): any

Defined in: src/CommonMethods.ts:59

Basic getter

string

Property name

any

value of a property

createCollectionMixin(CommonMethods<CanvasEvents>).get


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

object

object with “top” and “left” number values

left: number

top: number


getCenterPoint(): Point

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

Returns coordinates of a center of canvas.

Point


getContext(): CanvasRenderingContext2D

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

Returns context of canvas where objects are drawn

CanvasRenderingContext2D


getElement(): HTMLCanvasElement

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

Returns <canvas> element corresponding to this instance

HTMLCanvasElement


getHeight(): number

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

Returns canvas height (in px)

number


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

Defined in: src/Collection.ts:108

Returns an array of children objects of this instance

string[]

When specified, only objects of these types are returned

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

createCollectionMixin(CommonMethods<CanvasEvents>).getObjects


getVpCenter(): Point

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

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

Point

vpCenter, viewport center


getWidth(): number

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

Returns canvas width (in px)

number


getZoom(): number

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

Returns canvas zoom level

number


insertAt(index, …objects): number

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

Inserts an object into collection at specified index

number

Index to insert object at

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

Object(s) to insert

number

new array length

createCollectionMixin(CommonMethods<CanvasEvents>).insertAt


isEmpty(): boolean

Defined in: src/Collection.ts:128

Returns true if collection contains no objects

boolean

true if collection is empty

createCollectionMixin(CommonMethods<CanvasEvents>).isEmpty


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

Defined in: src/Collection.ts:120

Returns object at specified index

number

FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>

object at index

createCollectionMixin(CommonMethods<CanvasEvents>).item


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

JSON string or object

string | Record<string, any>

<T>(serializedObj, instance) => void

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

Abortable = {}

options

Promise<StaticCanvas<EventSpec>>

instance

http://fabricjs.com/fabric-intro-part-3#deserialization

demo

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(object, index): boolean

Defined in: src/Collection.ts:262

Moves an object to specified level in stack of drawn objects

FabricObject

Object to send

number

Position to move to

boolean

true if change occurred

createCollectionMixin(CommonMethods<CanvasEvents>).moveObjectTo


off<K>(eventName): void

Defined in: src/Observable.ts:122

Unsubscribe all event listeners for eventname. Do not use this pattern. You could kill internal fabricJS events. We know we should have protected events for internal flows, but we don’t have yet

K extends keyof CanvasEvents

K

event name (eg. ‘after:render’)

void

createCollectionMixin(CommonMethods<CanvasEvents>).off

off<K>(eventName, handler): void

Defined in: src/Observable.ts:128

unsubscribe an event listener

K extends keyof CanvasEvents

K

event name (eg. ‘after:render’)

TEventCallback

event listener to unsubscribe

void

createCollectionMixin(CommonMethods<CanvasEvents>).off

off(handlers): void

Defined in: src/Observable.ts:133

unsubscribe event listeners

EventRegistryObject<CanvasEvents>

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

void

createCollectionMixin(CommonMethods<CanvasEvents>).off

off(): void

Defined in: src/Observable.ts:137

unsubscribe all event listeners

void

createCollectionMixin(CommonMethods<CanvasEvents>).off


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

Defined in: src/Observable.ts:23

Observes specified event

K extends keyof CanvasEvents

E extends TPointerEventInfo<TPointerEvent> | TPointerEventInfo<TPointerEvent> & object | TPointerEventInfo<WheelEvent> | TPointerEventInfo<TPointerEvent> & InEvent | TPointerEventInfo<TPointerEvent> & OutEvent | TPointerEventInfo<TPointerEvent> & TPointerEventInfo<TPointerEvent> & object | 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

K

Event name (eg. ‘after:render’)

TEventCallback<E>

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

VoidFunction

disposer

on

createCollectionMixin(CommonMethods<CanvasEvents>).on

on(handlers): VoidFunction

Defined in: src/Observable.ts:27

Observes specified event

EventRegistryObject<CanvasEvents>

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

VoidFunction

disposer

on

createCollectionMixin(CommonMethods<CanvasEvents>).on


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

Defined in: src/Observable.ts:62

Observes specified event once

K extends keyof CanvasEvents

E extends TPointerEventInfo<TPointerEvent> | TPointerEventInfo<TPointerEvent> & object | TPointerEventInfo<WheelEvent> | TPointerEventInfo<TPointerEvent> & InEvent | TPointerEventInfo<TPointerEvent> & OutEvent | TPointerEventInfo<TPointerEvent> & TPointerEventInfo<TPointerEvent> & object | 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

K

Event name (eg. ‘after:render’)

TEventCallback<E>

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

VoidFunction

disposer

once

createCollectionMixin(CommonMethods<CanvasEvents>).once

once(handlers): VoidFunction

Defined in: src/Observable.ts:66

Observes specified event once

EventRegistryObject<CanvasEvents>

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

VoidFunction

disposer

once

createCollectionMixin(CommonMethods<CanvasEvents>).once


relativePan(point): void

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

Pans viewpoint relatively

Point

(position vector) to move by

void


renderAll(): void

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

Renders the canvas

void


renderCanvas(ctx, objects): void

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

Renders background, objects, overlay and controls.

CanvasRenderingContext2D

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

to render

void


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.

void


sendObjectBackwards(object, intersecting?): boolean

Defined in: src/Collection.ts:214

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

FabricObject

Object to send

boolean

If true, send object behind next lower intersecting object

boolean

true if change occurred

createCollectionMixin(CommonMethods<CanvasEvents>).sendObjectBackwards


sendObjectToBack(object): boolean

Defined in: src/Collection.ts:178

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

FabricObject

Object to send to back

boolean

true if change occurred

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().

Property name or object (if object, iterate over the object properties)

string | Record<string, any>

any

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

StaticCanvas<EventSpec>

createCollectionMixin(CommonMethods<CanvasEvents>).set


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)

Partial<CSSDimensions>

Object with width/height properties

Options object

false

Set the given dimensions only as canvas backstore dimensions

true

Set the given dimensions only as css dimensions

void

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)

Partial<TSize>

Object with width/height properties

Options object

true

Set the given dimensions only as canvas backstore dimensions

false

Set the given dimensions only as css dimensions

void

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)

Partial<TSize>

Object with width/height properties

undefined

Options object

void


setHeight(value, options?): void

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

s Sets height of this canvas instance

number

Value to set height to

Options object

true

Set the given dimensions only as canvas backstore dimensions

false

Set the given dimensions only as css dimensions

void

setHeight(value, options?): void

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

s Sets height of this canvas instance

Value to set height to

string | number

Options object

false

Set the given dimensions only as canvas backstore dimensions

true

Set the given dimensions only as css dimensions

void


setViewportTransform(vpt): void

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

Sets viewport transformation of this canvas instance

TMat2D

a Canvas 2D API transform matrix

void


setWidth(value, options?): void

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

Sets width of this canvas instance

number

Value to set width to

Options object

true

Set the given dimensions only as canvas backstore dimensions

false

Set the given dimensions only as css dimensions

void

setWidth(value, options?): void

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

Sets width of this canvas instance

Value to set width to

string | number

Options object

false

Set the given dimensions only as canvas backstore dimensions

true

Set the given dimensions only as css dimensions

void


setZoom(value): void

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

Sets zoom level of this canvas instance

number

to set zoom to, less than 1 zooms out

void


size(): number

Defined in: src/Collection.ts:136

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

number

Collection size

createCollectionMixin(CommonMethods<CanvasEvents>).size


toBlob(options): Promise<null | Blob>

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

TDataUrlOptions = ...

Promise<null | Blob>


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

number = 1

a zoom factor.

TToCanvasElementOptions = ...

Cropping informations

HTMLCanvasElement


toDatalessJSON(propertiesToInclude?): any

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

Returns dataless JSON representation of canvas

string[]

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

any

json string


toDatalessObject(propertiesToInclude?): any

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

Returns dataless object representation of canvas

string[]

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

any

object representation of an instance


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

TDataUrlOptions = ...

Options object

string

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

demo

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

toggle(property): StaticCanvas<EventSpec>

Defined in: src/CommonMethods.ts:46

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

string

Property to toggle

StaticCanvas<EventSpec>

createCollectionMixin(CommonMethods<CanvasEvents>).toggle


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)

any

JSON compatible object

http://fabricjs.com/fabric-intro-part-3#serialization

demo

var json = canvas.toJSON();
var json = canvas.toJSON(['lockMovementX', 'lockMovementY', 'lockRotation', 'lockScalingX', 'lockScalingY']);
var json = canvas.toJSON();

toObject(propertiesToInclude?): any

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

Returns object representation of canvas

string[]

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

any

object representation of an instance


toString(): string

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

Returns a string representation of an instance

string

string representation of an instance


toSVG(options?, reviver?): string

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

Function

Returns SVG representation of canvas

TSVGExportOptions = {}

Options object for SVG output

TSVGReviver

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

string

SVG string

http://fabricjs.com/fabric-intro-part-3#serialization

demo

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(object): void

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

Centers object vertically and horizontally in the viewport

FabricObject

Object to center vertically and horizontally

void


viewportCenterObjectH(object): void

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

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

FabricObject

Object to center vertically and horizontally

void


viewportCenterObjectV(object): void

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

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

FabricObject

Object to center vertically and horizontally

void


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.

Point

to zoom with respect to

number

to set zoom to, less than 1 zooms out

void


static getDefaults(): Record<string, any>

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

Record<string, any>