Class: StaticCanvas

fabric.StaticCanvas

new StaticCanvas()

Static canvas class
Mixes In:
Source:
See:
Fires:
  • before:render
  • after:render
  • canvas:cleared
  • object:added
  • object:removed

Members

(static) EMPTY_JSON :String

Type:
  • String
Default Value:
  • {"objects": [], "background": "white"}
Source:

allowTouchScrolling :Boolean

Indicates whether the browser can be scrolled when using a touchscreen and dragging on the canvas
Type:
  • Boolean
Source:

backgroundColor :String|fabric.Pattern

Background color of canvas instance. Should be set via fabric.StaticCanvas#setBackgroundColor.
Type:
Source:

backgroundImage :fabric.Image

Background image of canvas instance. Should be set via fabric.StaticCanvas#setBackgroundImage. Backwards incompatibility note: The "backgroundImageOpacity" and "backgroundImageStretch" properties are deprecated since 1.3.9. Use fabric.Image#opacity, fabric.Image#width and fabric.Image#height.
Type:
Source:

backgroundVpt :Boolean

if set to false background image is not affected by viewport transform
Type:
  • Boolean
Since:
  • 1.6.3
Default Value:
  • true
Source:

clipTo :function

Function that determines clipping of entire canvas area Being passed context as first argument. See clipping canvas area in https://github.com/kangax/fabric.js/wiki/FAQ
Type:
  • function
Source:

controlsAboveOverlay :Boolean

Indicates whether object controls (borders/controls) are rendered above overlay image
Type:
  • Boolean
Source:

enableRetinaScaling

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

FX_DURATION :Number

Animation duration (in ms) for fx* methods
Type:
  • Number
Default Value:
  • 500
Source:

imageSmoothingEnabled :Boolean

Indicates whether this canvas will use image smoothing, this is on by default in browsers
Type:
  • Boolean
Default Value:
  • true
Source:

includeDefaultValues :Boolean

Indicates whether toObject/toDatalessObject should include default values
Type:
  • Boolean
Default Value:
  • true
Source:

overlayColor :String|fabric.Pattern

Overlay color of canvas instance. Should be set via fabric.StaticCanvas#setOverlayColor
Type:
Since:
  • 1.3.9
Source:

overlayImage :fabric.Image

Overlay image of canvas instance. Should be set via fabric.StaticCanvas#setOverlayImage. Backwards incompatibility note: The "overlayImageLeft" and "overlayImageTop" properties are deprecated since 1.3.9. Use fabric.Image#left and fabric.Image#top.
Type:
Source:

overlayVpt :Boolean

if set to false overlya image is not affected by viewport transform
Type:
  • Boolean
Since:
  • 1.6.3
Default Value:
  • true
Source:

renderOnAddRemove :Boolean

Indicates whether fabric.Collection.add, fabric.Collection.insertAt and fabric.Collection.remove should also re-render canvas. Disabling this option could give a great performance boost when adding/removing a lot of objects to/from canvas at once (followed by a manual rendering after addition/deletion)
Type:
  • Boolean
Default Value:
  • true
Source:

stateful :Boolean

Indicates whether objects' state should be saved
Type:
  • Boolean
Source:

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.
Type:
  • Boolean
Default Value:
  • true
Source:

viewportTransform :Array

The transformation (in the format of Canvas transform) which focuses the viewport
Type:
Source:

vptCoords

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 @method calcViewportBoundaries.
Source:

Methods

(static) supports(methodName) → {Boolean|null}

Provides a way to check support of some of the canvas methods (either those of HTMLCanvasElement itself, or rendering context)
Parameters:
Name Type Description
methodName String Method to check support for; Could be one of "getImageData", "toDataURL", "toDataURLWithQuality" or "setLineDash"
Source:
Returns:
`true` if method is supported (or at least exists), `null` if canvas element or context can not be initialized
Type
Boolean | null

absolutePan(point) → {fabric.Canvas}

Pan viewport so as to place point at top left corner of canvas
Parameters:
Name Type Description
point fabric.Point to move to
Source:
Returns:
instance
Type
fabric.Canvas

add(…object) → {Self}

