StaticCanvas

Static canvas class

See

demo

Fires

before:render

Fires

after:render

Fires

canvas:cleared

Fires

object:added

Fires

object:removed

Extends

Collection<() => CommonMethods<CanvasEvents>, this> & CommonMethods<CanvasEvents, this>

Type Parameters

• EventSpec extends StaticCanvasEvents = StaticCanvasEvents

Implements

StaticCanvasOptions

Constructors

new StaticCanvas()

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

Parameters

• el?: string | HTMLCanvasElement

• options?: TOptions<StaticCanvasOptions> = {}

Returns

StaticCanvas<EventSpec>

Overrides

createCollectionMixin(CommonMethods<CanvasEvents>).constructor

Defined in

src/canvas/StaticCanvas.ts:186

Properties

_objects

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

TODO

needs to end up in the constructor too

Inherited from

createCollectionMixin(CommonMethods<CanvasEvents>)._objects

Defined in

src/Collection.ts:21

_offset

_offset: object

left

left: number

top

top: number

Defined in

src/canvas/StaticCanvas.ts:159

allowTouchScrolling

allowTouchScrolling: boolean

Todo

move to Canvas

Implementation of

StaticCanvasOptions.allowTouchScrolling

Defined in

src/canvas/StaticCanvas.ts:123

backgroundColor

backgroundColor: string | TFiller

Background color of canvas instance.

Default

Implementation of

StaticCanvasOptions.backgroundColor

Defined in

src/canvas/StaticCanvas.ts:98

backgroundImage?

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

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

Implementation of

StaticCanvasOptions.backgroundImage

Defined in

src/canvas/StaticCanvas.ts:99

backgroundVpt

backgroundVpt: boolean

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

Since

1.6.3

Todo

we should really find a different way to do this

Default

Implementation of

StaticCanvasOptions.backgroundVpt

Defined in

src/canvas/StaticCanvas.ts:97

clipPath?

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

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

StaticCanvasOptions.clipPath

Defined in

src/canvas/StaticCanvas.ts:105

controlsAboveOverlay

controlsAboveOverlay: boolean

Todo

move to Canvas

Implementation of

StaticCanvasOptions.controlsAboveOverlay

Defined in

src/canvas/StaticCanvas.ts:118

destroyed?

optional destroyed: boolean

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

Defined in

src/canvas/StaticCanvas.ts:150

disposed?

optional disposed: boolean

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

Defined in

src/canvas/StaticCanvas.ts:157

elements

elements: StaticCanvasDOMManager

Defined in

src/canvas/StaticCanvas.ts:163

enableRetinaScaling

enableRetinaScaling: boolean

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

Default

Implementation of

StaticCanvasOptions.enableRetinaScaling

Defined in

src/canvas/StaticCanvas.ts:112

height

height: number

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

Implementation of

StaticCanvasOptions.height

Defined in

src/canvas/StaticCanvas.ts:94

imageSmoothingEnabled

imageSmoothingEnabled: boolean

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

Default

Implementation of

StaticCanvasOptions.imageSmoothingEnabled

Defined in

src/canvas/StaticCanvas.ts:113

includeDefaultValues

includeDefaultValues: boolean

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

Default

Implementation of

StaticCanvasOptions.includeDefaultValues

Defined in

src/canvas/StaticCanvas.ts:107

overlayColor

overlayColor: string | TFiller

Overlay color of canvas instance.

Since

1.3.9

Default

Implementation of

StaticCanvasOptions.overlayColor

Defined in

src/canvas/StaticCanvas.ts:102

overlayImage?

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

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

Implementation of

StaticCanvasOptions.overlayImage

Defined in

src/canvas/StaticCanvas.ts:103

overlayVpt

overlayVpt: boolean

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

Since

1.6.3

Todo

we should really find a different way to do this

Default

Implementation of

StaticCanvasOptions.overlayVpt

Defined in

src/canvas/StaticCanvas.ts:101

renderOnAddRemove

renderOnAddRemove: boolean

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

Implementation of

StaticCanvasOptions.renderOnAddRemove

Defined in

src/canvas/StaticCanvas.ts:110

skipOffscreen

skipOffscreen: boolean

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

true

Implementation of

StaticCanvasOptions.skipOffscreen

Defined in

src/canvas/StaticCanvas.ts:111

svgViewportTransformation

svgViewportTransformation: boolean

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

Default

Implementation of

StaticCanvasOptions.svgViewportTransformation

