# API
# Canvas Component
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
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
# Example Usage
<fabric-canvas>
<fabric-circle :id="'someUUID'" :radius="50"></fabric-circle>
</fabric-canvas>
1
2
3
2
3
# props
All Fabric.Object Props + the following
| Name | Type | Required | Default |
|---|---|---|---|
| radius | Number | no | 50 |
# events
All Fabric.Object Events
# Ellipse Component
# Example Usage
<fabric-canvas>
<fabric-ellipse :id="'someUUID'"></fabric-ellipse>
</fabric-canvas>
1
2
3
2
3
# props
All Fabric.Object Props
# events
All Fabric.Object Events
# Group Component
# Example Usage
<fabric-canvas>
<fabric-group :id="'someUUID'">
<!-- grouped components here -->
</fabric-group>
</fabric-canvas>
1
2
3
4
5
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
# Example Usage
<fabric-canvas>
<fabric-image-from-url :id="'someUUID'"></fabric-image-from-url>
</fabric-canvas>
1
2
3
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
# Example Usage
<fabric-canvas>
<fabric-line :id="'someUUID'"></fabric-line>
</fabric-canvas>
1
2
3
2
3
# props
All Fabric.Object Props
# events
All Fabric.Object Events
# Path Component
# Example Usage
<fabric-canvas>
<fabric-path :id="'someUUID'"></fabric-path>
</fabric-canvas>
1
2
3
2
3
# props
All Fabric.Object Props + the following
| Name | Type | Required | Default |
|---|---|---|---|
| path | String/Array | yes | `` |
# events
All Fabric.Object Events
# Polygon Component
# Example Usage
<fabric-canvas>
<fabric-polygon :id="'someUUID'"></fabric-polygon>
</fabric-canvas>
1
2
3
2
3
# props
All Fabric.Object Props + the following
| Name | Type | Required | Default |
|---|---|---|---|
| points | Array | yes |
# events
All Fabric.Object Events
# Polyline Component
# Example Usage
<fabric-canvas>
<fabric-polyline :id="'someUUID'"></fabric-Polyline>
</fabric-canvas>
1
2
3
2
3
# props
All Fabric.Object Props + the following
| Name | Type | Required | Default |
|---|---|---|---|
| points | Array | yes |
# events
All Fabric.Object Events
# Rectangle Component
# Example Usage
<fabric-canvas>
<fabric-Rectangle :id="'someUUID'"></fabric-Rectangle>
</fabric-canvas>
1
2
3
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
2
3
# Text Component
# Example Usage
<fabric-canvas>
<fabric-text :id="'someUUID'"></fabric-text>
</fabric-canvas>
1
2
3
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
# Example Usage
<fabric-canvas>
<fabric-triangle :id="'someUUID'"></fabric-triangle>
</fabric-canvas>
1
2
3
2
3
# props
All Fabric.Object Props
# events
All Fabric.Object Events
# Animation Component
# 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
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
# 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
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
# 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
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