Class: Canvas

fabric.Canvas

new Canvas()

Canvas class
Source:
Tutorials:
See:
Fires:
  • object:added
  • object:modified
  • object:rotating
  • object:scaling
  • object:moving
  • object:selected
  • before:selection:cleared
  • selection:cleared
  • selection:created
  • path:created
  • mouse:down
  • mouse:move
  • mouse:up
  • mouse:over
  • mouse:out

Extends

Members

allowTouchScrolling :Boolean

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

altActionKey :String

Indicates which key enable alternate action on corner values: 'altKey', 'shiftKey', 'ctrlKey'. If `null` or 'none' or any other string that is not a modifier key feature is disabled feature disabled.
Type:
  • String
Since:
  • 1.6.2
Default Value:
  • shiftKey
Source:

altSelectionKey :null|String

Indicates which key enable alternative selection in case of target overlapping with active object values: 'altKey', 'shiftKey', 'ctrlKey'. If `null` or 'none' or any other string that is not a modifier key feature is disabled feature disabled.
Type:
  • null | String
Since:
  • 1.6.5
Source:

backgroundColor :String|fabric.Pattern

Background color of canvas instance. Should be set via fabric.StaticCanvas#setBackgroundColor.
Type:
Inherited From:
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:
Inherited From:
Source:

backgroundVpt :Boolean

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

centeredKey :String

Indicates which key enable centered Transfrom values: 'altKey', 'shiftKey', 'ctrlKey'. If `null` or 'none' or any other string that is not a modifier key feature is disabled feature disabled.
Type:
  • String
Since:
  • 1.6.2
Default Value:
  • altKey
Source:

centeredRotation :Boolean

When true, objects use center point as the origin of rotate transformation. Backwards incompatibility note: This property replaces "centerTransform" (Boolean).
Type:
  • Boolean
Since:
  • 1.3.4
Source:

centeredScaling :Boolean

When true, objects use center point as the origin of scale transformation. Backwards incompatibility note: This property replaces "centerTransform" (Boolean).
Type:
  • Boolean
Since:
  • 1.3.4
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
Inherited From:
Source:

containerClass :String

Default element class that's given to wrapper (div) element of canvas
Type:
  • String
Default Value:
  • canvas-container
Source:

controlsAboveOverlay :Boolean

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

defaultCursor :String

Default cursor value used for the entire canvas
Type:
  • String
Default Value:
  • default
Source:

enableRetinaScaling

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

fireMiddleClick :Boolean

Indicates if the canvas can fire middle click events
Type:
  • Boolean
Since:
  • 1.7.8
Source:

fireRightClick :Boolean

Indicates if the canvas can fire right click events
Type:
  • Boolean
Since:
  • 1.6.5
Source:

freeDrawingCursor :String

Cursor value used during free drawing
Type:
  • String
Default Value:
  • crosshair
Source:

FX_DURATION :Number

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

hoverCursor :String

Default cursor value used when hovering over an object on canvas
Type:
  • String
Default Value:
  • move
Source:

imageSmoothingEnabled :Boolean

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

includeDefaultValues :Boolean

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

interactive :Boolean

Indicates that canvas is interactive. This property should not be changed.
Type:
  • Boolean
Default Value:
  • true
Source:

isDrawingMode :Boolean

When true, mouse events on canvas (mousedown/mousemove/mouseup) result in free drawing. After mousedown, mousemove creates a shape, and then mouseup finalizes it and adds an instance of `fabric.Path` onto canvas.
Type:
  • Boolean
Source:
Tutorials:

moveCursor :String

Default cursor value used when moving an object on canvas
Type:
  • String
Default Value:
  • move
Source:

overlayColor :String|fabric.Pattern

Overlay color of canvas instance. Should be set via fabric.StaticCanvas#setOverlayColor
Type:
Since:
  • 1.3.9
Inherited From:
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:
Inherited From:
Source:

overlayVpt :Boolean

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

perPixelTargetFind :Boolean

When true, object detection happens on per-pixel basis rather than on per-bounding-box
Type:
  • Boolean
Source:

preserveObjectStacking :Boolean

Indicates whether objects should remain in current stack position when selected. When false objects are brought to top and rendered as part of the selection group
Type:
  • Boolean
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
Inherited From:
Default Value:
  • true
Source:

rotationCursor :String

Cursor value used for rotation point
Type:
  • String
Default Value:
  • crosshair
Source:

selection :Boolean

Indicates whether group selection should be enabled
Type:
  • Boolean
Default Value:
  • true
Source:

selectionBorderColor :String

Color of the border of selection (usually slightly darker than color of selection itself)
Type:
  • String
Default Value:
  • rgba(255, 255, 255, 0.3)
Source:

selectionColor :String

Color of selection
Type:
  • String
Default Value:
  • rgba(100, 100, 255, 0.3)
Source:

selectionDashArray :Array

Default dash array pattern If not empty the selection border is dashed
Type:
Source:

selectionKey :String

Indicates which key enable multiple click selection values: 'altKey', 'shiftKey', 'ctrlKey'. If `null` or 'none' or any other string that is not a modifier key feature is disabled feature disabled.
Type:
  • String