Defined in

src/canvas/StaticCanvas.ts:953

viewportTransform

viewportTransform: TMat2D

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

Examples

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

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

Default

Implementation of

StaticCanvasOptions.viewportTransform

Defined in

src/canvas/StaticCanvas.ts:125

vptCoords

vptCoords: TCornerPoint

The viewport bounding box in scene plane coordinates, see calcViewportBoundaries

Defined in

src/canvas/StaticCanvas.ts:130

width

width: number

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

Implementation of

StaticCanvasOptions.width

Defined in

src/canvas/StaticCanvas.ts:93

ownDefaults

static ownDefaults: TOptions<StaticCanvasOptions> = staticCanvasDefaults

Defined in

src/canvas/StaticCanvas.ts:174

Accessors

contextContainer

get contextContainer(): CanvasRenderingContext2D

Returns

CanvasRenderingContext2D

Defined in

src/canvas/StaticCanvas.ts:141

lowerCanvasEl

get lowerCanvasEl(): HTMLCanvasElement

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

Returns

HTMLCanvasElement

Defined in

src/canvas/StaticCanvas.ts:137

Methods

_onObjectAdded()

_onObjectAdded(obj): void

Parameters

• obj: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>

Returns

void

Overrides

createCollectionMixin(CommonMethods<CanvasEvents>)._onObjectAdded

Defined in

src/canvas/StaticCanvas.ts:228

_onObjectRemoved()

_onObjectRemoved(obj): void

Parameters

• obj: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>

Returns

void

Overrides

createCollectionMixin(CommonMethods<CanvasEvents>)._onObjectRemoved

Defined in

src/canvas/StaticCanvas.ts:243

_onStackOrderChanged()

_onStackOrderChanged(): void

Returns

void

Overrides

createCollectionMixin(CommonMethods<CanvasEvents>)._onStackOrderChanged

Defined in

src/canvas/StaticCanvas.ts:249

_set()

_set(key, value): void

Parameters

• key: string

• value: any

Returns

void

Inherited from

createCollectionMixin(CommonMethods<CanvasEvents>)._set

Defined in

src/CommonMethods.ts:38

absolutePan()

absolutePan(point): void

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

Parameters

• point: Point

to move to

Returns

void

Defined in

src/canvas/StaticCanvas.ts:431

add()

add(…objects): number

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

Parameters

• …objects: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]

to add

Returns

number

new array length

Overrides

createCollectionMixin(CommonMethods<CanvasEvents>).add

Defined in

src/canvas/StaticCanvas.ts:210

bringObjectForward()

bringObjectForward(object, intersecting?): boolean

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

• object: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>

Object to send

• intersecting?: boolean

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

Returns

boolean

true if change occurred

Inherited from

createCollectionMixin(CommonMethods<CanvasEvents>).bringObjectForward

Defined in

src/Collection.ts:240

bringObjectToFront()

bringObjectToFront(object): boolean

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

Parameters

• object: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>

Object to send

Returns

boolean

true if change occurred

Inherited from

createCollectionMixin(CommonMethods<CanvasEvents>).bringObjectToFront

Defined in

src/Collection.ts:194

calcOffset()

calcOffset(): object

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

Returns

object

left

left: number = 0

top

top: number = 0

Defined in

src/canvas/StaticCanvas.ts:266

calcViewportBoundaries()

calcViewportBoundaries(): TCornerPoint

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

TCornerPoint

Defined in

src/canvas/StaticCanvas.ts:528

cancelRequestedRender()

cancelRequestedRender(): void

Returns

void

Defined in

src/canvas/StaticCanvas.ts:546

centerObject()

centerObject(object): void

Centers object vertically and horizontally in the canvas

Parameters

• object: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>

Object to center vertically and horizontally

Returns

void

Defined in

src/canvas/StaticCanvas.ts:755

centerObjectH()

centerObjectH(object): void

Centers object horizontally in the canvas

Parameters

• object: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>

Returns

void

Defined in

src/canvas/StaticCanvas.ts:733

centerObjectV()

centerObjectV(object): void

Centers object vertically in the canvas

Parameters

• object: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>

Object to center vertically

Returns

void

Defined in

src/canvas/StaticCanvas.ts:744

clear()

clear(): void

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

Returns

void

Defined in

src/canvas/StaticCanvas.ts:478

clearContext()

clearContext(ctx): void

Clears specified context of canvas element

