# API

# Canvas Component

Official Docs Link

The Fabric Canvas component serves as a wrapper around a fabric.Canvas instance. This component contains a slot that all children components are placed.

# Example Usage

<fabric-canvas>
	<!-- Insert objects/groups here -->
</fabric-canvas>
1
2
3

# props

Name Type Required Default
id String no "c"
allowAutoScrolling Boolean no false
backgroundColor String no ""
backgroundVpt Boolean no true
controlsAboveOverlay Boolean no ``
enableRetinaScaling Boolean no true
FX_DURATION Number no 500
imageSmoothingEnabled Boolean no true
includeDefaultValues Boolean no true
overlayColor String no ``
overlayVpt Boolean no true
renderOnAddRemove Boolean no true
stateful Boolean no ``
svgViewportTransformation Boolean no true
viewportTransform Array no []

# events

Fires the following events Note vue recommends kebab case variables

Canvas Event Name Vue Event
object:modified object-modified
object:rotated object-rotated
object:scaled object-scaled
object:moved object-moved
object:skewed object-skewed
object:rotating object-rotating
object:scaling object-scaling
object:moving object-moving
object:skewing object-skweing
before:transform before-transform
before:selection:cleared before-selection-cleared
selection:cleared selection-cleared
selection:updated selection-updated
selection:created seleciton-created
path:created path-created
mouse:down mouse-down
mouse:move mouse-move
mouse:up mouse-up
mouse:down:before moude-down-before
mouse:move:before mouse-move-before
mouse🆙before mouse-up-before
mouse:over mouse-over
mouse:out mouse-out
mouse:dblclick mouse-dblclick
event:dragover event-dragover
event:dragenter event-dragenter
event:dragleave event-dragleave
event:drop event-drop

# Fabric Objects

Root object class from which all 2d shape classes inherit from. In this wrapper the fabricOject acts as a mixin for each shape componet. Official Docs Link

# props

Name Type Required Default
id Number/String yes
angle Number no
backgroundColor String no
borderColor String no
borderDashArray Array no
borderOpacityWhenMoving Number no
borderScaleFactor Number no
cacheProperties Array no
centeredRotation Boolean no true
centeredScaling Boolean no false
cornerColor String no
cornerDashArray Array no
cornerSize Number no
cornerStrokeColor String no
cornerStyle String no
dirty Boolean no true
evented Boolean no true
excludeFromExport Boolean no false
fill String no
fillRule String no
flipX Boolaen no
flipY Boolean no
globalCompositeOperation String no
hasBorders Boolean no true
hasControls Boolean no true
hasRotatingPoint Boolean no true
height Number no
hoverCursor String no
includeDefaultValues Boolean no true
inverted Boolean no false
left Number no
lockMovementX Boolean no false
lockMovementY Boolean no false
lockRotation Boolean no false
lockScalingFlip Boolean no false
lockScalingX Boolean no false
lockScalingY Boolean no false
lockUniScaling Boolean no false
minScaleLimit Number no
moveCursor String no
noScaleCache Boolean no true
objectCaching Boolean no true
opacity Number no
originX String no
originY String no
padding Number no
paintFirst String no
perPixelTargetFind Boolean no false
rotatingPointOffset Number no
scaleX Number no
scaleY Number no
selectable Boolean no true
selectionBackgroundColor String no
skewX Number no
skewY Number no
stateProperties Array no
stroke String no
strokeDashArray Array no
strokeDashOffset Number no
strokeLineCap String no
strokeLineJoin String no
strokeMiterLimit Number no
strokeUniform Boolean no
strokeWidth Number no
top Number no
transparentCorners Boolean no true
visible Boolean no true
width Number no

# events

Event Name
added
removed
selected
deselected
modified
moved
scaled
rotated
skewed
rotating
scaling
moving
skewing
mousedown
mouseup
mouseover
mouseout
mousewheel
mousedblclick
dragover
dragenter
dragleave
drop

# Circle Component

Official Docs Link

# Example Usage

<fabric-canvas>
	<fabric-circle :id="'someUUID'" :radius="50"></fabric-circle>
</fabric-canvas>
1
2
3

# props

All Fabric.Object Props + the following

Name Type Required Default
radius Number no 50

# events

All Fabric.Object Events

# Ellipse Component

Official Docs Link

# Example Usage

<fabric-canvas>
	<fabric-ellipse :id="'someUUID'"></fabric-ellipse>
</fabric-canvas>
1
2
3

# props

All Fabric.Object Props

# events

All Fabric.Object Events

# Group Component

Official Docs Link

# Example Usage

<fabric-canvas>
	<fabric-group :id="'someUUID'">
	<!-- grouped components here -->
	</fabric-group>
</fabric-canvas>
1
2
3
4
5

# props

All Fabric.Object Props + the following

Name Type Required Default
subTargetCheck Boolean no false

# events

All Fabric.Object Events

# Image From URL Component

