diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
deleted file mode 100644
index 0ad30524d0f..00000000000
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ /dev/null
@@ -1,45 +0,0 @@
----
-name: Bug report
-about: Create a report with a reproducible test case in a JSFIDDLE, For anything else use the github DISCUSSIONS feature. Anything different than a bug report will be closed automatically.
----
-
-
-
-
-
-
-
-## Version
-
-5.0.0
-
-
-
-
-## Test Case
-
-- [ ] [Browser Issue Template](https://jsfiddle.net/Lcp2h3nv/)
-- [ ] [Node Issue Template](https://codesandbox.io/s/exciting-browser-ytb701)
-
-## Information about environment
-
-Nodejs or browser?
-Which browsers?
-
-## Steps To Reproduce
-
-1.
-
-Error Message & Stack Trace
-
-```txt
-
-```
-
-
-
-Introduction
- โข
-Docs
- โข
-Demos
- โข
-Kitchensink
- โข
-Benchmarks
- โข
-Contribution
-
-
-
+- 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)
-## Quick Start
+#### 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
```
-After this, you can import fabric like so:
+```js
+// es6 imports
+import { fabric } from 'fabric';
-```
-const fabric = require("fabric").fabric;
+// or cjs
+const fabric = require('fabric').fabric;
```
-Or you can use this instead if your build pipeline supports ES6 imports:
+#### Browser
-```
-import { fabric } from "fabric";
-```
+[][cdnjs]
+[][jsdelivr]
-NOTE: If you are using Fabric.js in a Node.js script, you will depend on [node-canvas](https://github.com/Automattic/node-canvas). `node-canvas` is an HTML canvas replacement that works on top of native libraries. Please [follow the instructions](https://github.com/Automattic/node-canvas#compiling) to get it up and running.
+See [browser modules][mdn_es6] for using es6 imports in the browser or use a dedicated bundler.
-NOTE: es6 imports won't work in browser or with bundlers which expect es6 module like vite. Use commonjs syntax instead.
+#### Node.js
-## Usage
+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].
-### Plain HTML
+Follow these [instructions][node_canvas_install] to get `node-canvas` up and running.
+
+## Quick Start
+
+Plain HTML
```html
-
-
+
```
-### ReactJS
+ReactJS
```tsx
-import React, {useEffect, useRef} from 'react'
-import {fabric} from 'fabric'
+import React, { useEffect, useRef } from 'react';
+import { fabric } from 'fabric';
-const FabricJSCanvas = () => {
- const canvasEl = useRef(null)
+export const FabricJSCanvas = () => {
+ const canvasEl = useRef(null);
useEffect(() => {
const options = { ... };
const canvas = new fabric.Canvas(canvasEl.current, options);
@@ -105,184 +128,114 @@ const FabricJSCanvas = () => {
updateCanvasContext(canvas);
return () => {
updateCanvasContext(null);
- canvas.dispose()
+ 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`
+ );
+ });
```
-See testem docs for more info: https://github.com/testem/testem
-
-## Optional modules
-
-These are the optional modules that could be specified for inclusion, when building custom version of fabric:
-
-- **text** โ Adds support for static text (`fabric.Text`)
-- **itext** โ Adds support for interactive text (`fabric.IText`, `fabric.Textbox`)
-- **serialization** โ Adds support for `loadFromJSON`, `loadFromDatalessJSON`, and `clone` methods on `fabric.Canvas`
-- **interaction** โ Adds support for interactive features of fabric โ selecting/transforming objects/groups via mouse/touch devices.
-- **parser** โ Adds support for `fabric.parseSVGDocument`, `fabric.loadSVGFromURL`, and `fabric.loadSVGFromString`
-- **image_filters** โ Adds support for image filters, such as grayscale of white removal.
-- **easing** โ Adds support for animation easing functions
-- **node** โ Adds support for running fabric under node.js, with help of [jsdom](https://github.com/tmpvar/jsdom) and [node-canvas](https://github.com/learnboost/node-canvas) libraries.
-- **freedrawing** โ Adds support for free drawing
-- **erasing** โ Adds support for object erasing using an eraser brush
-- **gestures** โ Adds support for multitouch gestures with help of [Event.js](https://github.com/mudcube/Event.js)
-- **object_straightening** โ Adds support for rotating an object to one of 0, 90, 180, 270, etc. depending on which is angle is closer.
-- **animation** โ Adds support for animation (`fabric.util.animate`, `fabric.util.requestAnimFrame`, `fabric.Object#animate`, `fabric.Canvas#fxCenterObjectH/#fxCenterObjectV/#fxRemove`)
-
-Additional flags for build script are:
-
-- **requirejs** โ Makes fabric requirejs AMD-compatible in `dist/fabric.js`. _Note:_ an unminified, requirejs-compatible version is always created in `dist/fabric.require.js`
-- **no-strict** โ Strips "use strict" directives from source
-- **no-svg-export** โ Removes svg exporting functionality
-- **sourcemap** - Generates a sourceMap file and adds the `sourceMappingURL` (only if uglifyjs is used) to `dist/fabric.min.js`
-
-For example:
-
- node build.js modules=ALL exclude=json no-strict no-svg-export
+