Parameters

• ctx: CanvasRenderingContext2D

Context to clear

Returns

void

Defined in

src/canvas/StaticCanvas.ts:463

clone()

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

Clones canvas instance

Parameters

• properties?: string[]

Array of properties to include in the cloned canvas and children

Returns

Promise<StaticCanvas<EventSpec>>

Defined in

src/canvas/StaticCanvas.ts:1326

cloneWithoutData()

cloneWithoutData(): StaticCanvas<EventSpec>

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

Returns

StaticCanvas<EventSpec>

Defined in

src/canvas/StaticCanvas.ts:1336

collectObjects()

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

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

• bbox: TBBox

a bounding box in scene coordinates

• options = {}

an object with includeIntersecting

• options.includeIntersecting?: boolean = true

Returns

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

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

Inherited from

createCollectionMixin(CommonMethods<CanvasEvents>).collectObjects

Defined in

src/Collection.ts:326

complexity()

complexity(): number

Returns number representation of a collection complexity

Returns

number

complexity

Inherited from

createCollectionMixin(CommonMethods<CanvasEvents>).complexity

Defined in

src/Collection.ts:165

contains()

contains(object, deep?): boolean

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

Parameters

• object: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>

Object to check against

• deep?: boolean

true to check all descendants, false to check only _objects

Returns

boolean

true if collection contains an object

Inherited from

createCollectionMixin(CommonMethods<CanvasEvents>).contains

Defined in

src/Collection.ts:148

createSVGClipPathMarkup()

createSVGClipPathMarkup(options): string

Parameters

• options: TSVGExportOptions

Returns

string

Defined in

src/canvas/StaticCanvas.ts:1079

createSVGFontFacesMarkup()

createSVGFontFacesMarkup(): string

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

string

Defined in

src/canvas/StaticCanvas.ts:1122

createSVGRefElementsMarkup()

createSVGRefElementsMarkup(): string

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

Returns

string

Defined in

src/canvas/StaticCanvas.ts:1094

dispose()

dispose(): Promise<boolean>

Waits until rendering has settled to destroy the canvas

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

if aborted by a consequent call

Defined in

src/canvas/StaticCanvas.ts:1455

drawClipPathOnCanvas()

drawClipPathOnCanvas(ctx, clipPath): void

Paint the cached clipPath on the lowerCanvasEl

Parameters

• ctx: CanvasRenderingContext2D

Context to render on

• clipPath: TCachedFabricObject

Returns

void

Defined in

src/canvas/StaticCanvas.ts:609

drawControls()

drawControls(_ctx): void

Parameters

• _ctx: CanvasRenderingContext2D

Returns

void

Defined in

src/canvas/StaticCanvas.ts:553

findNewLowerIndex()

findNewLowerIndex(object, idx, intersecting?): number

Parameters

• object: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>

• idx: number

• intersecting?: boolean

Returns

number

Inherited from

createCollectionMixin(CommonMethods<CanvasEvents>).findNewLowerIndex

Defined in

src/Collection.ts:272

findNewUpperIndex()

findNewUpperIndex(object, idx, intersecting?): number

Parameters

• object: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>

• idx: number

• intersecting?: boolean

Returns

number

Inherited from

createCollectionMixin(CommonMethods<CanvasEvents>).findNewUpperIndex

Defined in

src/Collection.ts:295

fire()

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

Fires event with an optional options object

Type Parameters

• K extends keyof CanvasEvents

Parameters

• eventName: K

Event name to fire

• options?: CanvasEvents[K]

Options object

Returns

void

Inherited from

createCollectionMixin(CommonMethods<CanvasEvents>).fire

Defined in

src/Observable.ts:167

forEachObject()

forEachObject(callback): void

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

• callback

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

Returns

void

Inherited from

createCollectionMixin(CommonMethods<CanvasEvents>).forEachObject

Defined in

src/Collection.ts:91

get()

get(property): any

Basic getter

Parameters

• property: string

Property name

Returns

any

value of a property

Inherited from

createCollectionMixin(CommonMethods<CanvasEvents>).get

Defined in

src/CommonMethods.ts:59

getCenter()

getCenter(): object

Returns coordinates of a center of canvas. Returned value is an object with top and left properties

Returns

object

object with “top” and “left” number values

left

left: number

top

top: number

Defined in

src/canvas/StaticCanvas.ts:715

getCenterPoint()

getCenterPoint(): Point

