fabric-canvas - Vaadin Add-on Directory
Web Component wrapper of fabric.js
# <fabric-canvas>
[](https://www.npmjs.com/package/fabric-canvas)
`` is a Web Component wrapper for the popular javascript library [fabric.js](https://github.com/fabricjs/fabric.js).
- [x] Declarative API
- [x] Responsive canvas size
- [x] fabric.js ES module
[Live demo ↗](https://fabric-canvas.netlify.com)
|
[API documentation ↗](https://fabric-canvas.netlify.com/api/#/elements/FabricCanvas)
## Installation
Install `fabric-canvas`:
```sh
npm i fabric-canvas --save
```
## Usage
Import the web component in your application:
```js
import 'fabric-canvas';
```
Or import the static version:
```js
import 'fabric-canvas/src/fabric-static-canvas';
```
Add the `` element to the page.
```html
```
## Adding Shapes
### `HTML` API
```html
```
### `JS` API
```js
import { fabric } from 'fabric-canvas';
const fc = document.querySelector('fabric-canvas');
const rect = new fabric.Rect({
top: 100,
left: 100,
width: 200,
height: 200,
fill: 'red'
});
fc.canvas.add(rect);
```
> **Note:** In order to use the [fabric.js API](http://fabricjs.com/docs/fabric.Canvas.html#add) to add shapes, you must import the `fabric` module along with the web component.
## Running demo
1. Fork the `fabric-canvas` repository and clone it locally.
1. Make sure you have [npm](https://www.npmjs.com/) installed.
1. When in the `fabric-canvas` directory, run `npm install` to install dependencies.
1. Run `npm start` to open the demo.
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details
View on GitHub
View on NPM
fabric-canvas version 0.1.1
### Dependencies
* @polymer/iron-resizable-behavior#^3.0.1
* @polymer/polymer#^3.0.0
* @vaadin/vaadin-lumo-styles#^1.5.0
* @vaadin/vaadin-themable-mixin#^1.4.4
* fabric#3.4.0
fabric-canvas version 0.1.2
### Dependencies
* @polymer/iron-resizable-behavior#^3.0.1
* @polymer/polymer#^3.0.0
* @vaadin/vaadin-lumo-styles#^1.5.0
* @vaadin/vaadin-themable-mixin#^1.4.4
* fabric#3.4.0
fabric-canvas version 0.2.0
### Dependencies
* @polymer/iron-resizable-behavior#^3.0.1
* @polymer/polymer#^3.0.0
* @vaadin/vaadin-lumo-styles#^1.5.0
* @vaadin/vaadin-themable-mixin#^1.4.4
* fabric#3.4.0
fabric-canvas version 0.3.0
### Dependencies
* @polymer/iron-resizable-behavior#^3.0.1
* @polymer/polymer#^3.0.0
* @vaadin/vaadin-lumo-styles#^1.5.0
* @vaadin/vaadin-themable-mixin#^1.4.4
* fabric#3.4.0