Directory

← Back

fabric-canvas

Web Component wrapper of fabric.js

Author

Rating

Popularity

<100

<fabric-canvas>

npm version

<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 ↗

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

Compatibility

(Loading compatibility data...)

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

fabric-canvas - Vaadin Add-on Directory

Web Component wrapper of fabric.js fabric-canvas - Vaadin Add-on Directory
# <fabric-canvas> [![npm version](https://badgen.net/npm/v/fabric-canvas?color=00B4F0)](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) ![screenshot](https://user-images.githubusercontent.com/3392815/66313780-9bdf4400-e91b-11e9-96c8-096cd17d6b7a.png) ![carbon](https://user-images.githubusercontent.com/3392815/66313774-98e45380-e91b-11e9-9659-605f432179fc.png) ## 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
Online