Returns coordinates of a center of canvas.

Returns

Point

Defined in

src/canvas/StaticCanvas.ts:726

getContext()

getContext(): CanvasRenderingContext2D

Returns context of canvas where objects are drawn

Returns

CanvasRenderingContext2D

Defined in

src/canvas/StaticCanvas.ts:471

getElement()

getElement(): HTMLCanvasElement

Returns <canvas> element corresponding to this instance

Returns

HTMLCanvasElement

Defined in

src/canvas/StaticCanvas.ts:455

getHeight()

getHeight(): number

Returns canvas height (in px)

Returns

number

Defined in

src/canvas/StaticCanvas.ts:282

getObjects()

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

Returns an array of children objects of this instance

Parameters

• …types?: string[]

When specified, only objects of these types are returned

Returns

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

Inherited from

createCollectionMixin(CommonMethods<CanvasEvents>).getObjects

Defined in

src/Collection.ts:108

getVpCenter()

getVpCenter(): Point

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

Returns

Point

vpCenter, viewport center

Defined in

src/canvas/StaticCanvas.ts:793

getWidth()

getWidth(): number

Returns canvas width (in px)

Returns

number

Defined in

src/canvas/StaticCanvas.ts:274

getZoom()

getZoom(): number

Returns canvas zoom level

Returns

number

Defined in

src/canvas/StaticCanvas.ts:384

insertAt()

insertAt(index, …objects): number

Inserts an object into collection at specified index

Parameters

• index: number

Index to insert object at

• …objects: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]

Object(s) to insert

Returns

number

new array length

Overrides

createCollectionMixin(CommonMethods<CanvasEvents>).insertAt

Defined in

src/canvas/StaticCanvas.ts:216

isEmpty()

isEmpty(): boolean

Returns true if collection contains no objects

Returns

boolean

true if collection is empty

Inherited from

createCollectionMixin(CommonMethods<CanvasEvents>).isEmpty

Defined in

src/Collection.ts:128

item()

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

Returns object at specified index

Parameters

• index: number

Returns

FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>

object at index

Inherited from

createCollectionMixin(CommonMethods<CanvasEvents>).item

Defined in

src/Collection.ts:120

loadFromJSON()

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

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

• json: string | Record<string, any>

JSON string or object

• reviver?

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

• options?: Abortable = {}

options

Returns

Promise<StaticCanvas<EventSpec>>

instance

Tutorial

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

See

demo

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.
});

Defined in

src/canvas/StaticCanvas.ts:1275

moveObjectTo()

moveObjectTo(object, index): boolean

Moves an object to specified level in stack of drawn objects

Parameters

• object: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>

Object to send

• index: number

Position to move to

Returns

boolean

true if change occurred

Inherited from

createCollectionMixin(CommonMethods<CanvasEvents>).moveObjectTo

Defined in

src/Collection.ts:262

off()

off(eventName)

off<K>(eventName): void

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

• K extends keyof CanvasEvents

Parameters

• eventName: K

event name (eg. ‘after:render ’)

Returns

void

Inherited from

createCollectionMixin(CommonMethods<CanvasEvents>).off

Defined in

src/Observable.ts:122

off(eventName, handler)

off<K>(eventName, handler): void

unsubscribe an event listener

Type Parameters

• K extends keyof CanvasEvents

Parameters

• eventName: K

event name (eg. ‘after:render ’)

• handler: TEventCallback<any>

event listener to unsubscribe

Returns

void

Inherited from

createCollectionMixin(CommonMethods<CanvasEvents>).off

Defined in

src/Observable.ts:128

off(handlers)

off(handlers): void

unsubscribe event listeners

Parameters

• handlers: EventRegistryObject<CanvasEvents>

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

Returns

void

Inherited from

createCollectionMixin(CommonMethods<CanvasEvents>).off

Defined in

src/Observable.ts:133

off()

off(): void

unsubscribe all event listeners

Returns

void

Inherited from

createCollectionMixin(CommonMethods<CanvasEvents>).off

Defined in

src/Observable.ts:137

on()

on(eventName, handler)

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

Observes specified event

Type Parameters

• K extends keyof CanvasEvents

Parameters

• eventName: K

Event name (eg. ‘after:render ’)

• handler: TEventCallback<E>

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

Returns

VoidFunction

disposer

Inherited from

createCollectionMixin(CommonMethods<CanvasEvents>).on

Alias

Defined in

src/Observable.ts:23

