From b641fa8f5c2eee72c97c2e56bb93edc8faad2500 Mon Sep 17 00:00:00 2001
From: Shachar <34343793+ShaMan123@users.noreply.github.com>
Date: Fri, 26 Aug 2022 08:54:22 +0300
Subject: [PATCH 01/77] Update README.md
---
README.md | 240 +++++++++++++-----------------------------------------
1 file changed, 58 insertions(+), 182 deletions(-)
diff --git a/README.md b/README.md
index 8c134beef02..16b22d5d214 100644
--- a/README.md
+++ b/README.md
@@ -2,82 +2,85 @@
-FabricJS.com is a **simple and powerful Javascript HTML5 canvas library**. It is also an **SVG-to-canvas parser**.
+A **simple and powerful Javascript HTML5 canvas library**.
+
-[](http://travis-ci.org/#!/kangax/fabric.js)
+[](http://travis-ci.org/#!/fabricjs/fabric.js)
[](https://codeclimate.com/github/kangax/fabric.js)
[](https://gitpod.io/#https://github.com/fabricjs/fabric.js)
[](https://cdnjs.com/libraries/fabric.js)
+[](https://www.jsdelivr.com/package/npm/fabric)
+
[](http://badge.fury.io/js/fabric)
[](https://www.npmjs.org/package/fabric)
[](http://badge.fury.io/bo/fabric)
-## Features
-- drag-n-drop objects on canvas,
-- scale, move, rotate and group objects with mouse,
-- use predefined shapes or create custom objects,
-- works super-fast with many objects,
-- supports JPG, PNG, JSON and SVG formats,
-- ready-to-use image filters,
-- create animations,
-- and much more!
+---
-
+[](https://github.com/sponsors/asturur)
+[](https://github.com/sponsors/melchiar)
+[](https://github.com/sponsors/ShaMan123)
+[](https://www.patreon.com/fabricJS)
-Introduction
- •
-Docs
- •
-Demos
- •
-Kitchensink
- •
-Benchmarks
- •
-Contribution
-
+-----
-
+## Features
+- Interactive
+ - drag-n-drop objects on canvas
+ - scale, move, rotate and group objects with mouse
+ - built in controls and animations
+- use predefined shapes or create custom objects
+- works super-fast with many objects
+- supports JPG, PNG, JSON and SVG formats
+- ready-to-use image filters
+- create animations
+- and much more!
-## Quick Start
-```
+## 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";
+
+// cjs
const fabric = require("fabric").fabric;
+
```
-Or you can use this instead if your build pipeline supports ES6 imports:
+### Node.js
+If you are using Fabric.js in a Node.js script, you will depend on [node-canvas](https://github.com/Automattic/node-canvas) for a canvas implementation (`HTMLCanvasElement` replacement) and [jsdom](https://github.com/jsdom/jsdom) for a `window` implementation.
+Follow these [instructions](https://github.com/Automattic/node-canvas#compiling) to get `node-canvas` up and running.
-```
-import { fabric } from "fabric";
-```
+### Browser es6
+see [browser modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) for using es6 imports in the browser or use a dedicated bundler.
-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.
+### CDN
-NOTE: es6 imports won't work in browser or with bundlers which expect es6 module like vite. Use commonjs syntax instead.
+[cdnjs](https://cdnjs.com/libraries/fabric.js), [jsdelivr](https://www.jsdelivr.com/package/npm/fabric)
-## Usage
+## Qucik Start
### Plain HTML
```html
-
-
+
```
-### ReactJS
+#### ReactJS
```tsx
import React, { useEffect, useRef } from 'react';
@@ -115,47 +120,66 @@ export const FabricJSCanvas = () => {
```
-## Contributing
-
-See the [Contribution Guide](/CONTRIBUTING.md)
-
-
-## Goals
+#### Node.js
-- Unit tested
-- Modular
-- Cross-browser
-- [Fast](https://github.com/kangax/fabric.js/wiki/Focus-on-speed)
-- No browser sniffing for critical functionality
-- Runs under es6 strict mode
-- Runs on a server under [Node.js](http://nodejs.org/) (active stable releases and latest of current) (see [Node.js limitations](https://github.com/fabricjs/fabric.js/wiki/Fabric-limitations-in-node.js))
-- Follows [Semantic Versioning](http://semver.org/)
+```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') {
+ 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}`);
+ });
+```
-## Supported browsers
+## Supported Browsers
- Firefox 4+
- Safari 5+
- Opera 9.64+
- Chrome (all versions)
- Edge (chromium based, all versions)
-- IE11 and Edge legacy, not supported
+
+IE11 and Edge legacy are **not** supported
+
+
+## Contributing, Developing and More
+
+Follow the [Contribution Guide](/CONTRIBUTING.md)
-## More resources
+## More Resources
- [Fabric.js on Twitter](https://twitter.com/fabricjs)
- [Fabric.js on CodeTriage](https://www.codetriage.com/kangax/fabric.js)
- [Fabric.js on Stackoverflow](https://stackoverflow.com/questions/tagged/fabricjs)
- [Fabric.js on jsfiddle](https://jsfiddle.net/user/fabricjs/fiddles/)
- [Fabric.js on Codepen.io](https://codepen.io/tag/fabricjs)
-- [Presentation from BK.js](http://www.slideshare.net/kangax/fabricjs-building-acanvaslibrarybk)
-- [Presentation from Falsy Values](http://www.slideshare.net/kangax/fabric-falsy-values-8067834)
## Credits
- [@kangax](https://twitter.com/kangax)
-- [Andrea Bogazzi](https://twitter.com/AndreaBogazzi)
+- [asturur](https://github.com/asturur), [Andrea Bogazzi](https://twitter.com/AndreaBogazzi)
- [melchiar](https://github.com/melchiar)
- [ShaMan123](https://github.com/ShaMan123)
- Ernest Delgado for the original idea of [manipulating images on canvas](http://www.ernestdelgado.com/archive/canvas/)
@@ -163,5 +187,5 @@ See the [Contribution Guide](/CONTRIBUTING.md)
- [Sergey Nisnevich](http://nisnya.com) for help with geometry logic
- [Stefan Kienzle](https://twitter.com/kienzle_s) for help with bugs, features, documentation, GitHub issues
- [Shutterstock](http://www.shutterstock.com/jobs) for the time and resources invested in using and improving Fabric.js
-- [and all the other GitHub contributors](https://github.com/fabricjs/fabric.js/graphs/contributors)
+- [and all the other contributors](https://github.com/fabricjs/fabric.js/graphs/contributors)
From f52628f8313cb5914064717e35eada7863e0f8c8 Mon Sep 17 00:00:00 2001
From: Shachar <34343793+ShaMan123@users.noreply.github.com>
Date: Fri, 26 Aug 2022 10:23:59 +0300
Subject: [PATCH 04/77] Update README.md
---
README.md | 6 +++++-
1 file changed, 5 insertions(+), 1 deletion(-)
diff --git a/README.md b/README.md
index 3a143980864..609661ad817 100644
--- a/README.md
+++ b/README.md
@@ -82,7 +82,7 @@ See [browser modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Gu
```html
-
+
+
+
```
-#### ReactJS
+### ReactJS
```tsx
-import React, { useEffect, useRef } from 'react';
-import { fabric } from 'fabric';
+import React, {useEffect, useRef} from 'react'
+import {fabric} from 'fabric'
-export const FabricJSCanvas = () => {
- const canvasEl = useRef(null);
+const FabricJSCanvas = () => {
+ const canvasEl = useRef(null)
useEffect(() => {
const options = { ... };
const canvas = new fabric.Canvas(canvasEl.current, options);
@@ -127,84 +105,184 @@ export const FabricJSCanvas = () => {
updateCanvasContext(canvas);
return () => {
updateCanvasContext(null);
- canvas.dispose();
+ canvas.dispose()
}
}, []);
-
+
return (