https://github.com/niiyeboah/fabric-canvas

Web Component wrapper of fabric.js
https://github.com/niiyeboah/fabric-canvas

canvas fabricjs polymer-3 web-component

Last synced: 2 months ago
JSON representation

Web Component wrapper of fabric.js

• Host: GitHub
• URL: https://github.com/niiyeboah/fabric-canvas
• Owner: niiyeboah
• License: mit
• Created: 2019-09-26T08:11:52.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2021-07-26T03:36:07.000Z (over 3 years ago)
• Last Synced: 2024-10-05T11:03:31.969Z (3 months ago)
• Topics: canvas, fabricjs, polymer-3, web-component
• Language: JavaScript
• Homepage: https://fabric-canvas.netlify.com/
• Size: 261 KB
• Stars: 5
• Watchers: 1
• Forks: 2
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ``

[![npm version](https://badgen.net/npm/v/fabric-canvas?color=009688)](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)

![rect](https://user-images.githubusercontent.com/3392815/66719537-ee2bd380-edf9-11e9-803d-d5e6cac2783d.png)

![carbon](https://user-images.githubusercontent.com/3392815/66719531-d6544f80-edf9-11e9-9093-aab0f6c13663.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';

```

In order to use the [fabric](http://fabricjs.com/docs/) API to create shapes, you must import the `fabric` module along with the web component:

```js

import { fabric } from 'fabric-canvas';

```

Add the `` element to the page:

```html

```

## Adding Shapes

### _JS_ API

```js

const rect = new fabric.Rect({

  top: 100,

  left: 100,

  width: 200,

  height: 200,

  fill: 'red'

});

document.querySelector('fabric-canvas').add(rect);

```

### _HTML_ API

```html

  

```

## 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](LICENSE)

This project is licensed under the MIT License.