on(handlers)

on(handlers): VoidFunction

Parameters

• handlers: EventRegistryObject<CanvasEvents>

Returns

VoidFunction

Inherited from

createCollectionMixin(CommonMethods<CanvasEvents>).on

Defined in

src/Observable.ts:27

once()

once(eventName, handler)

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

Observes specified event once

Type Parameters

• K extends keyof CanvasEvents

Parameters

• eventName: K

Event name (eg. ‘after:render ’)

• handler: TEventCallback<E>

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

Returns

VoidFunction

disposer

Inherited from

createCollectionMixin(CommonMethods<CanvasEvents>).once

Alias

once

Defined in

src/Observable.ts:62

once(handlers)

once(handlers): VoidFunction

Parameters

• handlers: EventRegistryObject<CanvasEvents>

Returns

VoidFunction

Inherited from

createCollectionMixin(CommonMethods<CanvasEvents>).once

Defined in

src/Observable.ts:66

relativePan()

relativePan(point): void

Pans viewpoint relatively

Parameters

• point: Point

(position vector) to move by

Returns

void

Defined in

src/canvas/StaticCanvas.ts:442

renderAll()

renderAll(): void

Renders the canvas

Returns

void

Defined in

src/canvas/StaticCanvas.ts:492

renderCanvas()

renderCanvas(ctx, objects): void

Renders background, objects, overlay and controls.

Parameters

• ctx: CanvasRenderingContext2D

• objects: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]

to render

Returns

void

Defined in

src/canvas/StaticCanvas.ts:562

requestRenderAll()

requestRenderAll(): void

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

void

Defined in

src/canvas/StaticCanvas.ts:518

sendObjectBackwards()

sendObjectBackwards(object, intersecting?): boolean

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

• object: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>

Object to send

• intersecting?: boolean

If true, send object behind next lower intersecting object

Returns

boolean

true if change occurred

Inherited from

createCollectionMixin(CommonMethods<CanvasEvents>).sendObjectBackwards

Defined in

src/Collection.ts:214

sendObjectToBack()

sendObjectToBack(object): boolean

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

Parameters

• object: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>

Object to send to back

Returns

boolean

true if change occurred

Inherited from

createCollectionMixin(CommonMethods<CanvasEvents>).sendObjectToBack

Defined in

src/Collection.ts:178

set()

set(key, value?): StaticCanvas<EventSpec>

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

• key: string | Record<string, any>

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

• value?: any

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

Returns

StaticCanvas<EventSpec>

Inherited from

createCollectionMixin(CommonMethods<CanvasEvents>).set

Defined in

src/CommonMethods.ts:29

setDimensions()

setDimensions(dimensions, options)

setDimensions(dimensions, options?): void

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

Parameters

• dimensions: Partial<CSSDimensions>

Object with width/height properties

• options?

Options object

• options.backstoreOnly?: false

Set the given dimensions only as canvas backstore dimensions

• options.cssOnly?: true

Set the given dimensions only as css dimensions

Returns

void

Defined in

src/canvas/StaticCanvas.ts:361

setDimensions(dimensions, options)

setDimensions(dimensions, options?): void

Parameters

• dimensions: Partial<TSize>

• options?

• options.backstoreOnly?: true

• options.cssOnly?: false

Returns

void

Defined in

src/canvas/StaticCanvas.ts:365

setDimensions(dimensions, options)

setDimensions(dimensions, options?): void

Parameters

• dimensions: Partial<TSize>

• options?: undefined

Returns

void

Defined in

src/canvas/StaticCanvas.ts:369

setHeight()

setHeight(value, options)

setHeight(value, options?): void

s Sets height of this canvas instance

Parameters

• value: number

Value to set height to

• options?

Options object

• options.backstoreOnly?: true

Set the given dimensions only as canvas backstore dimensions

• options.cssOnly?: false

Set the given dimensions only as css dimensions

Returns

void

Defined in

src/canvas/StaticCanvas.ts:314

setHeight(value, options)

setHeight(value, options?): void

Parameters

• value: string | number

• options?

• options.backstoreOnly?: false

• options.cssOnly?: true

Returns

void

Defined in

src/canvas/StaticCanvas.ts:318

setViewportTransform()

setViewportTransform(vpt): void

Sets viewport transformation of this canvas instance

Parameters

• vpt: TMat2D

a Canvas 2D API transform matrix

Returns

void

Defined in

src/canvas/StaticCanvas.ts:392