Adds objects to collection, Canvas or Group, then renders canvas (if `renderOnAddRemove` is not `false`). in case of Group no changes to bounding box are made. Objects should be instances of (or inherit from) fabric.Object
Parameters:
Name Type Attributes Description
object fabric.Object <repeatable>
Zero or more fabric instances
Mixes In:
Source:
Returns:
thisArg
Type
Self

bringForward(object, intersectingopt) → {fabric.Canvas}

Moves an object or a selection up in stack of drawn objects
Parameters:
Name Type Attributes Description
object fabric.Object Object to send
intersecting Boolean <optional>
If `true`, send object in front of next upper intersecting object
Source:
Returns:
thisArg
Type
fabric.Canvas

bringToFront(object) → {fabric.Canvas}

Moves an object or the objects of a multiple selection to the top of the stack of drawn objects
Parameters:
Name Type Description
object fabric.Object Object to send
Source:
Returns:
thisArg
Type
fabric.Canvas

calcOffset() → {fabric.Canvas}

Calculates canvas element offset relative to the document This method is also attached as "resize" event handler of window
Source:
Returns:
instance
Type
fabric.Canvas

calcViewportBoundaries() → {Object}

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 )
Source:
Returns:
points.tl
Type
Object

centerObject(object) → {fabric.Canvas}

Centers object vertically and horizontally in the canvas You might need to call `setCoords` on an object after centering, to update controls area.
Parameters:
Name Type Description
object fabric.Object Object to center vertically and horizontally
Source:
Returns:
thisArg
Type
fabric.Canvas

centerObjectH(object) → {fabric.Canvas}

Centers object horizontally in the canvas You might need to call `setCoords` on an object after centering, to update controls area.
Parameters:
Name Type Description
object fabric.Object Object to center horizontally
Source:
Returns:
thisArg
Type
fabric.Canvas

centerObjectV(object) → {fabric.Canvas}

Centers object vertically in the canvas You might need to call `setCoords` on an object after centering, to update controls area.
Parameters:
Name Type Description
object fabric.Object Object to center vertically
Source:
Returns:
thisArg
Type
fabric.Canvas

clear() → {fabric.Canvas}

Clears all contexts (background, main, top) of an instance
Source:
Returns:
thisArg
Type
fabric.Canvas

clearContext(ctx) → {fabric.Canvas}

Clears specified context of canvas element
Parameters:
Name Type Description
ctx CanvasRenderingContext2D Context to clear
Source:
Returns:
thisArg
Type
fabric.Canvas

clone(callbackopt, propertiesopt)

Clones canvas instance
Parameters:
Name Type Attributes Description
callback Object <optional>
Receives cloned instance as a first argument
properties Array <optional>
Array of properties to include in the cloned canvas and children
Source:

cloneWithoutData(callbackopt)

Clones canvas instance without cloning existing data. This essentially copies canvas dimensions, clipping properties, etc. but leaves data empty (so that you can populate it with your own)
Parameters:
Name Type Attributes Description
callback Object <optional>
Receives cloned instance as a first argument
Source:

complexity() → {Number}

Returns number representation of a collection complexity
Mixes In:
Source:
Returns:
complexity
Type
Number

contains(object) → {Boolean}

Returns true if collection contains an object
Parameters:
Name Type Description
object Object Object to check against
Mixes In:
Source:
Returns:
`true` if collection contains an object
Type
Boolean

