Web Component wrapper of fabric.js

<fabric-canvas>

npm version

<fabric-canvas> is a Web Component wrapper for the popular javascript library fabric.js.

  • [x] Declarative API
  • [x] Responsive canvas size
  • [x] fabric.js ES module

Live demo ↗ | API documentation ↗

screenshot carbon

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

  1. Fork the fabric-canvas repository and clone it locally.

  2. Make sure you have npm installed.

  3. When in the fabric-canvas directory, run npm install to install dependencies.

  4. Run npm start to open the demo.

License

This project is licensed under the MIT License - see the LICENSE file for details

Install

Link to this version
ImportedReleased 07 October 2019MIT License
Framework Support
Polymer 3.0+
Browser Independent
Install with
npm install fabric-canvas"@0.3.0"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - 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