# <fabric-canvas> [](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)   ## 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