Since:
  • 1.6.2
Default Value:
  • shiftKey
Source:

selectionLineWidth :Number

Width of a line used in object/group selection
Type:
  • Number
Default Value:
  • 1
Source:

skipOffscreen

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.
Inherited From:
Source:

skipTargetFind :Boolean

When true, target detection is skipped when hovering over canvas. This can be used to improve performance.
Type:
  • Boolean
Source:

snapAngle :Number

Indicates the angle that an object will lock to while rotating.
Type:
  • Number
Since:
  • 1.6.7
Source:

snapThreshold :null|Number

Indicates the distance from the snapAngle the rotation will lock to the snapAngle. When `null`, the snapThreshold will default to the snapAngle.
Type:
  • null | Number
Since:
  • 1.6.7
Source:

stateful :Boolean

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

stopContextMenu :Boolean

Indicates if the right click on canvas can output the context menu or not
Type:
  • Boolean
Since:
  • 1.6.5
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
Inherited From:
Default Value:
  • true
Source:

targetFindTolerance :Number

Number of pixels around target pixel to tolerate (consider active) during object detection
Type:
  • Number
Source:

uniScaleKey :String

Indicates which key enable unproportional scaling values: 'altKey', 'shiftKey', 'ctrlKey'. If `null` or 'none' or any other string that is not a modifier key feature is disabled feature disabled.
Type:
  • String
Since:
  • 1.6.2
Default Value:
  • shiftKey
Source:

uniScaleTransform :Boolean

When true, objects can be transformed by one side (unproportionally)
Type:
  • Boolean
Source:

viewportTransform :Array

The transformation (in the format of Canvas transform) which focuses the viewport
Type:
Inherited From:
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.
Inherited From:
Source:

Methods

__onMouseWheel(e)

Method that defines actions when an Event Mouse Wheel
Parameters:
Name Type Description
e Event Event object fired on mouseup
Source:

_chooseObjectsToRender() → {Array}

Divides objects in two groups, one to render immediately and one to render as activeGroup.
Source:
Returns:
objects to render immediately and pushes the other in the activeGroup.
Type
Array

_setCursorFromEvent(e, target)

Sets the cursor depending on where the canvas is being hovered. Note: very buggy in Opera
Parameters:
Name Type Description
e Event Event object
target Object Object that the mouse is hovering, if so.
Source:

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
Inherited From:
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
Inherited From:
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
Inherited From:
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
Inherited From:
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
Inherited From:
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 )
Inherited From:
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
Inherited From:
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
Inherited From:
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
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Canvas

clear() → {fabric.Canvas}

Clears all contexts (background, main, top) of an instance
Overrides:
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
Inherited From:
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
Inherited From:
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
Inherited From:
Source:

complexity() → {Number}

Returns number representation of a collection complexity
Inherited From:
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
Inherited From:
Mixes In:
Source:
Returns:
`true` if collection contains an object
Type
Boolean

containsPoint(e, target, pointopt) → {Boolean}

Checks if point is contained within an area of given object
Parameters:
Name Type Attributes Description
e Event Event object
target fabric.Object Object to test against
point Object <optional>
x,y object of point coordinates we want to check.
Source:
Returns:
true if point is contained within an area of given 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
Inherited From:
Source:
Returns:
Type
String

createSVGRefElementsMarkup() → {String}

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

deactivateAll() → {fabric.Canvas}

Deactivates all objects on canvas, removing any active group or object
Source:
Returns:
thisArg
Type
fabric.Canvas

deactivateAllWithDispatch() → {fabric.Canvas}

Deactivates all objects and dispatches appropriate events If the function is called by fabric as a consequence of a mouse event, the event is passed as a parmater and sent to the fire function for the custom events. When used as a method the e param does not have any application.
Source:
Returns:
thisArg
Type
fabric.Canvas

discardActiveGroup() → {fabric.Canvas}

Discards currently active group and fire events If the function is called by fabric as a consequence of a mouse event, the event is passed as a parmater and sent to the fire function for the custom events. When used as a method the e param does not have any application.
Source:
Returns:
thisArg
Type
fabric.Canvas

discardActiveObject(e) → {fabric.Canvas}

Discards currently active object and fire events. If the function is called by fabric as a consequence of a mouse event, the event is passed as a parmater and sent to the fire function for the custom events. When used as a method the e param does not have any application.
Parameters:
Name Type Description
e event
Source:
Returns:
thisArg
Type
fabric.Canvas

dispose() → {fabric.Canvas}

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

drawControls(ctx)

Draws objects' controls (borders/controls)
Parameters:
Name Type Description
ctx CanvasRenderingContext2D Context to render controls on
Source:

findTarget(e, skipGroup)

Method that determines what object we are clicking on the skipGroup parameter is for internal use, is needed for shift+click action
Parameters:
Name Type Description
e Event mouse event
skipGroup Boolean when true, activeGroup is skipped and only objects are traversed through
Source:

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)
Inherited From:
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
Inherited From:
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
Inherited From:
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
Inherited From:
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
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Canvas