createSVGFontFacesMarkup(objects) → {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
Parameters:
Name Type Description
objects Array Array of fabric objects
Source:
Returns:
Type
String

createSVGRefElementsMarkup() → {String}

Creates markup containing SVG referenced elements like patterns, gradients etc.
Source:
Returns:
Type
String

dispose() → {fabric.Canvas}

Clears a canvas element and removes all event listeners
Source:
Returns:
thisArg
Type
fabric.Canvas

forEachObject(callback, context) → {Self}

Executes given function for each object in this group
Parameters:
Name Type Description
callback function Callback invoked with current object as first argument, index - as second and an array of all objects - as third. Callback is invoked in a context of Global Object (e.g. `window`) when no `context` argument is given
context Object Context (aka thisObject)
Mixes In:
Source:
Returns:
thisArg
Type
Self

fxCenterObjectH(object, callbacksopt) → {fabric.Canvas}

Centers object horizontally with animation.
Parameters:
Name Type Attributes Description
object fabric.Object Object to center
callbacks Object <optional>
Callbacks object with optional "onComplete" and/or "onChange" properties
Properties
Name Type Attributes Description
onComplete function <optional>
Invoked on completion
onChange function <optional>
Invoked on every step of animation
Source:
Returns:
thisArg
Type
fabric.Canvas

fxCenterObjectV(object, callbacksopt) → {fabric.Canvas}

Centers object vertically with animation.
Parameters:
Name Type Attributes Description
object fabric.Object Object to center
callbacks Object <optional>
Callbacks object with optional "onComplete" and/or "onChange" properties
Properties
Name Type Attributes Description
onComplete function <optional>
Invoked on completion
onChange function <optional>
Invoked on every step of animation
Source:
Returns:
thisArg
Type
fabric.Canvas

fxRemove(object, callbacksopt) → {fabric.Canvas}

Same as `fabric.Canvas#remove` but animated
Parameters:
Name Type Attributes Description
object fabric.Object Object to remove
callbacks Object <optional>
Callbacks object with optional "onComplete" and/or "onChange" properties
Properties
Name Type Attributes Description
onComplete function <optional>
Invoked on completion
onChange function <optional>
Invoked on every step of animation
Source:
Returns:
thisArg
Type
fabric.Canvas

fxStraightenObject(object) → {fabric.Canvas}

Same as fabric.Canvas.prototype.straightenObject, but animated
Parameters:
Name Type Description
object fabric.Object Object to straighten
Source:
Returns:
thisArg
Type
fabric.Canvas

getCenter() → {Object}

Returns coordinates of a center of canvas. Returned value is an object with top and left properties
Source:
Returns:
object with "top" and "left" number values
Type
Object

getContext() → {CanvasRenderingContext2D}

Returns context of canvas where objects are drawn
Source:
Returns:
Type
CanvasRenderingContext2D

getElement() → {HTMLCanvasElement}

Returns <canvas> element corresponding to this instance
Source:
Returns:
Type
HTMLCanvasElement

getHeight() → {Number}

Returns canvas height (in px)
Source:
Returns:
Type
Number

getObjects(typeopt) → {Array}

Returns an array of children objects of this instance Type parameter introduced in 1.3.10
Parameters:
Name Type Attributes Description
type String <optional>
When specified, only objects of this type are returned
Mixes In:
Source:
Returns:
Type
Array

getVpCenter() → {fabric.Point}

Calculate the point in canvas that correspond to the center of actual viewport.
Source:
Returns:
vpCenter, viewport center
Type
fabric.Point

getWidth() → {Number}

Returns canvas width (in px)
Source:
Returns:
Type
Number

getZoom() → {Number}

Returns canvas zoom level
Source:
Returns:
Type
Number

initialize(el, optionsopt) → {Object}

Constructor
Parameters:
Name Type Attributes Description
el HTMLElement | String <canvas> element to initialize instance on
options Object <optional>
Options object
Source:
Returns:
thisArg
Type
Object

insertAt(object, index, nonSplicing) → {Self}

Inserts an object into collection at specified index, then renders canvas (if `renderOnAddRemove` is not `false`) An object should be an instance of (or inherit from) fabric.Object
Parameters:
Name Type Description
object Object Object to insert
index Number Index to insert object at
nonSplicing Boolean When `true`, no splicing (shifting) of objects occurs
Mixes In:
Source:
Returns:
thisArg
Type
Self

isEmpty() → {Boolean}

Returns true if collection contains no objects
Mixes In:
Source:
Returns:
true if collection is empty
Type
Boolean

item(index) → {Self}

Returns object at specified index
Parameters:
Name Type Description
index Number
Mixes In:
Source:
Returns:
thisArg
Type
Self

loadFromDatalessJSON(json, callback, reviveropt) → {fabric.Canvas}

Populates canvas with data from the specified dataless JSON. JSON format must conform to the one of fabric.Canvas#toDatalessJSON
Parameters:
Name Type Attributes Description
json String | Object JSON string or object
callback function Callback, invoked when json is parsed and corresponding objects (e.g: fabric.Image) are initialized
reviver function <optional>
Method for further parsing of JSON elements, called after each fabric object created.
Deprecated:
  • since 1.2.2
Source:
Tutorials:
Returns:
instance
Type
fabric.Canvas

loadFromJSON(json, callback, reviveropt) → {fabric.Canvas}

Populates canvas with data from the specified JSON. JSON format must conform to the one of fabric.Canvas#toJSON
Parameters:
Name Type Attributes Description
json String | Object JSON string or object
callback function Callback, invoked when json is parsed and corresponding objects (e.g: fabric.Image) are initialized
reviver function <optional>
Method for further parsing of JSON elements, called after each fabric object created.
Source:
Tutorials:
See:
Returns:
instance
Type
fabric.Canvas
Examples

loadFromJSON

canvas.loadFromJSON(json, canvas.renderAll.bind(canvas));

loadFromJSON with reviver

canvas.loadFromJSON(json, canvas.renderAll.bind(canvas), function(o, object) {
  // `o` = json object
  // `object` = fabric.Object instance
  // ... do some stuff ...
});

moveTo(object, index) → {fabric.Canvas}

Moves an object to specified level in stack of drawn objects
Parameters:
Name Type Description
object fabric.Object Object to send
index Number Position to move to
Source:
Returns:
thisArg
Type
fabric.Canvas

off(eventName, handler) → {Self}

Stops event observing for a particular event handler. Calling this method without arguments removes all handlers for all events
Parameters:
Name Type Description
eventName String | Object Event name (eg. 'after:render') or object with key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler})
handler function Function to be deleted from EventListeners
Mixes In:
Deprecated:
  • `stopObserving` deprecated since 0.8.34 (use `off` instead)
