Classes
Namespaces
Global
Class: Canvas
object:modified at the end of a transform or any change when statefull is true
object:rotating while an object is being rotated from the control
object:scaling while an object is being scaled by controls
object:moving while an object is being dragged
object:skewing while an object is being skewed from the controls
before:transform before a transform is is started
before:selection:cleared
selection:cleared
selection:updated
selection:created
path:created after a drawing operation ends and the path is added
mouse:down
mouse:move
mouse:up
mouse:down:before on mouse down,event: before the inner fabric logic runs
mouse:move:before on mouse move,event: before the inner fabric logic runs
mouse:up:before on mouse up,event: before the inner fabric logic runs
mouse:over
mouse:out
mouse:dblclick whenever a native dbl click event fires on the canvas.
event:dragover
event:dragenter
event:dragleave
drop:before before drop event. same native event.event: This is added to handle edge cases
event:drop
after:render at the end of the render process,event: receives the context in the callback
before:render at start the render process,event: receives the context in the callback
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
Indicates which key enable alternative selection
in case of target overlapping with active object
values: 'altKey', 'shiftKey', 'ctrlKey'.
For a series of reason that come from the general expectations on how
things should work, this feature works only for preserveObjectStacking true.
If `null` or 'none' or any other string that is not a modifier key
feature is disabled.
Type:
String
Background image of canvas instance.
since 2.4.0 image caching is active, please when putting an image as background, add to the
canvas property a reference to the canvas it is on. Otherwise the image cannot detect the zoom
vale. As an alternative you can disable image objectCaching
Type:
fabric.Image
Indicates which key enable centered Transform
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
a fabricObject that, without stroke define a clipping area with their shape. filled in black
the clipPath object gets used when the canvas has rendered, and the context is placed in the
top left corner of the canvas.
clipPath will clip away controls, if you do not want this to happen use controlsAboveOverlay = true
Type:
fabric.Object
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
Overlay image of canvas instance.
since 2.4.0 image caching is active, please when putting an image as overlay, add to the
canvas property a reference to the canvas it is on. Otherwise the image cannot detect the zoom
vale. As an alternative you can disable image objectCaching
Type:
fabric.Image
Indicates whether
fabric.Collection.add
,
fabric.Collection.insertAt
and
fabric.Collection.remove
,
fabric.StaticCanvas.moveTo, fabric.StaticCanvas.clear and many more, should also re-render canvas.
Disabling this option will not give a performance boost when adding/removing a lot of objects to/from canvas at once
since the renders are quequed and executed one per frame.
Disabling is suggested anyway and managing the renders of the app manually is not a big effort ( canvas.requestRenderAll() )
Left default to true to do not break documentation and old app, fiddles.
Type:
Boolean
Indicates which key or keys enable multiple click selection
Pass value as a string or array of strings
values: 'altKey', 'shiftKey', 'ctrlKey'.
If `null` or empty or containing any other string that is not a modifier key
feature is disabled.
Type:
String
Array
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.
Type:
Boolean
When true, target detection is skipped. Target detection will return always undefined.
click selection won't work anymore, events will fire with no targets.
if something is selected before setting it to true, it will be deselected at the first click.
area selection will still work. check the `selection` property too.
if you deactivate both, you should look into staticCanvas.
Type:
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
Indicates which key switches uniform scaling.
values: 'altKey', 'shiftKey', 'ctrlKey'.
If `null` or 'none' or any other string that is not a modifier key
feature is disabled.
totally wrong named. this sounds like `uniform scaling`
if Canvas.uniformScaling is true, pressing this will set it to false
and viceversa.
Type:
String
canvas.viewportTransform = [1, 0, 0, 1, 0, 0];
Scale by 70% and translate toward bottom-right by 50, without skewing
canvas.viewportTransform = [0.7, 0, 0, 0.7, 50, 50];
Describe canvas element extension over design
properties are tl,tr,bl,br.
if canvas is not zoomed/panned those points are the four corner of canvas
if canvas is viewportTransformed you those points indicate the extension
of canvas element in plain untrasformed coordinates
The coordinates get updated with @method calcViewportBoundaries.
`drop:before` is a an event that allow you to schedule logic
before the `drop` event. Prefer `drop` event always, but if you need
to run some drop-disabling logic on an event, since there is no way
to handle event handlers ordering, use `drop:before`
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
Use of this function is highly discouraged for groups.
you can add a bunch of objects with the add method but then you NEED
to run a addWithUpdate call for the Group class or position/bbox will be wrong.
Moves an object or a selection up in stack of drawn objects
An optional parameter, intersecting allows to move the object in front
of the first intersecting object. Where intersection is calculated with
bounding box. If no intersection is found, there will not be change in the
stack.
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 )
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)
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
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 parameter and
sent to the fire function for the custom events. When used as a method the
e param does not have any application.
Method that determines what object we are clicking on
the skipGroup parameter is for internal use, is needed for shift+click action
11/09/2018 TODO: would be cool if findTarget could discern between being a full target
or the outside part of the corner.
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
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.
ignoreZoom true = HTMLElement coordinates relative to top,left
ignoreZoom false, default = fabric space coordinates, the same used for shape position
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.
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
Use of this function is highly discouraged for groups.
you can add a bunch of objects with the insertAt method but then you NEED
to run a addWithUpdate call for the Group class or position/bbox will be wrong.
loadFromJSON with reviver
canvas.loadFromJSON(json, canvas.renderAll.bind(canvas), function(o, object) {
// `o` = json object
// `object` = fabric.Object instance
// ... do some stuff ...
Append a renderAll request to next animation frame.
unless one is already in progress, in that case nothing is done
a boolean flag will avoid appending more.
Moves an object or a selection down in stack of drawn objects
An optional parameter, intersecting allows to move the object in behind
the first intersecting object. Where intersection is calculated with
bounding box. If no intersection is found, there will not be change in the
stack.
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));
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, isError) {
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'
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));
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, isError) {
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'
Create a new HTMLCanvas element painted with the current canvas content.
No need to resize the actual one or repaint it.
Will transfer object ownership to a new canvas, paint it, and set everything back.
This is an intermediary step used to get to a dataUrl but also it is useful to
create quick image copies of a canvas without passing for the dataUrl string
Returns Object representation of canvas
this alias is provided because if you call JSON.stringify on an instance,
the toJSON object will be invoked if it exists.
Having a toJSON method means you can do JSON.stringify(myCanvas)
JSON with additional properties included
var json = canvas.toJSON(['lockMovementX', 'lockMovementY', 'lockRotation', 'lockScalingX', 'lockScalingY']);
JSON without default values
canvas.includeDefaultValues = false;
var json = canvas.toJSON();
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; ', '');
Sets zoom level of this canvas instance, the zoom centered around point
meaning that following zoom to point with the same point will have the visual
effect of the zoom originating from that point. The point won't move.
It has nothing to do with canvas center or visual center of the viewport.