setWidth()

setWidth(value, options)

setWidth(value, options?): void

Sets width of this canvas instance

Parameters

• value: number

Value to set width to

• options?

Options object

• options.backstoreOnly?: true

Set the given dimensions only as canvas backstore dimensions

• options.cssOnly?: false

Set the given dimensions only as css dimensions

Returns

void

Defined in

src/canvas/StaticCanvas.ts:294

setWidth(value, options)

setWidth(value, options?): void

Parameters

• value: string | number

• options?

• options.backstoreOnly?: false

• options.cssOnly?: true

Returns

void

Defined in

src/canvas/StaticCanvas.ts:298

setZoom()

setZoom(value): void

Sets zoom level of this canvas instance

Parameters

• value: number

to set zoom to, less than 1 zooms out

Returns

void

Defined in

src/canvas/StaticCanvas.ts:423

size()

size(): number

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

Returns

number

Collection size

Inherited from

createCollectionMixin(CommonMethods<CanvasEvents>).size

Defined in

src/Collection.ts:136

toCanvasElement()

toCanvasElement(multiplier?, options?): HTMLCanvasElement

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

• multiplier?: number = 1

a zoom factor.

• options?: TToCanvasElementOptions = ...

Cropping informations

Returns

HTMLCanvasElement

Defined in

src/canvas/StaticCanvas.ts:1412

toDataURL()

toDataURL(options?): string

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

Parameters

• options?: TDataUrlOptions = ...

Options object

Returns

string

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

See

demo

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)
});

Defined in

src/canvas/StaticCanvas.ts:1381

toDatalessJSON()

toDatalessJSON(propertiesToInclude?): any

Returns dataless JSON representation of canvas

Parameters

• propertiesToInclude?: string[]

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

Returns

any

json string

Defined in

src/canvas/StaticCanvas.ts:816

toDatalessObject()

toDatalessObject(propertiesToInclude?): any

Returns dataless object representation of canvas

Parameters

• propertiesToInclude?: string[]

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

Returns

any

object representation of an instance

Defined in

src/canvas/StaticCanvas.ts:853

toJSON()

toJSON(): any

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

any

JSON compatible object

Tutorial

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

See

demo

Examples

var json = canvas.toJSON();

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

var json = canvas.toJSON();

Defined in

src/canvas/StaticCanvas.ts:844

toObject()

toObject(propertiesToInclude?): any

Returns object representation of canvas

Parameters

• propertiesToInclude?: string[]

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

Returns

any

object representation of an instance

Defined in

src/canvas/StaticCanvas.ts:825

toSVG()

toSVG(options?, reviver?): string

Returns SVG representation of canvas

Parameters

• options?: TSVGExportOptions = {}

Options object for SVG output

• reviver?: TSVGReviver

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

Returns

string

SVG string

Function

Tutorial

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

See

demo

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; ', '');
});

Defined in

src/canvas/StaticCanvas.ts:992

toString()

toString(): string

Returns a string representation of an instance

Returns

string

string representation of an instance

Defined in

src/canvas/StaticCanvas.ts:1514

toggle()

toggle(property): StaticCanvas<EventSpec>

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

Parameters

• property: string

Property to toggle

Returns

StaticCanvas<EventSpec>

Inherited from

createCollectionMixin(CommonMethods<CanvasEvents>).toggle

Defined in

src/CommonMethods.ts:46

viewportCenterObject()

viewportCenterObject(object): void

Centers object vertically and horizontally in the viewport

Parameters

• object: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>

Object to center vertically and horizontally

Returns

void

Defined in

src/canvas/StaticCanvas.ts:763

viewportCenterObjectH()

viewportCenterObjectH(object): void

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

Parameters

• object: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>

Object to center vertically and horizontally

Returns

void

Defined in

src/canvas/StaticCanvas.ts:771

viewportCenterObjectV()

viewportCenterObjectV(object): void

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

Parameters

• object: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>

Object to center vertically and horizontally

Returns

void

Defined in

src/canvas/StaticCanvas.ts:782

zoomToPoint()

zoomToPoint(point, value): void

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

• point: Point

to zoom with respect to

• value: number

to set zoom to, less than 1 zooms out

Returns

void

Defined in

src/canvas/StaticCanvas.ts:406

getDefaults()

static getDefaults(): Record<string, any>

Returns

Record<string, any>

Defined in

src/canvas/StaticCanvas.ts:182