FabricJS

Version 5.5 (2025/04/12)

Wrapper for Fabric.js Canvas Library.

http://fabricjs.com

Fabric provides interactive object model on top of canvas element. Fabric also has SVG-to-canvas (and canvas-to-SVG) parser.

Sample App:
https://visualneo.com/tutorials/fabric

Description

The FabricJS plugin for VisualNEO Web integrates the Fabric.js JavaScript library, bringing advanced HTML5 canvas manipulation capabilities into VisualNEO Web apps. This plugin is particularly useful for creating interactive graphics, drawings, and animations. Here’s an overview of what FabricJS can do within VisualNEO Web:

Drawing and Object Manipulation:

FabricJS supports freehand drawing, object creation, and manipulation on a canvas. With commands like fabDrawingMode, users can toggle freehand drawing, allowing app users to sketch directly within the app.
The plugin also allows creating various shapes (e.g., rectangles, circles, and lines) with properties like position, color, and size, using commands like fabNewCircle or fabNewLine, providing flexibility in designing custom graphic elements.

Object Transformation and Control:

FabricJS provides full control over object transformations, such as rotation, scaling, and flipping. For instance, commands like fabScale and fabFlipX allow resizing or flipping objects, while fabSetOpacity and fabSetFill enable changes to an object’s transparency or color.
Objects on the canvas can be grouped, ungrouped, and layered using fabGroup, fabUngroup, fabSendToBack, and fabBringToFront, making it easy to organize elements visually.

Event Handling and Animation:

Developers can add animations and event handling with commands like fabAnimate and fabAddEvent. For example, objects can be animated to move across the canvas or change color gradually, enhancing interactive elements in applications.
Common keyboard and mouse events are supported, allowing interaction with elements on the canvas based on user actions, making it suitable for creating dynamic graphic interfaces.

Canvas Export and Save Options:

FabricJS provides multiple export options, allowing developers to save the canvas content as PNG, JPG, SVG, or PDF formats through commands like fabSaveAsPNG and fabSaveAsPDF. This feature is particularly useful for applications needing to save or share graphical content created within the app.
The plugin also supports saving canvas data in JSON format, enabling users to reload and continue editing their work at a later time.

Advanced Text and Image Integration:

FabricJS supports text integration, allowing custom text addition to the canvas with specific fonts, colors, and alignment. Commands like fabNewText and fabSetTextAlign give users control over text properties.
Images can also be loaded onto the canvas from local files or URLs, which can be manipulated, resized, or layered, allowing seamless integration of multimedia content within graphic-rich applications.

The FabricJS plugin in VisualNEO Web provides extensive canvas drawing, animation, and manipulation features, ideal for creating interactive, graphic-based applications such as drawing tools, photo editors, or custom animation platforms.

fabAddEvent

Purpose:

Adds an event to an Object.

Category:

FabricJS

Syntax:

fabAddEvent "containerId" "name" evento funcion

containerId

Select an initializazed Container Object

name

Object name

evento

Event Name

funcion

Function name to call when event fires

fabAddKeyEvents

Purpose:

Adds common preprogrammed events:

Ctrl-C, Ctrl-V, Ctrl-X and Arrow keys

Category:

FabricJS

Syntax:

fabAddKeyEvents "containerId"

containerId

Select an initializazed Container Object

fabAnimate

Purpose:

Animates object's properties

Category:

FabricJS

Syntax:

fabAnimate "containerId" "name" [animation] duration "easing

containerId

Select an initializazed Container Object

name

Object name

animation

Animation description (ie:{left:100,top:100,angle:'+=180'} or CSS object)

duration

Duration in milliseconds

"easing

Easing"

fabBringToFront

Purpose:

Bring to front to an object selected on canvas or by its name

Category:

FabricJS

Syntax:

fabBringToFront "containerId" "name"

containerId

Select an initializazed Container Object

name

Object name

fabCenterObject

Purpose:

Centers in canvas an object selected on canvas or by its name

Category:

FabricJS

Syntax:

fabCenterObject "containerId" "name"

containerId

Select an initializazed Container Object

name

Object name

fabCenterObjectHorinzontal

Purpose:

Centers horizontally in canvas an object selected on canvas or by its name

Category:

FabricJS

Syntax:

fabCenterObjectHorinzontal "containerId" "name"

containerId

Select an initializazed Container Object

name

Object name

fabCenterObjectVertical

Purpose:

Centers vertically in canvas an object selected on canvas or by its name

Category:

FabricJS

Syntax:

fabCenterObjectVertical "containerId" "name"

containerId

Select an initializazed Container Object

name

Object name

fabClear

Purpose:

Clear the canvas

Category:

FabricJS

Syntax:

fabClear "containerId"

containerId

Select an initializazed Container Object

fabCloneSelectedObject

Purpose:

Clone the sleected object

Category:

FabricJS

Syntax:

fabCloneSelectedObject "containerId" "newName"

containerId

Select an initializazed Container Object

newName

Name for the new object

fabCopy

