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:
Default Value:
  • [1,0,0,1,0,0]
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

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 both 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