Static canvas class
- Mixes In:
- Source:
- See:
-
Fires:
- before:render
- after:render
- canvas:cleared
- object:added
- object:removed
Members
Type:
- Default Value:
- {"objects": [], "background": "white"}
- Source:
Indicates whether the browser can be scrolled when using a touchscreen and dragging on the canvas
Type:
- Source:
Type:
- Source:
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:
- Source:
if set to false background image is not affected by viewport transform
Type:
- Since:
- Default Value:
- Source:
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:
- Source:
Indicates whether object controls (borders/controls) are rendered above overlay image
Type:
- Source:
When true, canvas is scaled by devicePixelRatio for better rendering on retina screens
Type:
- Default Value:
- Source:
Animation duration (in ms) for fx* methods
Type:
- Default Value:
- Source:
Indicates whether this canvas will use image smoothing, this is on by default in browsers
Type:
- Default Value:
- Source:
Indicates whether toObject/toDatalessObject should include default values
if set to false, takes precedence over the object value.
Type:
- Default Value:
- Source:
Type:
- Since:
- Source:
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:
- Source:
if set to false overlya image is not affected by viewport transform
Type:
- Since:
- Default Value:
- Source:
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:
- Default Value:
- Source:
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:
- Default Value:
- Source:
Indicates whether objects' state should be saved
Type:
- Source:
When true, getSvgTransform() will apply the StaticCanvas.viewportTransform to the SVG transformation. When true,
a zoomed canvas will then produce zoomed SVG output.
Type:
- Default Value:
- Source:
The transformation (a Canvas 2D API transform matrix) which focuses the viewport
Type:
- Source:
Examples
Default transform
canvas.viewportTransform = [1, 0, 0, 1, 0, 0];
Scale by 70% and translate toward bottom-right by 50, without skewing
canvas.viewportTransform = [0.7, 0, 0, 0.7, 50, 50];
Describe canvas element extension over design
properties are tl,tr,bl,br.
if canvas is not zoomed/panned those points are the four corner of canvas
if canvas is viewportTransformed you those points indicate the extension
of canvas element in plain untrasformed coordinates
The coordinates get updated with @method calcViewportBoundaries.
- Source:
Methods
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 "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
Pan viewport so as to place point at top left corner of canvas
Parameters:
- Source:
Returns:
instance
-
Type
-
fabric.Canvas
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.
Parameters:
Name |
Type |
Attributes |
Description |
object |
fabric.Object
|
<repeatable>
|
Zero or more fabric instances |
- Mixes In:
- Source:
Returns:
thisArg
-
Type
-
Self
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.
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
Moves an object or the objects of a multiple selection
to the top of the stack of drawn objects
Parameters:
- Source:
Returns:
thisArg
-
Type
-
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
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
Centers object vertically and horizontally in the canvas
Parameters:
Name |
Type |
Description |
object |
fabric.Object
|
Object to center vertically and horizontally |
- Source:
Returns:
thisArg
-
Type
-
fabric.Canvas
Centers object horizontally in the canvas
Parameters:
Name |
Type |
Description |
object |
fabric.Object
|
Object to center horizontally |
- Source:
Returns:
thisArg
-
Type
-
fabric.Canvas
Centers object vertically in the canvas
Parameters:
Name |
Type |
Description |
object |
fabric.Object
|
Object to center vertically |
- Source:
Returns:
thisArg
-
Type
-
fabric.Canvas
Clears all contexts (background, main, top) of an instance
- Source:
Returns:
thisArg
-
Type
-
fabric.Canvas
Clears specified context of canvas element
Parameters:
Name |
Type |
Description |
ctx |
CanvasRenderingContext2D
|
Context to clear |
- Source:
Returns:
thisArg
-
Type
-
fabric.Canvas
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:
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:
Returns number representation of a collection complexity
- Mixes In:
- Source:
Returns:
complexity
-
Type
-
Number
Returns true if collection contains an object
Parameters:
Name |
Type |
Attributes |
Default |
Description |
object |
Object
|
|
|
Object to check against |
deep |
Boolean
|
<optional>
|
false
|
`true` to check all descendants, `false` to check only `_objects` |
- Mixes In:
- Source:
Returns:
`true` if collection contains an object
-
Type
-
Boolean
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
Creates markup containing SVG referenced elements like patterns, gradients etc.
- Source:
Returns:
-
Type
-
String
Clears a canvas element and dispose objects
- Source:
Returns:
thisArg
-
Type
-
fabric.Canvas
Paint the cached clipPath on the lowerCanvasEl
Parameters:
Name |
Type |
Description |
ctx |
CanvasRenderingContext2D
|
Context to render on |
- Source:
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:
- Source:
Returns:
thisArg
-
Type
-
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
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:
context
-
Type
-
fabric.AnimationContext
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:
context
-
Type
-
fabric.AnimationContext
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:
context
-
Type
-
fabric.AnimationContext
Same as fabric.Canvas.prototype.straightenObject, but animated
Parameters:
- Source:
Returns:
thisArg
-
Type
-
fabric.Canvas
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
Returns context of canvas where objects are drawn
- Source:
Returns:
-
Type
-
CanvasRenderingContext2D
Returns <canvas> element corresponding to this instance
- Source:
Returns:
-
Type
-
HTMLCanvasElement
Returns canvas height (in px)
- Source:
Returns:
-
Type
-
Number
Returns an array of children objects of this instance
Type parameter introduced in 1.3.10
since 2.3.5 this method return always a COPY of the array;
Parameters:
Name |
Type |
Attributes |
Description |
type |
String
|
<optional>
|
When specified, only objects of this type are returned |
- Mixes In:
- Source:
Returns:
-
Type
-
Array
Calculate the point in canvas that correspond to the center of actual viewport.
- Source:
Returns:
vpCenter, viewport center
-
Type
-
fabric.Point
Returns canvas width (in px)
- Source:
Returns:
-
Type
-
Number
Returns canvas zoom level
- Source:
Returns:
-
Type
-
Number
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
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.
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
Returns true if collection contains no objects
- Mixes In:
- Source:
Returns:
true if collection is empty
-
Type
-
Boolean
Returns object at specified index
Parameters:
Name |
Type |
Description |
index |
Number
|
|
- Mixes In:
- Source:
Returns:
thisArg
-
Type
-
Self
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 ...
});
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
Pans viewpoint relatively
Parameters:
Name |
Type |
Description |
point |
fabric.Point
|
(position vector) to move by |
- Source:
Returns:
instance
-
Type
-
fabric.Canvas
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
Renders the canvas
- Source:
Returns:
instance
-
Type
-
fabric.Canvas
Renders background, objects, overlay and controls.
Parameters:
Name |
Type |
Description |
ctx |
CanvasRenderingContext2D
|
|
objects |
Array
|
to render |
- Source:
Returns:
instance
-
Type
-
fabric.Canvas
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.
- Source:
Returns:
instance
-
Type
-
fabric.Canvas
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.
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
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
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://fabric5.fabricjs.com/assets/escheresque_ste.png'
}, canvas.renderAll.bind(canvas));
fabric.Pattern used as backgroundColor with repeat and offset
canvas.setBackgroundColor({
source: 'http://fabric5.fabricjs.com/assets/escheresque_ste.png',
repeat: 'repeat',
offsetX: 200,
offsetY: 100
}, canvas.renderAll.bind(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://fabric5.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://fabric5.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://fabric5.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://fabric5.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://fabric5.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'
});
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
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
Parameters:
Name |
Type |
Description |
overlayColor |
String
|
fabric.Pattern
|
Color or pattern to set foreground color to |
callback |
function
|
Callback to invoke when foreground 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://fabric5.fabricjs.com/assets/escheresque_ste.png'
}, canvas.renderAll.bind(canvas));
fabric.Pattern used as overlayColor with repeat and offset
canvas.setOverlayColor({
source: 'http://fabric5.fabricjs.com/assets/escheresque_ste.png',
repeat: 'repeat',
offsetX: 200,
offsetY: 100
}, canvas.renderAll.bind(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://fabric5.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://fabric5.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://fabric5.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://fabric5.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://fabric5.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'
});
Sets viewport transformation of this canvas instance
Parameters:
Name |
Type |
Description |
vpt |
Array
|
a Canvas 2D API transform matrix |
- Source:
Returns:
instance
-
Type
-
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
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
Returns a size of a collection (i.e: length of an array containing its objects)
- Mixes In:
- Source:
Returns:
Collection size
-
Type
-
Number
Straightens object, then rerenders canvas
Parameters:
- Source:
Returns:
thisArg
-
Type
-
fabric.Canvas
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
Parameters:
Name |
Type |
Attributes |
Description |
multiplier |
Number
|
<optional>
|
a zoom factor. |
cropping |
Object
|
<optional>
|
Cropping informations
Properties
Name |
Type |
Attributes |
Description |
left |
Number
|
<optional>
|
Cropping left offset. |
top |
Number
|
<optional>
|
Cropping top offset. |
width |
Number
|
<optional>
|
Cropping width. |
height |
Number
|
<optional>
|
Cropping height. |
|
- Source:
Returns 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
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
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, to have consistent |
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 |
enableRetinaScaling |
Boolean
|
<optional>
|
|
Enable retina scaling for clone image. Introduce in 2.0.0 |
|
- 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
});
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)
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 compatible object
-
Type
-
Object
Examples
JSON without additional properties
var json = canvas.toJSON();
JSON with additional properties included
var json = canvas.toJSON(['lockMovementX', 'lockMovementY', 'lockRotation', 'lockScalingX', 'lockScalingY']);
JSON without default values
canvas.includeDefaultValues = false;
var json = canvas.toJSON();
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
Returns a string representation of an instance
- Source:
Returns:
string representation of an instance
-
Type
-
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-coordinate 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; ', '');
});
Centers object vertically and horizontally in the viewport
Parameters:
Name |
Type |
Description |
object |
fabric.Object
|
Object to center vertically and horizontally |
- Source:
Returns:
thisArg
-
Type
-
fabric.Canvas
Centers object horizontally in the viewport, object.top is unchanged
Parameters:
Name |
Type |
Description |
object |
fabric.Object
|
Object to center vertically and horizontally |
- Source:
Returns:
thisArg
-
Type
-
fabric.Canvas
Centers object Vertically in the viewport, object.top is unchanged
Parameters:
Name |
Type |
Description |
object |
fabric.Object
|
Object to center vertically and horizontally |
- Source:
Returns:
thisArg
-
Type
-
fabric.Canvas
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.
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