<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 ↗
Install fabric-canvas
:
npm i fabric-canvas --save
Import the web component in your application:
import 'fabric-canvas';
Or import the static version:
import 'fabric-canvas/src/fabric-static-canvas';
In order to use the fabric API to create shapes, you must import the fabric
module along with the web component:
import { fabric } from 'fabric-canvas';
Add the <fabric-canvas>
element to the page:
<fabric-canvas></fabric-canvas>
const rect = new fabric.Rect({
top: 100,
left: 100,
width: 200,
height: 200,
fill: 'red'
});
document.querySelector('fabric-canvas').add(rect);
<fabric-canvas>
<fabric-rect top="100" left="100" width="200" height="200" fill="red"></fabric-rect>
</fabric-canvas>
-
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.
This project is licensed under the MIT License.