Source:
Returns:
thisArg
Type
Self

on(eventName, handler) → {Self}

Observes specified event
Parameters:
Name Type Description
eventName String | Object Event name (eg. 'after:render') or object with key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler})
handler function Function that receives a notification when an event of the specified type occurs
Mixes In:
Deprecated:
  • `observe` deprecated since 0.8.34 (use `on` instead)
Source:
Returns:
thisArg
Type
Self

onBeforeScaleRotate()

Callback; invoked right before object is about to be scaled/rotated
Source:

relativePan(point) → {fabric.Canvas}

Pans viewpoint relatively
Parameters:
Name Type Description
point fabric.Point (position vector) to move by
Source:
Returns:
instance
Type
fabric.Canvas

remove(…object) → {Self}

Removes objects from a collection, then renders canvas (if `renderOnAddRemove` is not `false`)
Parameters:
Name Type Attributes Description
object fabric.Object <repeatable>
Zero or more fabric instances
Mixes In:
Source:
Returns:
thisArg
Type
Self

renderAll() → {fabric.Canvas}

Renders the canvas
Source:
Returns:
instance
Type
fabric.Canvas

renderCanvas(ctx, objects) → {fabric.Canvas}

Renders background, objects, overlay and controls.
Parameters:
Name Type Description
ctx CanvasRenderingContext2D
objects Array to render
Source:
Returns:
instance
Type
fabric.Canvas

sendBackwards(object, intersectingopt) → {fabric.Canvas}

Moves an object or a selection down in stack of drawn objects
Parameters:
Name Type Attributes Description
object fabric.Object Object to send
intersecting Boolean <optional>
If `true`, send object behind next lower intersecting object
Source:
Returns:
thisArg
Type
fabric.Canvas

sendToBack(object) → {fabric.Canvas}

Moves an object or the objects of a multiple selection to the bottom of the stack of drawn objects
Parameters:
Name Type Description
object fabric.Object Object to send to back
Source:
Returns:
thisArg
Type
fabric.Canvas

setBackgroundColor(backgroundColor, callback) → {fabric.Canvas}

Sets background color for this canvas
Parameters:
Name Type Description
backgroundColor String | fabric.Pattern Color or pattern to set background color to
callback function Callback to invoke when background color is set
Source:
See:
Returns:
thisArg
Type
fabric.Canvas
Examples

