Optional el: string | HTMLCanvasElementProtected Optional __cleanupOptional reason: anyneeds to end up in the constructor too
move to Canvas
Background color of canvas instance.
Optional backgroundBackground 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
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
Optional clipa 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
move to Canvas
Optional destroyedIf true the Canvas is in the process or has been disposed/destroyed. No more rendering operation will be executed on this canvas.
Optional disposedStarted the process of disposing but not done yet. WIll likely complete the render cycle already scheduled but stopping adding more.
When true, canvas is scaled by devicePixelRatio for better rendering on retina screens
Protected hasHeight in virtual/logical pixels of the canvas. The canvas can be taller than width if retina scaling is active
Indicates whether this canvas will use image smoothing, this is on by default in browsers
Indicates whether toObject/toDatalessObject should include default values if set to false, takes precedence over the object value.
Protected nextOverlay color of canvas instance.
1.3.9
Optional overlayOverlay 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
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
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.
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
When true, getSvgTransform() will apply the StaticCanvas.viewportTransform to the SVG transformation. When true, a zoomed canvas will then produce zoomed SVG output.
The transformation (a Canvas 2D API transform matrix) which focuses the viewport
Default transform
canvas.viewportTransform = [1, 0, 0, 1, 0, 0];
Scale by 70% and translate toward bottom-right by 50, without skewing
canvas.viewportTransform = [0.7, 0, 0, 0.7, 50, 50];
Describe canvas element extension over design properties are tl,tr,bl,br. if canvas is not zoomed/panned those points are the four corner of canvas if canvas is viewportTransformed you those points indicate the extension of canvas element in plain untrasformed coordinates The coordinates get updated with
calcViewportBoundaries.
Width in virtual/logical pixels of the canvas. The canvas can be larger than width if retina scaling is active
Static ownA reference to the canvas actual HTMLCanvasElement. Can be use to read the raw pixels, but never write or manipulate
Private __serializePrivate
Optional propertiesToInclude: string[]Private _centerPrivate
Object to center
Center point
Private _isPrivate _renderPrivate _renderPrivate _renderPrivate
Context to render on
to render
Private _renderProtected _setProtected
Internal use only
Private _setProtected _setPrivate _setSVGBgPrivate _setSVGBgPrivate
Private _setSVGHeaderPrivate
Private _setSVGObjectPrivate
This is its own function because the Canvas ( non static ) requires extra code here
Private _setSVGObjectsPrivate
Private _setSVGPreamblePrivate
Private _toPrivate
Optional propertiesToInclude: string[]Private _toPrivate
Optional propertiesToInclude: string[]Pan viewport so as to place point at top left corner of canvas
to move to
Rest ...objects: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]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.
Object to send
Optional intersecting: booleanIf true, send object in front of next upper intersecting object
true if change occurred
Moves an object or the objects of a multiple selection to the top of the stack of drawn objects
Object to send
true if change occurred
Calculate the position of the 4 corner of canvas with current viewportTransform. helps to determinate when an object is in the current rendering viewport using object absolute coordinates ( aCoords )
points.tl
Centers object vertically and horizontally in the canvas
Object to center vertically and horizontally
Centers object horizontally in the canvas
Centers object vertically in the canvas
Object to center vertically
Clones canvas instance
Optional properties: string[]Array of properties to include in the cloned canvas and children
Clones canvas instance without cloning existing data. This essentially copies canvas dimensions since loadFromJSON does not affect canvas size.
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.
Optional includearray of objects contained in the bounding box, ordered from top to bottom stacking wise
Returns true if collection contains an object.
Prefer using FabricObject#isDescendantOf for performance reasons
instead of a.contains(b) use b.isDescendantOf(a)
Object to check against
Optional deep: booleantrue to check all descendants, false to check only _objects
true if collection contains an object
Private destroyPrivate
Clears the canvas element, disposes objects and frees resources.
Invoked as part of the async operation of dispose.
CAUTION:
This method is UNSAFE. You may encounter a race condition using it if there's a requested render. Call this method only if you are sure rendering has settled. Consider using dispose as it is SAFE
Paint the cached clipPath on the lowerCanvasEl
Context to render on
Optional intersecting: booleanOptional intersecting: booleanFires event with an optional options object
Event name to fire
Optional options: CanvasEvents[K]Options object
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.
Callback invoked with current object as first argument, index - as second and an array of all objects - as third.
Returns an array of children objects of this instance
Optional Rest ...types: string[]When specified, only objects of these types are returned
Private getProtected initRest ...objects: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]Returns object at specified index
object at index
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
Optional reviver: (<T>(serializedObj, instance) => void)Method for further parsing of JSON elements, called after each fabric object created.
Method for further parsing of object elements, called after each fabric object created.
Optional options: Abortable = {}options
instance
http://fabricjs.com/fabric-intro-part-3#deserialization
loadFromJSON
canvas.loadFromJSON(json).then((canvas) => canvas.requestRenderAll());
loadFromJSON with reviver
canvas.loadFromJSON(json, function(o, object) {
// `o` = json object
// `object` = fabric.Object instance
// ... do some stuff ...
}).then((canvas) => {
... canvas is restored, add your code.
});
Moves an object to specified level in stack of drawn objects
Object to send
Position to move to
true if change occurred
unsubscribe an event listener
event name (eg. 'after:render')
event listener to unsubscribe
unsubscribe event listeners
handlers key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler})
unsubscribe all event listeners
Observes specified event
Event name (eg. 'after:render')
Function that receives a notification when an event of the specified type occurs
disposer
on
Observes specified event once
Event name (eg. 'after:render')
Function that receives a notification when an event of the specified type occurs
disposer
once
Pans viewpoint relatively
(position vector) to move by
Rest ...objects: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>[]Private renderPrivate
Function created to be instance bound at initialization used in requestAnimationFrame rendering Let the fabricJS call it. If you call it manually you could have more animationFrame stacking on to of each other for an imperative rendering, use canvas.renderAll
Renders background, objects, overlay and controls.
to render
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.
Object to send
Optional intersecting: booleanIf true, send object behind next lower intersecting object
true if change occurred
Moves an object or the objects of a multiple selection to the bottom of the stack of drawn objects
Object to send to back
true if change occurred
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)
Optional value: anyProperty value (if function, the value is passed into it and its return value is used as a new one)
Sets dimensions (width, height) of this canvas instance. when options.cssOnly flag active you should also supply the unit of measure (px/%/em)
Object with width/height properties
Optional options: TCanvasSizeOptions = {}Options object
Sets height of this canvas instance
Value to set height to
Optional options: TCanvasSizeOptions = {}Options object
will be removed in 7.0
Sets viewport transformation of this canvas instance
a Canvas 2D API transform matrix
Sets width of this canvas instance
Value to set width to
Optional options: TCanvasSizeOptions = {}Options object
will be removed in 7.0
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
Optional multiplier: number = 1a zoom factor.
Optional options: TToCanvasElementOptions<FabricObject<Partial<ObjectProps>, SerializedObjectProps, ObjectEvents>> = ...Cropping informations
Exports canvas element to a dataurl image. Note that when multiplier is used, cropping is scaled appropriately
Optional options: TDataUrlOptions<FabricObject<Partial<ObjectProps>, SerializedObjectProps, ObjectEvents>> = ...Options object
Returns a data: URL containing a representation of the object in the format specified by options.format
Generate jpeg dataURL with lower quality
var dataURL = canvas.toDataURL({
format: 'jpeg',
quality: 0.8
});
Generate cropped png dataURL (clipping of canvas)
var dataURL = canvas.toDataURL({
format: 'png',
left: 100,
top: 100,
width: 200,
height: 200
});
Generate double scaled png dataURL
var dataURL = canvas.toDataURL({
format: 'png',
multiplier: 2
});
Generate dataURL with objects that overlap a specified object
var myObject;
var dataURL = canvas.toDataURL({
filter: (object) => object.isContainedWithinObject(myObject) || object.intersectsWithObject(myObject)
});
Returns Object representation of canvas this alias is provided because if you call JSON.stringify on an instance, the toJSON object will be invoked if it exists. Having a toJSON method means you can do JSON.stringify(myCanvas)
JSON compatible object
http://fabricjs.com/fabric-intro-part-3#serialization
JSON without additional properties
var json = canvas.toJSON();
JSON with additional properties included
var json = canvas.toJSON(['lockMovementX', 'lockMovementY', 'lockRotation', 'lockScalingX', 'lockScalingY']);
JSON without default values
var json = canvas.toJSON();
Returns SVG representation of canvas
Optional options: TSVGExportOptions = {}Options object for SVG output
Optional reviver: TSVGReviverMethod for further parsing of svg elements, called after each fabric object converted into svg representation.
SVG string
http://fabricjs.com/fabric-intro-part-3#serialization
Normal SVG output
var svg = canvas.toSVG();
SVG output without preamble (without <?xml ../>)
var svg = canvas.toSVG({suppressPreamble: true});
SVG output with viewBox attribute
var svg = canvas.toSVG({
viewBox: {
x: 100,
y: 100,
width: 200,
height: 300
}
});
SVG output with different encoding (default: UTF-8)
var svg = canvas.toSVG({encoding: 'ISO-8859-1'});
Modify SVG output with reviver function
var svg = canvas.toSVG(null, function(svg) {
return svg.replace('stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; ', '');
});
Toggles specified property from true to false or from false to true
Property to toggle
Centers object vertically and horizontally in the viewport
Object to center vertically and horizontally
Centers object horizontally in the viewport, object.top is unchanged
Object to center vertically and horizontally
Centers object Vertically in the viewport, object.top is unchanged
Object to center vertically and horizontally
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.
to zoom with respect to
to set zoom to, less than 1 zooms out
Static getGenerated using TypeDoc
Static canvas class
See
demo
Fires
before:render
Fires
after:render
Fires
canvas:cleared
Fires
object:added
Fires
object:removed