fabric-canvas
Web Component wrapper of fabric.js
<fabric-canvas>
<fabric-canvas>
is a Web Component wrapper for the popular javascript library fabric.js.
- Declarative API
- Responsive canvas size
- fabric.js ES module
Live demo ↗ | API documentation ↗
Installation
Install fabric-canvas
:
npm i fabric-canvas --save
Usage
Import the web component in your application:
import 'fabric-canvas';
Or import the static version:
import 'fabric-canvas/src/fabric-static-canvas';
Add the <fabric-canvas>
element to the page.
<fabric-canvas></fabric-canvas>
Adding Shapes
HTML
API
<fabric-canvas>
<fabric-rect top="100" left="100" width="200" height="200" fill="red"></fabric-rect>
</fabric-canvas>
JS
API
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 to add shapes, you must import the
fabric
module along with the web component.
Running demo
Fork the
fabric-canvas
repository and clone it locally.Make sure you have npm installed.
When in the
fabric-canvas
directory, runnpm install
to install dependencies.Run
npm start
to open the demo.
License
This project is licensed under the MIT License - see the LICENSE file for details
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
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
- Released
- 2019-10-07
- Maturity
- IMPORTED
- License
- MIT License
Compatibility
- Framework
- Polymer 3.0+
- Browser
- Browser Independent