Normal backgroundColor - color value

canvas.setBackgroundColor('rgba(255, 73, 64, 0.6)', canvas.renderAll.bind(canvas));

fabric.Pattern used as backgroundColor

canvas.setBackgroundColor({
  source: 'http://fabricjs.com/assets/escheresque_ste.png'
}, canvas.renderAll.bind(canvas));

fabric.Pattern used as backgroundColor with repeat and offset

canvas.setBackgroundColor({
  source: 'http://fabricjs.com/assets/escheresque_ste.png',
  repeat: 'repeat',
  offsetX: 200,
  offsetY: 100
}, canvas.renderAll.bind(canvas));

setBackgroundImage(image, callback, optionsopt) → {fabric.Canvas}

Sets background image for this canvas
Parameters:
Name Type Attributes Description
image fabric.Image | String fabric.Image instance or URL of an image to set background to
callback function Callback to invoke when image is loaded and set as background
options Object <optional>
Optional options to set for the background image.
Source:
See:
Returns:
thisArg
Type
fabric.Canvas
Examples

Normal backgroundImage with left/top = 0

canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png', canvas.renderAll.bind(canvas), {
  // Needed to position backgroundImage at 0/0
  originX: 'left',
  originY: 'top'
});

backgroundImage with different properties

canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png', canvas.renderAll.bind(canvas), {
  opacity: 0.5,
  angle: 45,
  left: 400,
  top: 400,
  originX: 'left',
  originY: 'top'
});

Stretched backgroundImage #1 - width/height correspond to canvas width/height

fabric.Image.fromURL('http://fabricjs.com/assets/honey_im_subtle.png', function(img) {
   img.set({width: canvas.width, height: canvas.height, originX: 'left', originY: 'top'});
   canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
});

Stretched backgroundImage #2 - width/height correspond to canvas width/height

canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png', canvas.renderAll.bind(canvas), {
  width: canvas.width,
  height: canvas.height,
  // Needed to position backgroundImage at 0/0
  originX: 'left',
  originY: 'top'
});

backgroundImage loaded from cross-origin

canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png', canvas.renderAll.bind(canvas), {
  opacity: 0.5,
  angle: 45,
  left: 400,
  top: 400,
  originX: 'left',
  originY: 'top',
  crossOrigin: 'anonymous'
});

setDimensions(dimensions, optionsopt) → {fabric.Canvas}

Sets dimensions (width, height) of this canvas instance. when options.cssOnly flag active you should also supply the unit of measure (px/%/em)
Parameters:
Name Type Attributes Description
dimensions Object Object with width/height properties
Properties
Name Type Attributes Description
width Number | String <optional>
Width of canvas element
height Number | String <optional>
Height of canvas element
options Object <optional>
Options object
Properties
Name Type Attributes Default Description
backstoreOnly Boolean <optional>
false Set the given dimensions only as canvas backstore dimensions
cssOnly Boolean <optional>
false Set the given dimensions only as css dimensions
Source:
Returns:
thisArg
Type
fabric.Canvas

setHeight(value, optionsopt) → {fabric.Canvas}

Sets height of this canvas instance
Parameters:
Name Type Attributes Description
value Number | String Value to set height to
options Object <optional>
Options object
Properties
Name Type Attributes Default Description
backstoreOnly Boolean <optional>
false Set the given dimensions only as canvas backstore dimensions
cssOnly Boolean <optional>
false Set the given dimensions only as css dimensions
Source:
Returns:
instance
Type
fabric.Canvas

setOverlayColor(overlayColor, callback) → {fabric.Canvas}

Sets background color for this canvas
Parameters:
Name Type Description
overlayColor String | fabric.Pattern Color or pattern to set background color to
callback function Callback to invoke when background color is set
Source:
See:
Returns:
thisArg
Type
fabric.Canvas
Examples

Normal overlayColor - color value

canvas.setOverlayColor('rgba(255, 73, 64, 0.6)', canvas.renderAll.bind(canvas));

fabric.Pattern used as overlayColor

canvas.setOverlayColor({
  source: 'http://fabricjs.com/assets/escheresque_ste.png'
}, canvas.renderAll.bind(canvas));