getActiveGroup() → {fabric.Group}

Returns currently active group
Source:
Returns:
Current group
Type
fabric.Group

getActiveObject() → {fabric.Object}

Returns currently active object
Source:
Returns:
active object
Type
fabric.Object

getCenter() → {Object}

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

getContext() → {CanvasRenderingContext2D}

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

getElement() → {HTMLCanvasElement}

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

getHeight() → {Number}

Returns canvas height (in px)
Inherited From:
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
Inherited From:
Mixes In:
Source:
Returns:
Type
Array

getPointer(e, ignoreZoom) → {Object}

Returns pointer coordinates relative to canvas. Can return coordinates with or without viewportTransform. ignoreZoom false gives back coordinates that represent the point clicked on canvas element. ignoreZoom true gives back coordinates after being processed by the viewportTransform ( sort of coordinates of what is displayed on the canvas where you are clicking. To interact with your shapes top and left you want to use ignoreZoom true most of the time, while ignoreZoom false will give you coordinates compatible with the object.oCoords system. of the time.
Parameters:
Name Type Description
e Event
ignoreZoom Boolean
Source:
Returns:
object with "x" and "y" number values
Type
Object

getSelectionContext() → {CanvasRenderingContext2D}

Returns context of canvas where object selection is drawn
Source:
Returns:
Type
CanvasRenderingContext2D

getSelectionElement() → {HTMLCanvasElement}

Returns <canvas> element on which object selection is drawn
Source:
Returns:
Type
HTMLCanvasElement

getVpCenter() → {fabric.Point}

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

getWidth() → {Number}

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

getZoom() → {Number}

Returns canvas zoom level
Inherited From:
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
Overrides:
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
Inherited From:
Mixes In:
Source:
Returns:
thisArg
Type
Self

isEmpty() → {Boolean}

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

isTargetTransparent(target, x, y) → {Boolean}

Returns true if object is transparent at a certain location
Parameters:
Name Type Description
target fabric.Object Object to check
x Number Left coordinate
y Number Top coordinate
Source:
Returns:
Type
Boolean

item(index) → {Self}

Returns object at specified index
Parameters:
Name Type Description
index Number
Inherited From:
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.
Inherited From:
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.
Inherited From:
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
Inherited From:
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
Inherited From:
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
Inherited From:
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
Inherited From:
Source:

relativePan(point) → {fabric.Canvas}

Pans viewpoint relatively
Parameters:
Name Type Description
point fabric.Point (position vector) to move by
Inherited From:
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
Inherited From:
Mixes In:
Source:
Returns:
thisArg
Type
Self

removeListeners()

Removes all event listeners
Source:

renderAll() → {fabric.Canvas}

Renders both the top canvas and the secondary container canvas.
Overrides:
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
Inherited From:
Source:
Returns:
instance
Type
fabric.Canvas

renderTop() → {fabric.Canvas}

Method to render only the top canvas. Also used to render the group selection box.
Source:
Returns:
thisArg
Type
fabric.Canvas

restorePointerVpt(pointer) → {Object}

Returns pointer coordinates without the effect of the viewport
Parameters:
Name Type Description
pointer Object with "x" and "y" number values
Source:
Returns:
object with "x" and "y" number values
Type
Object

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
Inherited From:
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
Inherited From:
Source:
Returns:
thisArg
Type
fabric.Canvas

setActiveGroup(group, e) → {fabric.Canvas}

Sets active group to a specified one. If the function is called by fabric as a consequence of a mouse event, the event is passed as a parmater and sent to the fire function for the custom events. When used as a method the e param does not have any application.
Parameters:
Name Type Description
group fabric.Group Group to set as a current one
e Event Event object
Source:
Returns:
thisArg
Type
fabric.Canvas

setActiveObject(object, eopt) → {fabric.Canvas}

Sets given object as the only active object on canvas
Parameters:
Name Type Attributes Description
object fabric.Object Object to set as an active one
e Event <optional>
Event (passed along when firing "object:selected")
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
Inherited From:
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.
Inherited From:
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'
});

setCursor(value)

Set the cursor type of the canvas element
Parameters:
Name Type Description
value String Cursor type of the canvas element.
Source:
See:

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
Inherited From:
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
Inherited From:
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
Inherited From:
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.
Inherited From:
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
Inherited From:
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
Inherited From:
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
Inherited From:
Source:
Returns:
instance
Type
fabric.Canvas

size() → {Number}

Returns a size of a collection (i.e: length of an array containing its objects)
Inherited From:
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
Inherited From:
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
Inherited From:
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
Inherited From:
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
Inherited From:
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)
Inherited From:
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
Inherited From:
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
Inherited From:
Source:
Returns:
object representation of an instance
Type
Object

toString() → {String}

Returns a string representation of an instance
Inherited From:
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.
Inherited From:
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
Inherited From:
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
Inherited From:
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
Inherited From:
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
Inherited From:
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
Inherited From:
Source:
Returns:
instance
Type
fabric.Canvas