Optionalel: string | HTMLCanvasElementOptionaloptions: TOptions<StaticCanvasOptions>Protected Optional__cleanupBackground color of canvas instance.
OptionalbackgroundBackground 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
if set to false background image is not affected by viewport transform
Optionalclipa 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
OptionaldestroyedIf true the Canvas is in the process or has been disposed/destroyed. No more rendering operation will be executed on this canvas.
OptionaldisposedStarted the process of disposing but not done yet. WIll likely complete the render cycle already scheduled but stopping adding more.
When true, canvas is scaled by devicePixelRatio for better rendering on retina screens
ProtectedhasHeight in virtual/logical pixels of the canvas. The canvas can be taller than width if retina scaling is active
Indicates whether this canvas will use image smoothing, this is on by default in browsers
Indicates whether toObject/toDatalessObject should include default values if set to false, takes precedence over the object value.
ProtectednextOverlay color of canvas instance.
OptionaloverlayOverlay 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
if set to false overlay image is not affected by viewport transform
Indicates whether StaticCanvas#add, StaticCanvas#insertAt and StaticCanvas#remove, StaticCanvas#moveTo, 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 queued 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.
ProtectedskipWhen true control drawing is skipped. This boolean is used to avoid toDataURL to export controls. Usage of this boolean to build up other flows and features is not supported
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.
When true, getSvgTransform() will apply the StaticCanvas.viewportTransform to the SVG transformation. When true, a zoomed canvas will then produce zoomed SVG output.
The transformation (a Canvas 2D API transform matrix) which focuses the viewport
The viewport bounding box in scene plane coordinates, see calcViewportBoundaries
Width in virtual/logical pixels of the canvas. The canvas can be larger than width if retina scaling is active
StaticownA reference to the canvas actual HTMLCanvasElement. Can be use to read the raw pixels, but never write or manipulate
Protected_setProtected_setClones canvas instance
Optionalproperties: string[]Array of properties to include in the cloned canvas and children
Optional__namedParameters: { OptionalincludeFires event with an optional options object
ProtectedinitPopulates canvas with data from the specified JSON. JSON format must conform to the one of fabric.Canvas#toJSON
IMPORTANT: It is recommended to abort loading tasks before calling this method to prevent race conditions and unnecessary networking
JSON string or object
Optionalreviver: (<T>(serializedObj: Record<string, any>, instance: T) => void)Method for further parsing of JSON elements, called after each fabric object created.
Optionaloptions: Abortableoptions
instance
Unsubscribe all event listeners for eventname. Do not use this pattern. You could kill internal fabricJS events. We know we should have protected events for internal flows, but we don't have yet
event name (eg. 'after:render')
unsubscribe an event listener
event name (eg. 'after:render')
event listener to unsubscribe
unsubscribe event listeners
handlers key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler})
unsubscribe all event listeners
Observes specified event
disposer
Observes specified event once
disposer
Sets property to a given value. When changing position/dimension -related properties (left, top, scale, angle, etc.) set does not update position of object's borders/controls. If you need to update those, call setCoords().
Property name or object (if object, iterate over the object properties)
Optionalvalue: anyProperty value (if function, the value is passed into it and its return value is used as a new one)
Sets dimensions (width, height) of this canvas instance. when options.cssOnly flag active you should also supply the unit of measure (px/%/em)
Object with width/height properties
Optionaloptions: { Options object
OptionalbackstoreSet the given dimensions only as canvas backstore dimensions
OptionalcssSet the given dimensions only as css dimensions
Optionaloptions: { OptionalbackstoreOptionalcssOptionaloptions: nevers Sets height of this canvas instance
Value to set height to
Optionaloptions: { Options object
OptionalbackstoreSet the given dimensions only as canvas backstore dimensions
OptionalcssSet the given dimensions only as css dimensions
Optionaloptions: { OptionalbackstoreOptionalcssSets width of this canvas instance
Value to set width to
Optionaloptions: { Options object
OptionalbackstoreSet the given dimensions only as canvas backstore dimensions
OptionalcssSet the given dimensions only as css dimensions
Optionaloptions: { OptionalbackstoreOptionalcssCreate 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
Optionalmultiplier: numbera zoom factor.
Optionaloptions: TToCanvasElementOptionsCropping informations
Exports canvas element to a dataurl image. Note that when multiplier is used, cropping is scaled appropriately
Optionaloptions: TDataUrlOptionsOptions object
Returns a data: URL containing a representation of the object in the format specified by options.format
var dataURL = canvas.toDataURL({
format: 'jpeg',
quality: 0.8
});
var dataURL = canvas.toDataURL({
format: 'png',
left: 100,
top: 100,
width: 200,
height: 200
});
Returns SVG representation of canvas
Optionaloptions: TSVGExportOptionsOptions object for SVG output
Optionalreviver: TSVGReviverMethod for further parsing of svg elements, called after each fabric object converted into svg representation.
SVG string
var svg = canvas.toSVG({suppressPreamble: true});
var svg = canvas.toSVG({
viewBox: {
x: 100,
y: 100,
width: 200,
height: 300
}
});
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.
to zoom with respect to
to set zoom to, less than 1 zooms out
Staticget
Static canvas class
See
demo
Fires
before:render
Fires
after:render
Fires
canvas:cleared
Fires
object:added
Fires
object:removed