# fabric.js
**Repository Path**: UnStoppableeee/fabric.js
## Basic Information
- **Project Name**: fabric.js
- **Description**: 一个用于h5 canvans的可交互式js库
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-01-28
- **Last Updated**: 2024-10-14
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# Fabric.js
A **simple and powerful Javascript HTML5 canvas library**.
- [**Website**][website]
- [**GOTCHAS**][gotchas]
- [**Contributing, Developing and More**](CONTRIBUTING.md)
---
[](../../actions/workflows/build.yml)
[](../../actions/workflows/tests.yml)
[](../../actions/workflows/codeql-analysis.yml)
---
[][cdnjs]
[][jsdelivr]
[](https://gitpod.io/#https://github.com/fabricjs/fabric.js)
[](http://badge.fury.io/js/fabric)
[](https://www.npmjs.org/package/fabric)
[](http://badge.fury.io/bo/fabric)
---
[](https://github.com/sponsors/asturur)
[](https://github.com/sponsors/melchiar)
[](https://github.com/sponsors/ShaMan123)
[](https://www.patreon.com/fabricJS)
---
## Features
- Out of the box interactions such as scale, move, rotate, skew, group...
- Built in shapes, controls, animations, image filters, gradients, patterns, brushes...
- `JPG`, `PNG`, `JSON` and `SVG` i/o
- Typed and modular
- [Unit tested](CONTRIBUTING.md#%F0%9F%A7%AA%20testing)
#### Supported Browsers/Environments
| Context | Supported Version | Notes |
| :---------: | :---------------: | ------------------------------- |
| Firefox | ✔️ | modern version (tbd) |
| Safari | ✔️ | version >= 10.1 |
| Opera | ✔️ | chromium based |
| Chrome | ✔️ | modern version (tbd) |
| Edge | ✔️ | chromium based |
| Edge Legacy | ❌ |
| IE11 | ❌ |
| Node.js | ✔️ | [Node.js installation](#nodejs) |
Fabric.js Does not use transpilation by default, the browser version we support is determined by the level of canvas api we want to use and some js syntax. While JS can be easily transpiled, canvas API can't.
## Installation
```bash
$ npm install fabric --save
// or
$ yarn add fabric
```
```js
// es6 imports
import { fabric } from 'fabric';
// or cjs
const fabric = require('fabric').fabric;
```
#### Browser
[][cdnjs]
[][jsdelivr]
See [browser modules][mdn_es6] for using es6 imports in the browser or use a dedicated bundler.
#### Node.js
Fabric.js depends on [node-canvas][node_canvas] for a canvas implementation (`HTMLCanvasElement` replacement) and [jsdom][jsdom] for a `window` implementation on node.
This means that you may encounter `node-canvas` limitations and [bugs][node_canvas_issues].
Follow these [instructions][node_canvas_install] to get `node-canvas` up and running.
## Quick Start
Plain HTML
```html
```
ReactJS
```tsx
import React, { useEffect, useRef } from 'react';
import { fabric } from 'fabric';
export const FabricJSCanvas = () => {
const canvasEl = useRef(null);
useEffect(() => {
const options = { ... };
const canvas = new fabric.Canvas(canvasEl.current, options);
// make the fabric.Canvas instance available to your app
updateCanvasContext(canvas);
return () => {
updateCanvasContext(null);
canvas.dispose();
}
}, []);
return (Node.js
```js
const http = require('http');
const { fabric } = require('fabric');
const port = 8080;
http
.createServer((req, res) => {
const canvas = new fabric.Canvas(null, { width: 100, height: 100 });
const rect = new fabric.Rect({ width: 20, height: 50, fill: '#ff0000' });
const text = new fabric.Text('fabric.js', { fill: 'blue', fontSize: 24 });
canvas.add(rect, text);
canvas.renderAll();
if (req.url === '/download') {
res.setHeader('Content-Type', 'image/png');
res.setHeader('Content-Disposition', 'attachment; filename="fabric.png"');
canvas.createPNGStream().pipe(res);
} else if (req.url === '/view') {
canvas.createPNGStream().pipe(res);
} else {
const imageData = canvas.toDataURL();
res.writeHead(200, '', { 'Content-Type': 'text/html' });
res.write(`
`);
res.end();
}
})
.listen(port, (err) => {
if (err) throw err;
console.log(
`> Ready on http://localhost:${port}, http://localhost:${port}/view, http://localhost:${port}/download`
);
});
```