fabric.Pattern used as overlayColor with repeat and offset

canvas.setOverlayColor({
  source: 'http://fabricjs.com/assets/escheresque_ste.png',
  repeat: 'repeat',
  offsetX: 200,
  offsetY: 100
}, canvas.renderAll.bind(canvas));

setOverlayImage(image, callback, optionsopt) → {fabric.Canvas}

Sets overlay image for this canvas
Parameters:
Name Type Attributes Description
image fabric.Image | String fabric.Image instance or URL of an image to set overlay to
callback function callback to invoke when image is loaded and set as an overlay
options Object <optional>
Optional options to set for the overlay image.
Source:
See:
Returns:
thisArg
Type
fabric.Canvas
Examples

Normal overlayImage with left/top = 0

canvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), {
  // Needed to position overlayImage at 0/0
  originX: 'left',
  originY: 'top'
});

overlayImage with different properties

canvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), {
  opacity: 0.5,
  angle: 45,
  left: 400,
  top: 400,
  originX: 'left',
  originY: 'top'
});

Stretched overlayImage #1 - width/height correspond to canvas width/height

fabric.Image.fromURL('http://fabricjs.com/assets/jail_cell_bars.png', function(img) {
   img.set({width: canvas.width, height: canvas.height, originX: 'left', originY: 'top'});
   canvas.setOverlayImage(img, canvas.renderAll.bind(canvas));
});

Stretched overlayImage #2 - width/height correspond to canvas width/height

canvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), {
  width: canvas.width,
  height: canvas.height,
  // Needed to position overlayImage at 0/0
  originX: 'left',
  originY: 'top'
});

overlayImage loaded from cross-origin

canvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), {
  opacity: 0.5,
  angle: 45,
  left: 400,
  top: 400,
  originX: 'left',
  originY: 'top',
  crossOrigin: 'anonymous'
});

setViewportTransform(vpt) → {fabric.Canvas}

Sets viewport transform of this canvas instance
Parameters:
Name Type Description
vpt Array the transform in the form of context.transform
Source:
Returns:
instance
Type
fabric.Canvas

setWidth(value, optionsopt) → {fabric.Canvas}

Sets width of this canvas instance
Parameters:
Name Type Attributes Description
value Number | String Value to set width to
options Object <optional>
Options object
Properties
Name Type Attributes Default Description
backstoreOnly Boolean <optional>
false Set the given dimensions only as canvas backstore dimensions
cssOnly Boolean <optional>
false Set the given dimensions only as css dimensions
Source:
Returns:
instance
Type
fabric.Canvas

setZoom(value) → {fabric.Canvas}

Sets zoom level of this canvas instance
Parameters:
Name Type Description
value Number to set zoom to, less than 1 zooms out
Source:
Returns:
instance
Type
fabric.Canvas

size() → {Number}

Returns a size of a collection (i.e: length of an array containing its objects)
Mixes In:
Source:
Returns:
Collection size
Type
Number

straightenObject(object) → {fabric.Canvas}

Straightens object, then rerenders canvas
Parameters:
Name Type Description
object fabric.Object Object to straighten
Source:
Returns:
thisArg
Type
fabric.Canvas

toDatalessJSON(propertiesToIncludeopt) → {String}

Returs dataless JSON representation of canvas
Parameters:
Name Type Attributes Description
propertiesToInclude Array <optional>
Any properties that you might want to additionally include in the output
Source:
Returns:
json string
Type
String

toDatalessObject(propertiesToIncludeopt) → {Object}

Returns dataless object representation of canvas
Parameters:
Name Type Attributes Description
propertiesToInclude Array <optional>
Any properties that you might want to additionally include in the output
Source:
Returns:
object representation of an instance
Type
Object

toDataURL(optionsopt) → {String}