Purpose:

Copy

Category:

FabricJS

Syntax:

fabCopy "containerId"

containerId

Select an initializazed Container Object

fabDeleteLocal

Purpose:

Deletes a previously saved local image

Category:

FabricJS

Syntax:

fabDeleteLocal "name"

name

Image name (ie:mydrawing)

fabDrawingMode

Purpose:

Turns on or off the freehand drawing mode.

Category:

FabricJS

Syntax:

fabDrawingMode "containerId" valor "elcolor" elwidth

containerId

Select an initializazed Container Object

valor

Drawing mode (true or false)

elcolor

Line color (ie: #ff0000)

elwidth

Line width

fabFontFamily

Purpose:

Changes the font family in a Text Object

Category:

FabricJS

Syntax:

fabFontFamily "containerId" "name" "fuente"

containerId

Select an initializazed Container Object

name

Object name

fuente

Font Family

fabFontSize

Purpose:

Changes the Font size (in pixels)

Category:

FabricJS

Syntax:

fabFontSize "containerId" "name" size

containerId

Select an initializazed Container Object

name

Object name

size

Font Size

fabFontStyle

Purpose:

Font style. Possible values: "", "normal", "italic" or "oblique".

Category:

FabricJS

Syntax:

fabFontStyle "containerId" "name" style

containerId

Select an initializazed Container Object

name

Object name

style

Font Style

fabFontWeight

Purpose:

Font weight (ie: bold, normal)

Category:

FabricJS

Syntax:

fabFontWeight "containerId" "name" weight

containerId

Select an initializazed Container Object

name

Object name

weight

Font Weight

fabFlipX

Purpose:

When true, object is fliped horizontally

Category:

FabricJS

Syntax:

fabFlipX "containerId" "name" valor

containerId

Select an initializazed Container Object

name

Object name

valor

FlipX (true or false)

fabFlipY

Purpose:

When true, object is fliped vertically

Category:

FabricJS

Syntax:

fabFlipY "containerId" "name" valor

containerId

Select an initializazed Container Object

name

Object name

valor

FlipY (true or false)

fabGetProperty

Purpose:

Gets an object property value

Category:

FabricJS

Syntax:

fabGetProperty "containerId" "name" "property" [result]

containerId

Select an initializazed Container Object

name

Object name

property

Property name

result

Variable to store the result

fabGroup

Purpose:

Group

Category:

FabricJS

Syntax:

fabGroup "containerId"

containerId

Select an initializazed Container Object

fabHasBorders

Purpose:

When set to false, object's controlling borders are not rendered

Category:

FabricJS

Syntax:

fabHasBorders "containerId" "name" valor

containerId

Select an initializazed Container Object

name

Object name

valor

Has Borders (true or false)

fabHasControls

Purpose:

When set to 'false', object's controls are not displayed and can not be used to manipulate object

Category:

FabricJS

Syntax:

fabHasControls "containerId" "name" valor

containerId

Select an initializazed Container Object

name

Objects name

valor

Has controls (true or false)

fabInitialize

Purpose:

Initializes the library on a container object

Category:

FabricJS

Syntax:

fabInitialize "containerId"

containerId

Select a Container Object from your App

fabInitializeOrgChart

Purpose:

Initializes the library on a container Object with Org Chart Capabilities

Category:

FabricJS

Syntax:

fabInitializeOrgChart "containerId"

containerId

Select a Container Object from your App

fabInitializeStatic

Purpose:

Initializes the library on a container Object without interactivity layer

Category:

FabricJS

Syntax:

fabInitializeStatic "containerId"

containerId

Select a Container Object from your App

fabIntersectsWith

Purpose:

Detect two objects intersection

Category:

FabricJS

Syntax:

fabIntersectsWith [resultado] "name1" "name2"

resultado

Var to store the result

name1

Object 1 name

name2

Object 2 name

fabLoadImage

Purpose:

Loads an image from a URL

Category:

FabricJS

Syntax:

fabLoadImage "containerId" "name" url x y

containerId

Select an initializazed Container Object

name

Image name

url

Image URL and file name

Left position

Top position

fabLoadFromJSON

Purpose:

Load a previously saved JSON data

Category:

FabricJS

Syntax:

fabLoadFromJSON "containerId" "json"

containerId

Select an initializazed Container Object

json

JSON string

fabLoadLocal

Purpose:

Loads a previously saved local image

Category:

FabricJS

Syntax:

fabLoadLocal "containerId" "name"

containerId

Select an initializazed Container Object

name

Image name (ie:mydrawing)

fabLoadSVGFromString

Purpose:

Loads a SVG image from a URL

Category:

FabricJS

Syntax:

fabLoadSVGFromString "containerId" "name" svgstring x y

containerId

Select an initializazed Container Object

name

Image name

svgstring

SVG string

Left position

Top position

fabLockMovementX

Purpose:

When true, object horizontal movement is locked

Category:

FabricJS

Syntax:

fabLockMovementX "containerId" "name" valor

containerId

Select an initializazed Container Object

name

Objects name

valor

Lock Movement X (true or false)

fabLockMovementY

Purpose:

When true, object vertical movement is locked

Category:

FabricJS

Syntax:

fabLockMovementY "containerId" "name" valor

containerId

Select an initializazed Container Object

name

Objects name

valor

Lock Movement X (true or false)

fabLockRotation

Purpose:

When true, object rotation is locked

Category:

FabricJS

Syntax:

fabLockRotation "containerId" "name" valor

containerId

Select an initializazed Container Object

name

Objects name

valor

Lock Rotation (true or false)

fabLockScaling

Purpose:

When true, object scaling is locked

Category:

FabricJS

Syntax:

fabLockScaling "containerId" "name" valor

containerId

Select an initializazed Container Object

name

Objects name

valor

Lock Scaling (true or false)

fabNewCircle

Purpose:

Add a circle

Category:

FabricJS

Syntax:

fabNewCircle "containerId" "name" x y radius "fill"

containerId

Select an initializazed Container Object

name

Circle name

Left position

Top position

radius

Circle radius

fill

Fill color. Ex: #ff0000

fabNewLine

Purpose:

Adds a line

Category:

FabricJS

Syntax:

fabNewLine "containerId" "name" x1 y1 x2 y2 strokeWidth "strokeColor"

containerId

Select an initializazed Container Object

name

Line name

X1 Left origin position

Y1 Top origin position

X2 Left destination position

Y2 Top destination position

strokeWidth

Stroke Width

strokeColor

Stroke Color ie:#ff0000

fabNewPath

Purpose:

Adds a path

Category:

FabricJS

Syntax:

fabNewPath "containerId" "name" "path" x y "fill"

containerId

Select an initializazed Container Object

name

Rectangle Name

path

Path to draw (ie: 'M 0 0 L 200 100 L 170 200 z')

Left position

Top position

fill

Fill color Ex: #ff0000

fabNewRect

Purpose:

Adds a rectangle

Category:

FabricJS

Syntax:

fabNewRect "containerId" "name" x y width height "fill"

containerId

Select an initializazed Container Object

name

Rectangle Name

Left position

Top position

width

Rectangle width

height

Rectangle Height

fill

Fill color Ex: #ff0000

fabNewText

Purpose:

Adds a new text

Category:

FabricJS

Syntax:

fabNewText "containerId" "name" "texto" x y "fill" "fuente" tamano angulo

containerId

Select an initializazed Container Object

name

Text name

texto

Text to write

Left position

Top position

fill

Fill color. Ex: #ff0000

fuente

Font Family (ie:Georgia)

tamano

Font Size (ie:20)

angulo

Angle (ie:45)

fabNewTextEx

Purpose:

Adds a new text with background color and padding

Category:

FabricJS

Syntax:

fabNewTextEx "containerId" "name" "texto" x y "fill" "theBackground" thePadding "fuente" tamano angulo

containerId

Select an initialized Container Object

name

Text name

texto

Text to write

Left position

Top position

fill

Fill color. Ex: #ff0000

theBackground

Background color

thePadding

Padding (number)

fuente

Font Family (ie:Georgia)

tamano

Font Size (ie:20)

angulo

Angle (ie:45)

fabNewInteractiveText

Purpose:

Adds a new interactive (user editable) text

Category:

FabricJS

Syntax:

fabNewInteractiveText "containerId" "name" "texto" x y "fill" "fuente" tamano angulo

containerId

Select an initializazed Container Object

name

Text name

texto

Text to write

Left position

Top position

fill

Fill color. Ex: #ff0000

fuente

Font Family (ie:Georgia)

tamano

Font Size (ie:20)

angulo

Angle (ie:45)

fabNewInteractiveTextEx

Purpose:

Adds a new interactive (user editable) text with background color and padding

Category:

FabricJS

Syntax:

fabNewInteractiveTextEx "containerId" "name" "texto" x y "fill" "theBackground" thePadding "fuente" tamano angulo

containerId

Select an initialized Container Object

name

Text name

texto

Text to write

Left position

Top position

fill

Fill color. Ex: #ff0000

theBackground

Background color

thePadding

Padding (number)

fuente

Font Family (ie:Georgia)

tamano

Font Size (ie:20)

angulo

Angle (ie:45)

fabOriginX

Purpose:

Horizontal origin of transformation of an object (one of "left", "right", "center")

Category:

FabricJS

Syntax:

fabOriginX "containerId" "name" "valor"

containerId

Select an initializazed Container Object

name

Text name

valor

Origin X (left,center,right)

fabOriginY

Purpose:

Vertical origin of transformation of an object (one of "top", "bottom", "center")

Category:

FabricJS

Syntax:

fabOriginY "containerId" "name" "valor"

containerId

Select an initializazed Container Object

name

Text name

valor

Origin Y (top,center,bottom)

fabPanTo

Purpose:

Pans the canvas to a specific absolute point

Category:

FabricJS

Syntax:

fabPanTo "containerId" x y

containerId

Select an initializazed Container Object

X position

Y position

fabPanning

Purpose:

Turns On or Off panning with mouse right button

Category:

FabricJS

Syntax:

fabPanning "containerId" valor

containerId

Select an initializazed Container Object

valor

Pan when dragging with mouse right button

fabPaste

Purpose:

Paste

Category:

FabricJS

Syntax:

fabPaste "containerId"

containerId

Select an initializazed Container Object

fabRelativePan

Purpose:

Pans the canvas by an offset distance in both axis

Category:

FabricJS

Syntax:

fabRelativePan "containerId" offsetX offsetY

containerId

Select an initializazed Container Object

offsetX

X Offset

offsetY

Y Offset

fabRemove

Purpose:

Removes an object selected on canvas or by its name

Category:

FabricJS

Syntax:

fabRemove "containerId" "name"

containerId

Select an initializazed Container Object

name

Object name

fabSaveAsJSON

Purpose:

Save the canvas as JSON data

Category:

FabricJS

Syntax:

fabSaveAsJSON "containerId" [mivar]

containerId

Select an initializazed Container Object

mivar

Variable to store the result

fabSaveAsPNG

Purpose:

Saves the canvas as a PNG image file with background transparency

Category:

FabricJS

Syntax:

fabSaveAsPNG "containerId" "fileName"

containerId

Select an initializazed Container Object

fileName

File name (ie: image.png)

fabSaveAsJPG

Purpose:

Saves the canvas as a JPG image file in a given quality

Category:

FabricJS

Syntax:

fabSaveAsJPG "containerId" "fileName" quality

containerId

Select an initializazed Container Object

fileName

File name (ie: image.png)

quality

Image quality (0.0 to 1.0)

fabSaveAsWebP

Purpose:

Saves the canvas as a WEBP image file in a given quality

Category:

FabricJS

Syntax:

fabSaveAsWebP "containerId" "filename" quality

containerId

Select an initialized Container Object

filename

File name (ie: image.webp)

quality

Image quality (0.0 to 1.0)

fabSaveAsBase64

Purpose:

Saves the canvas as Base64 data with background transparency

Category:

FabricJS

Syntax:

fabSaveAsBase64 "containerId" [varName]

containerId

Select an initializazed Container Object

varName

Variable to store Base64 data image

fabSaveAsBase64JPG

Purpose:

Saves the canvas as Base64 data as a jpg image with a given compression rate

Category:

FabricJS

Syntax:

fabSaveAsBase64JPG "containerId" varName compression

containerId

Select an initialized Container Object

varName

Variable to store Base64 data image

compression

Image quality (Value from 0.0 to 1.0)

fabSaveAsBase64WebP

Purpose:

Saves the canvas as Base64 data as a webp image with a given compression rate and transparency

Category:

FabricJS

Syntax:

fabSaveAsBase64WebP "containerId" varName compression

containerId

Select an initialized Container Object

varName

Variable to store Base64 data image

compression

Image quality (Value from 0.0 to 1.0)

fabSaveAsSVG

Purpose:

Saves the canvas as a SVG image file into a variable

Category:

FabricJS

Syntax:

fabSaveAsSVG "containerId" [mivar]

containerId

Select an initializazed Container Object

mivar

Variable to store the result

fabSaveToClipboard

Purpose:

Saves the canvas to the clipboard (Chromium based browsers only with no transparency)

Category:

FabricJS

Syntax:

fabSaveToClipboard "containerId"

containerId

Select an initializazed Container Object

fabSaveLocal

Purpose:

Save a copy on the local system

Category:

FabricJS

Syntax:

fabSaveLocal "containerId" "name"

containerId

Select an initializazed Container Object

name

Image name (ie:mydrawing)

fabScale

Purpose:

Sets the scale to an object selected on canvas or by its name

Category:

FabricJS

Syntax:

fabScale "containerId" "name" escala

containerId

Select an initializazed Container Object

name

Object name

escala

Scale (ie:0.25)

fabSavePDF

Purpose:

Saves de image as PDF (needs jsPDF and FileSaver.js libraries to be loaded)

Category:

FabricJS

Syntax:

fabSavePDF "containerId" "name"

containerId

Select an initializazed Container Object

name

PDF file name

fabScaleToHeight

Purpose:

Scales an object to a given height, with respect to bounding box (scaling by x/y equally)

Category:

FabricJS

Syntax:

fabScaleToHeight "containerId" "name" altura

containerId

Select an initializazed Container Object

name

Object name

altura

Height

fabScaleToWidth

Purpose:

Scales an object to a given width, with respect to bounding box (scaling by x/y equally)

Category:

FabricJS

Syntax:

fabScaleToWidth "containerId" "name" anchura

containerId

Select an initializazed Container Object

name

Object name

anchura

Width

fabSelectable

Purpose:

Sets the selectable property of an object

Category:

FabricJS

Syntax:

fabSelectable "containerId" "name" valor

containerId

Select an initializazed Container Object

name

Objects name

valor

Selectable (true or false)

fabSendToBack

Purpose:

Sends to back to an object selected on canvas or by its name

Category:

FabricJS

Syntax:

fabSendToBack "containerId" "name"

containerId

Select an initializazed Container Object

name

Object name

fabSet

Purpose:

Sets many properties on one single action

Category:

FabricJS

Syntax:

fabSet "containerId" "name" [objeto]

containerId

Select an initializazed Container Object

name

Object name

objeto

Properties. ie: {top:0,left:10,angle:90} or CSS object

fabSetActiveObject

Purpose:

Sets an object active by its name

Category:

FabricJS

Syntax:

fabSetActiveObject "containerId" "name"

containerId

Select an initializazed Container Object

name

Object name (mandatory)

fabSetBgColor

Purpose:

Sets the canvas background color

Category:

FabricJS

Syntax:

fabSetBgColor "containerId" "color"

containerId

Select an initializazed Container Object

color

Color value (ie: #ff0000)

fabSetFill

Purpose:

Sets the fill color for any object selected on canvas or by its name

Category:

FabricJS

Syntax:

fabSetFill "containerId" "name" "value"

containerId

Select an initializazed Container Object

name

Name of the object to fill. Left empty for currently selected object

value

Color value (ie: #ff0000)

fabSetLeft

Purpose:

Sets object's left position

Category:

FabricJS

Syntax:

fabSetLeft "containerId" "name" valor

containerId

Select an initializazed Container Object

name

Object name

valor

Left distance

fabSetOpacity

Purpose:

Sets object's opacity

Category:

FabricJS

Syntax:

fabSetOpacity "containerId" "name" valor

containerId

Select an initializazed Container Object

name

Object name

valor

Opacity value (0-1)

fabSetProperty

Purpose:

Set any property value

Category:

FabricJS

Syntax:

fabSetProperty "containerId" "name" property "valor"

containerId

Select an initializazed Container Object

name

Object name

property

Property name

valor

Property value

fabSetNumericalProperty

Purpose:

Set a numerical property value

Category:

FabricJS

Syntax:

fabSetNumericalProperty "containerId" "name" property valor

containerId

Select an initializazed Container Object

name

Object name

property

Property name

valor

Property value

fabRotatingPointPoint

Purpose:

When set to false, object's controlling rotating point will not be visible or selectable

Category:

FabricJS

Syntax:

fabRotatingPointPoint "containerId" "name" valor

containerId

Select an initializazed Container Object

name

Objects name

valor

Has Rotating Point (true or false)

fabSetShadow

Purpose:

Sets a shadow to an object selected on canvas or by its name

Category:

FabricJS

Syntax:

fabSetShadow "containerId" "name" "theColor" despX despY theBlur

containerId

Select an initializazed Container Object

name

Object name

theColor

Shadow color (ie:#000000)

despX

X offset in pixels

despY

Y offset in pixels

theBlur

Blur (ie:10)

fabSetStrokeColor

Category:

FabricJS

Syntax:

fabSetStrokeColor "containerId" "name" "valor"

containerId

Select an initializazed Container Object

name

Object name

valor

Stroke color (ie:#ff0000)

fabSetStrokeWidth

Purpose:

Set object's strokeWidth

Category:

FabricJS

Syntax:

fabSetStrokeWidth "containerId" "name" valor

containerId

Select an initializazed Container Object

name

Object name

valor

Stroke width

fabSetTextAlign

Purpose:

Set text align

Category:

FabricJS

Syntax:

fabSetTextAlign "containerId" "name" "valor"

containerId

Select an initializazed Container Object

name

Object name

valor

left, right, center or justify

fabSetTextBackgroundColor

Purpose:

Set text backgrounnd color

Category:

FabricJS

Syntax:

fabSetTextBackgroundColor "containerId" "name" "valor"

containerId

Select an initializazed Container Object

name

Object name

valor

Background color (ie:#ff0000)

fabSetTextLineHeight

Purpose:

Set text line height

Category:

FabricJS

Syntax:

fabSetTextLineHeight "containerId" "name" valor

containerId

Select an initializazed Container Object

name

Object name

valor

Line height

fabSetTop

Purpose:

Sets object's top position

Category:

FabricJS

Syntax:

fabSetTop "containerId" "name" valor

containerId

Select an initializazed Container Object

name

Object name

valor

Top distance

fabSetZoom

Purpose:

Sets the Canvas Zoom

Category:

FabricJS

Syntax:

fabSetZoom "containerId" zoom

containerId

Select an initializazed Container Object

zoom

Zoom factor (ie:1.5)

fabTextAlign

Purpose:

Text alignment. Possible values: "left", "center", "right" or "justify".

Category:

FabricJS

Syntax:

fabTextAlign "containerId" "name" "align"

containerId

Select an initializazed Container Object

name

Object name

align

Alignment.(left,center,right or justify

fabToggle

Purpose:

Toggles a boolean property from true to false or viceversa

Category:

FabricJS

Syntax:

fabToggle "containerId" "name" "valor"

containerId

Select an initializazed Container Object

name

Object name

valor

Boolean property to toggle

fabUndoDraw

Purpose:

Undo last hand drawn path when Drawing Mode is set to true

Category:

FabricJS

Syntax:

fabUndoDraw "containerId"

containerId

Select a Container Object

fabUngroup

Purpose:

Ungroup

Category:

FabricJS

Syntax:

fabUngroup "containerId"

containerId

Select an initializazed Container Object

fabUnselect

Purpose:

Deactivate all selected objects

Category:

FabricJS

Syntax:

fabUnselect "containerId"

containerId

Select an initializazed Container Object

fabZoomToPoint

Purpose:

Zoom the canvas centered in a given point

Category:

FabricJS

Syntax:

fabZoomToPoint "containerId" zoom x y

containerId

Select an initializazed Container Object

zoom

Zoom factor (ie:1.5)

X point coordinate

Y point coordinate

fabLoadFile

Purpose:

Loads an image file into the Fabric canvas. You should use this commend inside a File Input object change event.

Category:

FabricJS

Syntax:

fabLoadFile "containerId" "object name"

containerId

Select an initializaed Container object

object name

An optional object name so it can be referenced later

fabLoadLocalMainImage

Purpose:

Load an local image file and resize the canvas to its size.

Category:

FabricJS

Syntax:

fabLoadLocalMainImage "containerId" "name"

containerId

Select an initialized Container object

name

Object name (optional)

fabLoadMainImage

Purpose:

Load an image from URL and resize the canvas to its size.

Category:

FabricJS

Syntax:

fabLoadMainImage "containerId" "name" "url"

containerId

Select an initialized Container object

name

Object name (optional)

url

Image URL

fabSetControls

Purpose:

Set default controls colors and size

Category:

FabricJS

Syntax:

fabSetControls theCornerSize "theBorderColor" "theCornerColor" theTransparency

theCornerSize

Corner size (pixels)

theBorderColor

Border color (ie: #012060)

theCornerColor

Corner color (ie: #012060)

theTransparency

Apply transparency?

fabGetCanvasWidth

Purpose:

Get the canvas width into a variable

Category:

FabricJS

Syntax:

fabGetCanvasWidth "containerId" returnVar

containerId

Select an initialized Container object

returnVar

Variable to store result

fabGetCanvasHeight

Purpose:

Get the canvas height into a variable

Category:

FabricJS

Syntax:

fabGetCanvasHeight "containerId" returnVar

containerId

Select an initialized Container object

returnVar

Variable to store result

fabNewPolyline

Category:

FabricJS

Syntax:

fabNewPolyline "containerId" "name" theArray "fill" strokeWidth "strokeColor"

containerId

Select an initialized Container object

name

Polyline name (optional)

theArray

Array variable with x,y data collection

fill

Fill color (ie: #ff0000)

strokeWidth

Stroke width (ie: 3)

strokeColor

Stroke color (ie: #ff0000)

fabAlignLeft

Purpose:

Align selected objects to the left edge

Category:

FabricJS

Syntax:

fabAlignLeft "containerId"

containerId

Select an initialized Container object

fabAlignCenterH

Purpose:

Align selected objects horizontally to the center

Category:

FabricJS

Syntax:

fabAlignCenterH "containerId"

containerId

Select an initialized Container object

fabAlignRight

Purpose:

Align selected objects to the right edge

Category:

FabricJS

Syntax:

fabAlignRight "containerId"

containerId

Select an initialized Container object

fabAlignTop

Purpose:

Align selected objects to the top edge

Category:

FabricJS

Syntax:

fabAlignTop "containerId"

containerId

Select an initialized Container object

fabAlignMiddleV

Purpose:

Align selected objects vertically to the middle

Category:

FabricJS

Syntax:

fabAlignMiddleV "containerId"

containerId

Select an initialized Container object

fabAlignBottom

Purpose:

Align selected objects to the bottom edge

Category:

FabricJS

Syntax:

fabAlignBottom "containerId"

containerId

Select an initialized Container object

fabDistributeHorizontal

Purpose:

Distribute selected objects horizontally with equal spacing

Category:

FabricJS

Syntax:

fabDistributeHorizontal "containerId"

containerId

Select an initialized Container object

fabDistributeVertical

Purpose:

Distribute selected objects vertically with equal spacing

Category:

FabricJS

Syntax:

fabDistributeVertical "containerId"

containerId

Select an initialized Container object

fabApplyFilterGrayscale

Purpose:

Apply Grayscale filter to the selected image object(s)

Category:

FabricJS

Syntax:

fabApplyFilterGrayscale "containerId"

containerId

Select an initialized Container object

fabApplyFilterSepia

Purpose:

Apply Sepia filter to the selected image object(s)

Category:

FabricJS

Syntax:

fabApplyFilterSepia "containerId"

containerId

Select an initialized Container object

fabApplyFilterInvert

Purpose:

Apply Invert filter to the selected image object(s)

Category:

FabricJS

Syntax:

fabApplyFilterInvert "containerId"

containerId

Select an initialized Container object

fabApplyFilterBrightness

Purpose:

Apply Brightness filter to the selected image object(s)

Category:

FabricJS

Syntax:

fabApplyFilterBrightness "containerId" brightnessValue

containerId

Container object

brightnessValue

Brightness value (-1 to 1, default 0)

fabApplyFilterContrast

Purpose:

Apply Contrast filter to the selected image object(s)

Category:

FabricJS

Syntax:

fabApplyFilterContrast "containerId" contrastValue

containerId

Container object

contrastValue

Contrast value (-1 to 1, default 0)

fabApplyFilterBlur

Purpose:

Apply Blur filter to the selected image object(s)

Category:

FabricJS

Syntax:

fabApplyFilterBlur "containerId" blurValue

containerId

Container object

blurValue

Blur value (0 to 1, default 0)

fabRemoveFilters

Purpose:

Remove all filters from the selected image object(s)

Category:

FabricJS

Syntax:

fabRemoveFilters "containerId"

containerId

Select an initialized Container object

fabRemoveShadow

Purpose:

Remove shadow effect from the selected object(s)

Category:

FabricJS

Syntax:

fabRemoveShadow "containerId"

containerId

Select an initialized Container object

fabLockScalingX

Purpose:

Prevent horizontal scaling of the selected object(s)

Category:

FabricJS

Syntax:

fabLockScalingX "containerId" lockState

containerId

Container object

lockState

True to lock, False to unlock

fabLockScalingY

Purpose:

Prevent vertical scaling of the selected object(s)

Category:

FabricJS

Syntax:

fabLockScalingY "containerId" lockState

containerId

Container object

lockState

True to lock, False to unlock

fabLockScalingFlip

Purpose:

Prevent flipping of the selected object(s)

Category:

FabricJS

Syntax:

fabLockScalingFlip "containerId" lockState

containerId

Container object

lockState

True to lock, False to unlock

fabSetLocked

Purpose:

Lock all transformations for the selected object(s)

Category:

FabricJS

Syntax:

fabSetLocked "containerId" lockState

containerId

Container object

lockState

True to lock all, False to unlock all

fabSetVisible

Purpose:

Set the visibility of the specified object by its name

Category:

FabricJS

Syntax:

fabSetVisible "containerId" "objectName" visible

containerId

Container object

objectName

Name of the object

visible

True for visible, False for hidden

fabGetObjectType

Purpose:

Get the type of the selected object into a variable

Category:

FabricJS

Syntax:

fabGetObjectType "containerId" returnVar

containerId

Container object

returnVar

Variable to store the object type (e.g., 'rect', 'image')

fabGetObjectCoords

Purpose:

Get the bounding box coordinates (left, top, width, height, angle) of the selected object as a JSON string

Category:

FabricJS

Syntax:

fabGetObjectCoords "containerId" returnVar

containerId

Container object

returnVar

Variable to store the coordinates JSON

fabGetObjectFill

Purpose:

Get the fill color/gradient/pattern of the selected object

Category:

FabricJS

Syntax:

fabGetObjectFill "containerId" returnVar

containerId

Container object

returnVar

Variable to store the fill value

fabGetObjectStroke

Purpose:

Get the stroke color of the selected object

Category:

FabricJS

Syntax:

fabGetObjectStroke "containerId" returnVar

containerId

Container object

returnVar

Variable to store the stroke color

fabGetObjectOpacity

Purpose:

Get the opacity of the selected object (0 to 1)

Category:

FabricJS

Syntax:

fabGetObjectOpacity "containerId" returnVar

containerId

Container object

returnVar

Variable to store the opacity value

fabGetObjectName

Purpose:

Get the name assigned to the selected object

Category:

FabricJS

Syntax:

fabGetObjectName "containerId" returnVar

containerId

Container object

returnVar

Variable to store the object name

fabGetObjectAngle

Purpose:

Get the angle of the selected object

Category:

FabricJS

Syntax:

fabGetObjectAngle "containerId" returnVar

containerId

Container object

returnVar

Variable to store the angle value

fabGetObjectScaleX

Purpose:

Get the horizontal scale of the selected object

Category:

FabricJS

Syntax:

fabGetObjectScaleX "containerId" returnVar

containerId

Container object

returnVar

Variable to store the scaleX value

fabGetObjectScaleY

Purpose:

Get the vertical scale of the selected object

Category:

FabricJS

Syntax:

fabGetObjectScaleY "containerId" returnVar

containerId

Container object

returnVar

Variable to store the scaleY value

fabGetObjectShadow

Purpose:

Get the shadow properties of the selected object as a JSON string

Category:

FabricJS

Syntax:

fabGetObjectShadow "containerId" returnVar

containerId

Container object

returnVar

Variable to store the shadow JSON

fabSetFontWeight

Purpose:

Set font weight for the selected text object(s)

Category:

FabricJS

Syntax:

fabSetFontWeight "containerId" fontWeightValue

containerId

Container object

fontWeightValue

Select font weight

fabSetTextDecoration

Purpose:

Set text decoration for the selected text object(s)

Category:

FabricJS

Syntax:

fabSetTextDecoration "containerId" textDecorationValue

containerId

Container object

textDecorationValue

Select text decoration (leave empty to remove)

fabSetLineHeight

Purpose:

Set line height for the selected text object(s)

Category:

FabricJS

Syntax:

fabSetLineHeight "containerId" lineHeight

containerId

Container object

lineHeight

Line height multiplier (e.g., 1.2)

fabSetCharSpacing

Purpose:

Set character spacing for the selected text object(s)

Category:

FabricJS

Syntax:

fabSetCharSpacing "containerId" charSpacing

containerId

Container object

charSpacing

Spacing amount (pixels)

fabMoveObjectToIndex

Purpose:

Move the specified object to a specific stack index (Z-order)

Category:

FabricJS

Syntax:

fabMoveObjectToIndex "containerId" "objectName" index

containerId

Container object

objectName

Name of the object

index

Target index (0 is bottom)

fabGetObjectIndex

Purpose:

Get the current stack index (Z-order) of the specified object

Category:

FabricJS

Syntax:

fabGetObjectIndex "containerId" "objectName" returnVar

containerId

Container object

objectName

Name of the object

returnVar

Variable to store the index (-1 if not found)

fabLoadSVGFromURL

Purpose:

Load objects from an SVG file URL onto the canvas

Category:

FabricJS

Syntax:

fabLoadSVGFromURL "containerId" "svgUrl" ""optionsJSON"

containerId

Container object

svgUrl

URL of the SVG file

"optionsJSON

(Optional) JSON string with load options (e.g., {""center"":true, ""scaleX"":0.5, ""scaleY"":0.5, ""selectable"":false, ""onErrorSub"":""SvgError""})"

fabSetGradientFill

Purpose:

Set a gradient fill for the selected object(s)

Category:

FabricJS

Syntax:

fabSetGradientFill "containerId" "optionsJSON"

containerId

Container object

optionsJSON

JSON string with gradient options (type, coords, colorStops)

fabSetPatternFill

Purpose:

Set a pattern fill for the selected object(s)

Category:

FabricJS

Syntax:

fabSetPatternFill "containerId" "optionsJSON"

containerId

Container object

optionsJSON

JSON string with pattern options (source URL, repeat: 'repeat', 'repeat-x', 'repeat-y', 'no-repeat')

fabRegisterEvent

Purpose:

Category:

FabricJS

Syntax:

fabRegisterEvent "containerId" eventName subroutineName

containerId

Container object

eventName

Select Fabric.js event name

subroutineName

Name of the VNEO Subroutine to call

fabUnregisterEvent

Purpose:

Unregister VNEO Subroutine(s) from canvas event(s)

Category:

FabricJS

Syntax:

fabUnregisterEvent "containerId" eventName subroutineName

containerId

Container object

eventName

(Optional) Event name to unregister from (if empty, unregisters all for the canvas)

subroutineName

(Optional) Specific subroutine to unregister (if empty, unregisters all for the event)

fabRegisterObjectEvent

Purpose:

Category:

FabricJS

Syntax:

fabRegisterObjectEvent "containerId" "objectName" eventName subroutineName

containerId

Container object

objectName

Name of the Fabric object

eventName

Select Fabric.js object event name

subroutineName

Subroutine to call

fabUnregisterObjectEvent

Purpose:

Unregister VNEO Subroutine(s) from specific Fabric object event(s)

Category:

FabricJS

Syntax:

fabUnregisterObjectEvent "containerId" "objectName" eventName subroutineName

containerId

Container object

objectName

Name of the Fabric object

eventName

(Optional) Select event name (leave empty to unregister all for the object/subroutine)

subroutineName

(Optional) Specific subroutine to unregister (if empty, unregisters all)

fabSaveStateToVar

Purpose:

Save the current canvas state as a JSON string into a variable

Category:

FabricJS

Syntax:

fabSaveStateToVar "containerId" returnVar ""propertiesToIncludeJSON"

containerId

Container object

returnVar

Variable to store the state JSON

"propertiesToIncludeJSON

(Optional) JSON array of extra properties to include (e.g., [""name"", ""selectable""])"

fabLoadStateFromString

Purpose:

Load canvas state from a previously saved JSON string

Category:

FabricJS

Syntax:

fabLoadStateFromString "containerId" "stateJson"

containerId

Container object

stateJson

JSON string containing the canvas state

Created with the Personal Edition of HelpNDoc: Enhance Your Documentation with HelpNDoc's Advanced Project Analyzer

©2025 SinLios Soluciones Digitales. All rights reserved. VisualNEO Web™, VisualNEO Win™ and PixelNEO™ are trademarks of SinLios Soluciones Digitales. All other brand or product names are trademarks of their respective holders.