Official Docs Link

# Example Usage

<fabric-canvas>
	<fabric-image-from-url :id="'someUUID'"></fabric-image-from-url>
</fabric-canvas>
1
2
3

# props

All Fabric.Object Props + the following

Name Type Required Default
url String yes ``

# events

All Fabric.Object Events + the following

Event Name
image-loaded

# Line Component

Official Docs Link

# Example Usage

<fabric-canvas>
	<fabric-line :id="'someUUID'"></fabric-line>
</fabric-canvas>
1
2
3

# props

All Fabric.Object Props

# events

All Fabric.Object Events

# Path Component

Official Docs Link

# Example Usage

<fabric-canvas>
	<fabric-path :id="'someUUID'"></fabric-path>
</fabric-canvas>
1
2
3

# props

All Fabric.Object Props + the following

Name Type Required Default
path String/Array yes ``

# events

All Fabric.Object Events

# Polygon Component

Official Docs Link

# Example Usage

<fabric-canvas>
	<fabric-polygon :id="'someUUID'"></fabric-polygon>
</fabric-canvas>
1
2
3

# props

All Fabric.Object Props + the following

Name Type Required Default
points Array yes

# events

All Fabric.Object Events

# Polyline Component

Official Docs Link

# Example Usage

<fabric-canvas>
	<fabric-polyline :id="'someUUID'"></fabric-Polyline>
</fabric-canvas>
1
2
3

# props

All Fabric.Object Props + the following

Name Type Required Default
points Array yes

# events

All Fabric.Object Events

# Rectangle Component

Official Docs Link

# Example Usage

<fabric-canvas>
	<fabric-Rectangle :id="'someUUID'"></fabric-Rectangle>
</fabric-canvas>
1
2
3

# props

All Fabric.Object Props

# events

All Fabric.Object Events

# SVG From URL Component

Official Docs Link Combines Fabric Group and Fabric Path Components together

# Example Usage

<fabric-canvas>
	<fabric-svg-from-url :id="'someUUID'"></fabric-svg-from-url>
</fabric-canvas>
1
2
3

# Text Component

Official Docs Link

# Example Usage

<fabric-canvas>
	<fabric-text :id="'someUUID'"></fabric-text>
</fabric-canvas>
1
2
3

# props

All Fabric.Object Props + the following

Name Type Required Default
fontFamily String no Times New Roman
fontSize Number no 40
fontStyle String no normal
fontWeight Number/String no normal
text String yes
textAlign String no left
textBackgroundColor String no

# events

All Fabric.Object Events

# Triangle Component

Official Docs Link

# Example Usage

<fabric-canvas>
	<fabric-triangle :id="'someUUID'"></fabric-triangle>
</fabric-canvas>
1
2
3

# props

All Fabric.Object Props

# events

All Fabric.Object Events

# Animation Component

Official Docs Link

# Example Usage

<fabric-canvas>
	<fabric-triangle :id="'someUUID'">
        <fabric-animation
          :animateStart="startAnimation"
          :animateKeys="{ left: 400 }"
          :animateDuration="2000"
        ></fabric-animation>
	</fabric-triangle>
</fabric-canvas>
1
2
3
4
5
6
7
8
9

# props

Name Type Required Default
start Boolean no false
animateKeys Object no {}
animateDuration Number no 500
animateEasing String no ""

# events

Event Name
step
complete

# Gradient Component

Official Docs Link

# Example Usage

<fabric-canvas>
	<fabric-triangle :id="'someUUID'">
         <fabric-gradient
            :x1="0"
            :x2="0"
            :y1="0"
            :y2="1"
            :gradientUnits="'percentage'"
            :colorStops="{ 0: '#000', 1: '#fff' }"
        ></fabric-gradient>
	</fabric-triangle>
</fabric-canvas>
1
2
3
4
5
6
7
8
9
10
11
12

# props

Name Type Required Default
gradientKey String no "fill"
offsetX Number no 0
offsetY Number no 0
gradientTransform Array no null
gradientUnits String no "pixels"
gradientType String no "linear"
x1 Number no 0
y1 Number no 0
x2 Number no 0
y2 Number no 0
r1 Number no 0
r2 Number no 0
colorStops Object no {}

# events

None

# Shadow Component

Official Docs Link

# Example Usage

<fabric-canvas>
	<fabric-triangle :id="'someUUID'">
         <fabric-shadow
			:offsetX="25"
            :offsetY="25"
            :color="'rgba(0,0,0,.3)'"
        ></fabric-shadow>
	</fabric-triangle>
</fabric-canvas>
1
2
3
4
5
6
7
8
9

# props

Name Type Required Default
affectStroke Boolean no false
blur Number no 0
color String no "rgb(0,0,0)"
includeDefaultValues Boolean no true
nonScaling Boolean no false
offsetX Number no 0
offsetY Number no 0

# events

None

Last Updated: 9/18/2020, 1:37:53 PM