Exports canvas element to a dataurl image. Note that when multiplier is used, cropping is scaled appropriately
Parameters:
Name Type Attributes Description
options Object <optional>
Options object
Properties
Name Type Attributes Default Description
format String <optional>
png The format of the output image. Either "jpeg" or "png"
quality Number <optional>
1 Quality level (0..1). Only used for jpeg.
multiplier Number <optional>
1 Multiplier to scale by
left Number <optional>
Cropping left offset. Introduced in v1.2.14
top Number <optional>
Cropping top offset. Introduced in v1.2.14
width Number <optional>
Cropping width. Introduced in v1.2.14
height Number <optional>
Cropping height. Introduced in v1.2.14
Source:
See:
Returns:
Returns a data: URL containing a representation of the object in the format specified by options.format
Type
String
Examples

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

toDataURLWithMultiplier(format, multiplier, quality) → {String}

Exports canvas element to a dataurl image (allowing to change image size via multiplier).
Parameters:
Name Type Description
format String (png|jpeg)
multiplier Number
quality Number (0..1)
Deprecated:
  • since 1.0.13
Source:
Returns:
Type
String

toJSON(propertiesToIncludeopt) → {String}

Returns JSON representation of canvas
Parameters:
Name Type Attributes Description
propertiesToInclude Array <optional>
Any properties that you might want to additionally include in the output
Source:
Tutorials:
See:
Returns:
JSON string
Type
String
Examples

JSON without additional properties

var json = canvas.toJSON();

JSON with additional properties included

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

JSON without default values

canvas.includeDefaultValues = false;
var json = canvas.toJSON();

toObject(propertiesToIncludeopt) → {Object}

Returns object representation of canvas
Parameters:
Name Type Attributes Description
propertiesToInclude Array <optional>
Any properties that you might want to additionally include in the output
Source:
Returns:
object representation of an instance
Type
Object

toString() → {String}

Returns a string representation of an instance
Source:
Returns:
string representation of an instance
Type
String

toSVG(optionsopt, reviveropt) → {String}

Returns SVG representation of canvas
Parameters:
Name Type Attributes Description
options Object <optional>
Options object for SVG output
Properties
Name Type Attributes Default Description
suppressPreamble Boolean <optional>
false If true xml tag is not included
viewBox Object <optional>
SVG viewbox object
Properties
Name Type Attributes Description
x Number <optional>
x-cooridnate of viewbox
y Number <optional>
y-coordinate of viewbox
width Number <optional>
Width of viewbox
height Number <optional>
Height of viewbox
encoding String <optional>
UTF-8 Encoding of SVG output
width String <optional>
desired width of svg with or without units
height String <optional>
desired height of svg with or without units
reviver function <optional>
Method for further parsing of svg elements, called after each fabric object converted into svg representation.
Source:
Tutorials:
See:
Returns:
SVG string
Type
String
Examples

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

trigger(eventName, optionsopt) → {Self}

Fires event with an optional options object
Parameters:
Name Type Attributes Description
eventName String Event name to fire
options Object <optional>
Options object
Mixes In:
Deprecated:
  • `fire` deprecated since 1.0.7 (use `trigger` instead)
Source:
Returns:
thisArg
Type
Self

viewportCenterObject(object) → {fabric.Canvas}

Centers object vertically and horizontally in the viewport You might need to call `setCoords` on an object after centering, to update controls area.
Parameters:
Name Type Description
object fabric.Object Object to center vertically and horizontally
Source:
Returns:
thisArg
Type
fabric.Canvas

viewportCenterObjectH(object) → {fabric.Canvas}

Centers object horizontally in the viewport, object.top is unchanged You might need to call `setCoords` on an object after centering, to update controls area.
Parameters:
Name Type Description
object fabric.Object Object to center vertically and horizontally
Source:
Returns:
thisArg
Type
fabric.Canvas

viewportCenterObjectV(object) → {fabric.Canvas}

Centers object Vertically in the viewport, object.top is unchanged You might need to call `setCoords` on an object after centering, to update controls area.
Parameters:
Name Type Description
object fabric.Object Object to center vertically and horizontally
Source:
Returns:
thisArg
Type
fabric.Canvas

zoomToPoint(point, value) → {fabric.Canvas}

Sets zoom level of this canvas instance, zoom centered around point
Parameters:
Name Type Description
point fabric.Point to zoom with respect to
value Number to set zoom to, less than 1 zooms out
Source:
Returns:
instance
Type
fabric.Canvas