New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

fabric

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

fabric - npm Package Compare versions

Comparing version 5.3.0 to 6.0.0-beta1

.babelrc

.babelrcAlt

.browserslistrc

.eslintrc.js

.gitattributes

.prettierignore

.prettierrc

dist/fabric.d.ts

dist/index.cjs

dist/index.cjs.map

dist/index.d.ts

dist/index.min.js

dist/index.mjs

dist/index.mjs.map

dist/index.node.cjs

dist/index.node.cjs.map

dist/index.node.d.ts

dist/index.node.mjs

dist/index.node.mjs.map

dist/src/brushes/BaseBrush.d.ts

dist/src/brushes/CircleBrush.d.ts

dist/src/brushes/PatternBrush.d.ts

dist/src/brushes/PencilBrush.d.ts

dist/src/brushes/SprayBrush.d.ts

dist/src/cache.d.ts

dist/src/canvas/canvas_gestures.mixin.d.ts

dist/src/canvas/Canvas.d.ts

dist/src/canvas/SelectableCanvas.d.ts

dist/src/canvas/StaticCanvas.d.ts

dist/src/canvas/TextEditingManager.d.ts

dist/src/Collection.d.ts

dist/src/color/color_map.d.ts

dist/src/color/Color.d.ts

dist/src/color/constants.d.ts

dist/src/color/util.d.ts

dist/src/CommonMethods.d.ts

dist/src/config.d.ts

dist/src/constants.d.ts

dist/src/controls/changeWidth.d.ts

dist/src/controls/Control.d.ts

dist/src/controls/controls.render.d.ts

dist/src/controls/default_controls.d.ts

dist/src/controls/drag.d.ts

dist/src/controls/polyControl.d.ts

dist/src/controls/rotate.d.ts

dist/src/controls/scale.d.ts

dist/src/controls/scaleSkew.d.ts

dist/src/controls/skew.d.ts

dist/src/controls/util.d.ts

dist/src/controls/wrapWithFireEvent.d.ts

dist/src/controls/wrapWithFixedAnchor.d.ts

dist/src/env/browser.d.ts

dist/src/env/index.d.ts

dist/src/env/node.d.ts

dist/src/env/types.d.ts

dist/src/EventTypeDefs.d.ts

dist/src/filters/BaseFilter.d.ts

dist/src/filters/BlendColor.d.ts

dist/src/filters/BlendImage.d.ts

dist/src/filters/Blur.d.ts

dist/src/filters/Boilerplate.d.ts

dist/src/filters/Brightness.d.ts

dist/src/filters/Canvas2dFilterBackend.d.ts

dist/src/filters/ColorMatrix.d.ts

dist/src/filters/ColorMatrixFilters.d.ts

dist/src/filters/Composed.d.ts

dist/src/filters/Contrast.d.ts

dist/src/filters/Convolute.d.ts

dist/src/filters/FilterBackend.d.ts

dist/src/filters/Gamma.d.ts

dist/src/filters/Grayscale.d.ts

dist/src/filters/HueRotation.d.ts

dist/src/filters/Invert.d.ts

dist/src/filters/Noise.d.ts

dist/src/filters/Pixelate.d.ts

dist/src/filters/RemoveColor.d.ts

dist/src/filters/Resize.d.ts

dist/src/filters/Saturation.d.ts

dist/src/filters/typedefs.d.ts

dist/src/filters/Vibrance.d.ts

dist/src/filters/WebGLFilterBackend.d.ts

dist/src/filters/WebGLProbe.d.ts

dist/src/gradient/constants.d.ts

dist/src/gradient/Gradient.d.ts

dist/src/gradient/parser/index.d.ts

dist/src/gradient/parser/misc.d.ts

dist/src/gradient/parser/parseColorStops.d.ts

dist/src/gradient/parser/parseCoords.d.ts

dist/src/gradient/typedefs.d.ts

dist/src/Intersection.d.ts

dist/src/mixins/eraser_brush.mixin.d.ts

dist/src/mixins/stateful.mixin.d.ts

dist/src/Observable.d.ts

dist/src/parkinglot/canvas_animation.mixin.d.ts

dist/src/parkinglot/straighten.d.ts

dist/src/parser/applyViewboxTransform.d.ts

dist/src/parser/attributes.d.ts

dist/src/parser/constants.d.ts

dist/src/parser/doesSomeParentMatch.d.ts

dist/src/parser/elementById.d.ts

dist/src/parser/elementMatchesRule.d.ts

dist/src/parser/elements_parser.d.ts

dist/src/parser/getCSSRules.d.ts

dist/src/parser/getGlobalStylesForElement.d.ts

dist/src/parser/getGradientDefs.d.ts

dist/src/parser/getMultipleNodes.d.ts

dist/src/parser/getSvgRegex.d.ts

dist/src/parser/hasAncestorWithNodeName.d.ts

dist/src/parser/loadSVGFromString.d.ts

dist/src/parser/loadSVGFromURL.d.ts

dist/src/parser/normalizeAttr.d.ts

dist/src/parser/normalizeValue.d.ts

dist/src/parser/parseAttributes.d.ts

dist/src/parser/parseElements.d.ts

dist/src/parser/parseFontDeclaration.d.ts

dist/src/parser/parsePointsAttribute.d.ts

dist/src/parser/parseStyleAttribute.d.ts

dist/src/parser/parseStyleObject.d.ts

dist/src/parser/parseStyleString.d.ts

dist/src/parser/parseSVGDocument.d.ts

dist/src/parser/parseTransformAttribute.d.ts

dist/src/parser/parseUseDirectives.d.ts

dist/src/parser/percent.d.ts

dist/src/parser/recursivelyParseGradientsXlink.d.ts

dist/src/parser/rotateMatrix.d.ts

dist/src/parser/scaleMatrix.d.ts

dist/src/parser/selectorMatches.d.ts

dist/src/parser/setStrokeFillOpacity.d.ts

dist/src/parser/skewMatrix.d.ts

dist/src/parser/translateMatrix.d.ts

dist/src/Pattern.d.ts

dist/src/Point.d.ts

dist/src/Shadow.d.ts

dist/src/shapes/ActiveSelection.d.ts

dist/src/shapes/Circle.d.ts

dist/src/shapes/Ellipse.d.ts

dist/src/shapes/Group.d.ts

dist/src/shapes/Image.d.ts

dist/src/shapes/IText/constants.d.ts

dist/src/shapes/IText/DraggableTextDelegate.d.ts

dist/src/shapes/IText/IText.d.ts

dist/src/shapes/IText/ITextBehavior.d.ts

dist/src/shapes/IText/ITextClickBehavior.d.ts

dist/src/shapes/IText/ITextKeyBehavior.d.ts

dist/src/shapes/Line.d.ts

dist/src/shapes/Object/AnimatableObject.d.ts

dist/src/shapes/Object/defaultValues.d.ts

dist/src/shapes/Object/FabricObject.d.ts

dist/src/shapes/Object/FabricObjectSVGExportMixin.d.ts

dist/src/shapes/Object/InteractiveObject.d.ts

dist/src/shapes/Object/Object.d.ts

dist/src/shapes/Object/ObjectGeometry.d.ts

dist/src/shapes/Object/ObjectOrigin.d.ts

dist/src/shapes/Object/StackedObject.d.ts

dist/src/shapes/Path.d.ts

dist/src/shapes/Polygon.d.ts

dist/src/shapes/Polyline.d.ts

dist/src/shapes/Rect.d.ts

dist/src/shapes/Text/StyledText.d.ts

dist/src/shapes/Text/Text.d.ts

dist/src/shapes/Text/TextSVGExportMixin.d.ts

dist/src/shapes/Textbox.d.ts

dist/src/shapes/Triangle.d.ts

dist/src/typedefs.d.ts

dist/src/util/animation/animate.d.ts

dist/src/util/animation/AnimationBase.d.ts

dist/src/util/animation/AnimationFrameProvider.d.ts

dist/src/util/animation/AnimationRegistry.d.ts

dist/src/util/animation/ArrayAnimation.d.ts

dist/src/util/animation/ColorAnimation.d.ts

dist/src/util/animation/easing.d.ts

dist/src/util/animation/types.d.ts

dist/src/util/animation/ValueAnimation.d.ts

dist/src/util/applyMixins.d.ts

dist/src/util/class_registry.d.ts

dist/src/util/dom_event.d.ts

dist/src/util/dom_misc.d.ts

dist/src/util/dom_request.d.ts

dist/src/util/dom_style.d.ts

dist/src/util/fireEvent.d.ts

dist/src/util/internals/cloneDeep.d.ts

dist/src/util/internals/getRandomInt.d.ts

dist/src/util/internals/ifNaN.d.ts

dist/src/util/internals/index.d.ts

dist/src/util/internals/removeFromArray.d.ts

dist/src/util/internals/uid.d.ts

dist/src/util/lang_class.d.ts

dist/src/util/lang_string.d.ts

dist/src/util/misc/boundingBoxFromPoints.d.ts

dist/src/util/misc/capValue.d.ts

dist/src/util/misc/cos.d.ts

dist/src/util/misc/dom.d.ts

dist/src/util/misc/findScaleTo.d.ts

dist/src/util/misc/groupSVGElements.d.ts

dist/src/util/misc/isTransparent.d.ts

dist/src/util/misc/matrix.d.ts

dist/src/util/misc/mergeClipPaths.d.ts

dist/src/util/misc/objectEnlive.d.ts

dist/src/util/misc/objectTransforms.d.ts

dist/src/util/misc/pick.d.ts

dist/src/util/misc/planeChange.d.ts

dist/src/util/misc/projectStroke/index.d.ts

dist/src/util/misc/projectStroke/StrokeLineCapProjections.d.ts

dist/src/util/misc/projectStroke/StrokeLineJoinProjections.d.ts

dist/src/util/misc/projectStroke/StrokeProjectionsBase.d.ts

dist/src/util/misc/projectStroke/types.d.ts

dist/src/util/misc/radiansDegreesConversion.d.ts

dist/src/util/misc/resolveOrigin.d.ts

dist/src/util/misc/rotatePoint.d.ts

dist/src/util/misc/sin.d.ts

dist/src/util/misc/svgParsing.d.ts

dist/src/util/misc/textStyles.d.ts

dist/src/util/misc/toFixed.d.ts

dist/src/util/misc/vectors.d.ts

dist/src/util/path.d.ts

dist/src/util/transform_matrix_removal.d.ts

dist/src/util/types.d.ts

fabric.ts

index.node.ts

index.ts

rollup.config.mjs

rollup.test.config.js

scripts/build.mjs

scripts/buildLock.mjs

scripts/buildReporter.mjs

scripts/buildStats.mjs

scripts/dirname.mjs

scripts/index.mjs

scripts/transform_files.mjs

src/brushes/BaseBrush.ts

src/brushes/CircleBrush.ts

src/brushes/PatternBrush.ts

src/brushes/PencilBrush.ts

src/brushes/SprayBrush.ts

src/cache.ts

src/canvas/canvas_gestures.mixin.ts

src/canvas/Canvas.ts

src/canvas/SelectableCanvas.ts

src/canvas/StaticCanvas.ts

src/canvas/TextEditingManager.ts

src/Collection.ts

src/color/color_map.ts

src/color/Color.ts

src/color/constants.ts

src/color/util.ts

src/CommonMethods.ts

src/config.ts

src/constants.ts

src/controls/changeWidth.ts

src/controls/Control.ts

src/controls/controls.render.ts

src/controls/default_controls.ts

src/controls/drag.ts

src/controls/polyControl.ts

src/controls/rotate.ts

src/controls/scale.ts

src/controls/scaleSkew.ts

src/controls/skew.ts

src/controls/util.ts

src/controls/wrapWithFireEvent.ts

src/controls/wrapWithFixedAnchor.ts

src/env/browser.ts

src/env/index.ts

src/env/node.ts

src/env/types.ts

src/EventTypeDefs.ts

src/filters/BaseFilter.ts

src/filters/BlendColor.ts

src/filters/BlendImage.ts

src/filters/Blur.ts

src/filters/Boilerplate.ts

src/filters/Brightness.ts

src/filters/Canvas2dFilterBackend.ts

src/filters/ColorMatrix.ts

src/filters/ColorMatrixFilters.ts

src/filters/Composed.ts

src/filters/Contrast.ts

src/filters/Convolute.ts

src/filters/FilterBackend.ts

src/filters/Gamma.ts

src/filters/Grayscale.ts

src/filters/HueRotation.ts

src/filters/Invert.ts

src/filters/Noise.ts

src/filters/Pixelate.ts

src/filters/RemoveColor.ts

src/filters/Resize.ts

src/filters/Saturation.ts

src/filters/typedefs.ts

src/filters/Vibrance.ts

src/filters/WebGLFilterBackend.ts

src/filters/WebGLProbe.ts

src/gradient/constants.ts

src/gradient/Gradient.ts

src/gradient/parser/index.ts

src/gradient/parser/misc.ts

src/gradient/parser/parseColorStops.ts

src/gradient/parser/parseCoords.ts

src/gradient/typedefs.ts

src/Intersection.ts

src/mixins/eraser_brush.mixin.ts

src/mixins/stateful.mixin.ts

src/Observable.ts

src/parkinglot/canvas_animation.mixin.ts

src/parkinglot/straighten.ts

src/parser/applyViewboxTransform.ts

src/parser/attributes.ts

src/parser/constants.ts

src/parser/doesSomeParentMatch.ts

src/parser/elementById.ts

src/parser/elementMatchesRule.ts

src/parser/elements_parser.ts

src/parser/getCSSRules.ts

src/parser/getGlobalStylesForElement.ts

src/parser/getGradientDefs.ts

src/parser/getMultipleNodes.ts

src/parser/getSvgRegex.ts

src/parser/hasAncestorWithNodeName.ts

src/parser/loadSVGFromString.ts

src/parser/loadSVGFromURL.ts

src/parser/normalizeAttr.ts

src/parser/normalizeValue.ts

src/parser/parseAttributes.ts

src/parser/parseElements.ts

src/parser/parseFontDeclaration.ts

src/parser/parsePointsAttribute.ts

src/parser/parseStyleAttribute.ts

src/parser/parseStyleObject.ts

src/parser/parseStyleString.ts

src/parser/parseSVGDocument.ts

src/parser/parseTransformAttribute.ts

src/parser/parseUseDirectives.ts

src/parser/percent.ts

src/parser/recursivelyParseGradientsXlink.ts

src/parser/rotateMatrix.ts

src/parser/scaleMatrix.ts

src/parser/selectorMatches.ts

src/parser/setStrokeFillOpacity.ts

src/parser/skewMatrix.ts

src/parser/translateMatrix.ts

src/Pattern.ts

src/Point.ts

src/Shadow.ts

src/shapes/ActiveSelection.ts

src/shapes/Circle.ts

src/shapes/Ellipse.ts

src/shapes/Group.ts

src/shapes/Image.ts

src/shapes/IText/constants.ts

src/shapes/IText/DraggableTextDelegate.ts

src/shapes/IText/IText.ts

src/shapes/IText/ITextBehavior.ts

src/shapes/IText/ITextClickBehavior.ts

src/shapes/IText/ITextKeyBehavior.ts

src/shapes/Line.ts

src/shapes/Object/AnimatableObject.ts

src/shapes/Object/defaultValues.ts

src/shapes/Object/FabricObject.ts

src/shapes/Object/FabricObjectSVGExportMixin.ts

src/shapes/Object/InteractiveObject.ts

src/shapes/Object/Object.ts

src/shapes/Object/ObjectGeometry.ts

src/shapes/Object/ObjectOrigin.ts

src/shapes/Object/StackedObject.ts

src/shapes/Path.ts

src/shapes/Polygon.ts

src/shapes/Polyline.ts

src/shapes/Rect.ts

src/shapes/Text/StyledText.ts

src/shapes/Text/Text.ts

src/shapes/Text/TextSVGExportMixin.ts

src/shapes/Textbox.ts

src/shapes/Triangle.ts

src/typedefs.ts

src/util/animation/animate.ts

src/util/animation/AnimationBase.ts

src/util/animation/AnimationFrameProvider.ts

src/util/animation/AnimationRegistry.ts

src/util/animation/ArrayAnimation.ts

src/util/animation/ColorAnimation.ts

src/util/animation/easing.ts

src/util/animation/types.ts

src/util/animation/ValueAnimation.ts

src/util/applyMixins.ts

src/util/class_registry.ts

src/util/dom_event.ts

src/util/dom_misc.ts

src/util/dom_request.ts

src/util/dom_style.ts

src/util/fireEvent.ts

src/util/internals/cloneDeep.ts

src/util/internals/getRandomInt.ts

src/util/internals/ifNaN.ts

src/util/internals/index.ts

src/util/internals/removeFromArray.ts

src/util/internals/uid.ts

src/util/lang_class.ts

src/util/lang_string.ts

src/util/misc/boundingBoxFromPoints.ts

src/util/misc/capValue.ts

src/util/misc/cos.ts

src/util/misc/dom.ts

src/util/misc/findScaleTo.ts

src/util/misc/groupSVGElements.ts

src/util/misc/isTransparent.ts

src/util/misc/matrix.ts

src/util/misc/mergeClipPaths.ts

src/util/misc/objectEnlive.ts

src/util/misc/objectTransforms.ts

src/util/misc/pick.ts

src/util/misc/planeChange.ts

src/util/misc/projectStroke/index.ts

src/util/misc/projectStroke/StrokeLineCapProjections.ts

src/util/misc/projectStroke/StrokeLineJoinProjections.ts

src/util/misc/projectStroke/StrokeProjectionsBase.ts

src/util/misc/projectStroke/types.ts

src/util/misc/radiansDegreesConversion.ts

src/util/misc/resolveOrigin.ts

src/util/misc/rotatePoint.ts

src/util/misc/sin.ts

src/util/misc/svgParsing.ts

src/util/misc/textStyles.ts

src/util/misc/toFixed.ts

src/util/misc/vectors.ts

src/util/path.ts

src/util/transform_matrix_removal.ts

src/util/types.ts

tsconfig.json

.eslintrc.json

		@@ -6,3 +6,3 @@ {
		"globals": {
		"ActiveXObject": true,
		"Promise": true,
		"define": true,
		@@ -16,5 +16,19 @@ "eventjs": true,
		"QUnit": true,
		"assert": true
		"assert": true,
		"AbortController": true
		},
		"overrides": [
		{
		"files": ["*/.js"]
		}
		],
		"parserOptions": {
		"sourceType": "module"
		},
		"rules": {
		"@typescript-eslint/no-empty-function": 0,
		"@typescript-eslint/no-this-alias": 0,
		"@typescript-eslint/no-extra-semi": 0,
		"no-prototype-builtins": 0,
		"no-redeclare": 0,
		"semi": 2,
		@@ -31,10 +45,4 @@ "eqeqeq": 2,
		"guard-for-in": 0,
		"wrap-iife": [
		2,
		"inside"
		],
		"linebreak-style": [
		2,
		"unix"
		],
		"wrap-iife": [2, "inside"],
		"linebreak-style": [2, "unix"],
		"no-loop-func": 2,
		@@ -55,27 +63,9 @@ "no-multi-str": 2,
		"no-unused-vars": 2,
		"max-depth": [
		2,
		4
		],
		"max-statements": [
		2,
		150
		],
		"curly": [
		2,
		"all"
		],
		"keyword-spacing": [
		2,
		{}
		],
		"max-depth": [2, 4],
		"max-statements": [2, 150],
		"curly": [2, "all"],
		"keyword-spacing": [2, {}],
		"space-infix-ops": 2,
		"array-bracket-spacing": [
		2,
		"never"
		],
		"comma-style": [
		2,
		"last"
		],
		"array-bracket-spacing": [2, "never"],
		"comma-style": [2, "last"],
		"camelcase": [
		@@ -95,6 +85,3 @@ 2,
		"eol-last": 2,
		"one-var": [
		0,
		"always"
		],
		"one-var": [0, "always"],
		"quote-props": [
		@@ -126,6 +113,3 @@ 2,
		"no-trailing-spaces": 2,
		"quotes": [
		2,
		"single"
		],
		"quotes": [2, "single"],
		"indent": [
		@@ -139,6 +123,3 @@ 2,
		],
		"consistent-this": [
		2,
		"_this"
		],
		"consistent-this": [2, "_this"],
		"valid-jsdoc": [
		@@ -156,4 +137,15 @@ 0,
		}
		],
		"no-restricted-syntax": [
		"error",
		{
		"selector": "[callee.object.name='Math'][callee.property.name='hypot']",
		"message": "`Math.hypot` is not accurate on chrome, use `Math.sqrt` instead.\nSee https://stackoverflow.com/questions/62931950/different-results-of-math-hypot-on-chrome-and-firefox"
		},
		{
		"selector": "VariableDeclarator[init.name='Math']",
		"message": "Aliasing or destructing `Math` is not allowed due to restrictions on `Math.hypot` usage"
		}
		]
		}
		}

bower.json

		{
		"name": "fabric.js",
		"homepage": "http://fabricjs.com",
		"authors": [
		"kangax", "Kienz", "asturur"
		],
		"authors": ["kangax", "Kienz", "asturur"],
		"description": "Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.",
		@@ -8,0 +6,0 @@ "main": "./dist/fabric.min.js",

284

CONTRIBUTING.md

		@@ -1,92 +0,260 @@
		# Contributing to Fabric
		# 🎉 Contributing to Fabric 🥳

		1. [Questions?!?](#questions)
		2. [Issue tracker](#issue-tracker)
		3. [Issue tracker guidelines](#issue-tracker-guidelines)
		4. [Pull requests](#pull-request)
		5. [Pull request guidelines](#pull-request-guidelines)
		This guide covers all you need to know from the start, for a first time contributor, advancing to the more advanced topics as you continue reading.

		## Questions?!?
		## 🧐 Questions?!?

		To get your questions answered, please ask/search on [Fabric's google group], [StackOverflow] or on Fabric's IRC channel (irc://irc.freenode.net/#fabric.js).
		Please do not open an issue if you're not sure it's a bug or if it's not a feature/suggestion.
		Questions are legit but that doesn't make them bug reports...\
		Please refer to available resources (read below) and refrain from opening an issue in such a case.

		For news about Fabric you can follow [@fabric.js], [@AndreaBogazzi], [@kangax], or [@kienzle_s] on Twitter.
		Demos and examples can be found on [jsfiddle], [codepen.io] and [fabricjs.com].
		To find an answer, first [search the repository][search_issues]. It contains a lot of useful threads.

		## Issue tracker
		Questions might inspire you to [improve the docs](#-improving-docs) 🌈 Please do 🌟.

		If you are sure that it's a bug in Fabric.js or a suggestion, open a new [issue] and try to answer the following questions:
		Demos and examples 🤓 can be found on [fabricjs.com][website], [`jsfiddle`][jsfiddles], [`codepen.io`][codepens] and more.

		- What did you do?
		- What did you expect to happen?
		- What happened instead?
		## 🏷️ Issue Tracker

		### Issue tracker guidelines
		- Before You Begin 🎬
		- 📌 Make sure you didn't fall into a known [GOTCHA][gotchas].
		- 🔎 [Searching][search_issues] for existing issues and discussions is
		🔋 VITAL in order to keep the community in a good state, prevent spamming 👎 and become a skilled fabric dev 🦉.
		- Fill out the [🐛 report][bug_report] with care, it is there for a reason.
		- The Title must be informative, short and 🧿 to the point.
		- Description
		- Describe the issue making sure you are very clear.
		- Add (📎) logs, screenshots or videos if that makes sense.
		- Make an effort explaining yourself!
		- A good description has been read at least 3 times before submitting.
		- Test Case
		- Create a minimal and immediate test case, reproducing the bug.
		- Add relevant explanations.
		- It should be extremely easy for someone to understand your bug and fast to reproduce it. Don't leave it to us to do your part.
		- Bug templates can be found within a bug report.
		- Specify which version of Fabric.js you are using.
		- Upgrade to the latest version before proceeding, your 🐛 may have turned into a 🦋.

		- Search: Before opening a new issue please [search](https://github.com/fabricjs/fabric.js/search?q=&ref=cmdform&type=Issues) Fabric's existing issues.
		These are minimal requirements. Without them issues shall be ⛔.

		- Title: Choose an informative title.
		If it's not a bug OR if you're unsure, start a 🤠 [discussion][discussions].

		- Description: Use the questions above to describe the issue. Add logs, screenshots or videos if that makes sense.
		Check out [Helping Out](#%EF%B8%8F-helping-out).

		- Test case: Please post code to replicate the bug - best on [jsfiddle](http://jsfiddle.net). Ideally a failing test would be
		perfect, but even a simple script demonstrating the error would suffice. You could use [this jsfiddle template](http://jsfiddle.net/fabricjs/Da7SP/) as a
		starting point.
		---

		- Fabric.js version: Make sure to specify which version of Fabric.js you are using. The version can be found in [fabric.js file](https://github.com/fabricjs/fabric.js/blob/master/dist/fabric.js#L5) or just by executing `fabric.version` in the browser console.
		## 🔦 Fixing typos

		## Pull requests
		Typos are a nasty thing.\
		Though it may seem insignificant, typo fixes are appreciated!\
		It's a good and simple way to start contributing.

		We are very grateful for your pull requests! This is your chance to improve Fabric for everyone else.
		## 🔎 Improving Docs

		### Online one-click setup for making PRs
		Improving DOCS is SUPER important for everyone.\
		Even if it's a small fix it is valuable 💎... don't hesitate!

		Contribute to fabricjs using a fully featured online development environment that will automatically with a single click: clone the repo and install the dependencies.
		We plan on building a brand new website, stay tuned.

		## ❤️ Helping Out

		Answering questions and addressing issues, as well as fixing and adding types (see [Pull Requests](#-pull-requests)), are great ways to start contributing to fabric.

		- [Issues][issues]
		- [Discussions][discussions]

		### 🎮 Adding a DEMO

		Take a look at an existing [demo file][demo_file].\
		Create a new file in the same directory (`posts/demos/_posts`) and follow [developing the website](#fabricjscom-deprecated).

		### ~~`fabricjs.com`~~ (_deprecated_)

		To develop fabric's site you need to clone [`fabricjs.com`][website_repo] in the same parent folder of [`fabric.js`][repo], so that `fabric.js` and `fabricjs.com` are siblings.

		To start the dev server run `npm start:dev` inside the `fabricjs.com` directory (after installing dependencies).

		If you are working on windows, check out [`jekyll` docs][jekyll] for further instructions or use [WSL][wsl].

		## 🐛 Fixing Bugs

		- Open an [issue](#-issue-tracker), if there isn't any, addressing the bug.
		- Fix the bug, see [Developing](#-developing-).
		- Add [tests](#-testing).
		- [PR](#-pull-requests)

		## 🚀 Pull Requests

		Fabric is an open source project 🦄 and as such depends on the genuine effort of individuals and the community as a whole.
		Join Us to make Fabric better 🌺 .

		### Getting Started

		- Read this section through.
		- Take a look at [GOTCHAS][gotchas]
		- Follow [Developing](#-developing-) and read [Testing](#-testing).

		### ✅ Guidelines

		- Code Style \
		Fabric uses [`prettier`][prettier] to format files and [`eslint`][eslint] for linting (`npm run lint -- --fix`).\
		To enjoy a seamless dev experience add the [`Prettier - Code formatter`][prettier_extension] extension via the extensions toolbar in VSCode.
		- ⛔ `dist` \
		Commit changes to [source files](src). Don't commit the generated [distribution files](dist).
		- Tests \
		PRs must be backed with relevant tests, follow [TESTING](#-testing).
		- Docs \
		Add relevant comments to your code if necessary using [JSDoc 3][jsdoc] and update relevant guides.\
		The generated documentation can be found at [fabricjs.com][docs], see [DOCS](#-improving-docs).
		- Changelog\
		Add a concise listing to the [CHANGELOG](CHANGELOG.md) describing what has changed.
		- 1️⃣ PR per feature/bug \
		Create a new branch for every pull request.\
		If you want to do more than one thing, create multiple pull requests 💪.
		- And there you go! \
		If you still have questions we're always happy to help.

		After you open a PR a maintainer will review it.
		It is more than likely you will be requested to change stuff and refine your work before it is merged into the repo.

		## 🧪 Testing

		[![🩺](../../actions/workflows/build.yml/badge.svg)](../../actions/workflows/build.yml)
		[![🧪](../../actions/workflows/tests.yml/badge.svg)](../../actions/workflows/tests.yml)
		[![CodeQL](../../actions/workflows/codeql-analysis.yml/badge.svg)](../../actions/workflows/codeql-analysis.yml)

		Test suites use [`QUnit`][qunit] for assertions and [`testem`][testem] for serving

		- `unit` tests: test logic and state
		- `visual` tests: test visual outcome against image refs located at `/test/visual/golden`

		### Getting Started

		- build and watch for changes:

		```bash

		npm run build -- -f -w

		```

		- run tests:

		```bash

		npm test -- -a -d
		> Running all tests in debug mode (read more in the help section)

		npm test -- -s visual --dev -l -c chrome
		> Running live visual tests on chrome (navigate to see)

		npm test -- --help

		> Usage: fabric.js test [options]

		> run test suite

		Options:
		-s, --suite <suite...> test suite to run (choices: "unit", "visual")
		-f, --file <file> run a specific test file
		--filter <filter> filter tests by name
		-a, --all run all tests (default: false)
		-d, --debug debug visual tests by overriding refs (golden images) in case of visual changes (default:
		false)
		-r, --recreate recreate visual refs (golden images) (default: false)
		-v, --verbose log passing tests (default: false)
		-l, --launch launch tests in the browser (default: false)
		--dev runs testem in `dev` mode, without a `ci` flag (default: false)
		-c, --context <context...> context to test in (choices: "chrome", "firefox", "node", default: "node")
		-p, --port
		-o, --out <out> path to report test results to
		--clear-cache clear CLI test cache (default: false)
		-h, --help display help for command

		```

		---

		## 🚧🎢 Developing 💡✨

		### Setting Up Locally

		1. 🍴 Fork the repository
		1. 💾 Clone your 🍴 to your 💻
		1. Install dependencies 🕹️ `npm i --include=dev`
		1. Next Up [Prototyping](#-prototyping) & [Testing](#-testing)

		#### Online

		[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/from-referrer/)

		### Setting up a local environment
		Gitpod will start the [prototyping](#-prototyping) apps and expose them as endpoints.
		`A service is available on port ...` popups will show up.

		Coming Soon!
		### 🧭 Prototyping

		### Working on fabricjs.com
		[`.codesandbox/templates`](.codesandbox/templates) contains templates for INSTANT out-of-the-box prototyping 👍 Try it out

		To develop fabric's site you need to clone [`fabricjs.com`](https://github.com/fabricjs/fabricjs.com) in the same parent folder of [`fabric.js`](https://github.com/fabricjs/fabric.js), so that `fabric.js` and `fabricjs.com` are siblings.
		To start the dev server run `npm start` inside the `fabricjs.com` directory (after installing dependecies).
		If you are working on windows, check out [`jekyll` docs](https://jekyllrb.com/docs/installation/) for futher instructions.
		```bash

		Adding a DEMO:
		Take a look at an existing [demo file](https://github.com/fabricjs/fabricjs.com/blob/gh-pages/posts/demos/_posts/2020-2-15-custom-control-render.md).
		Create a new file in the same directory (`posts/demos/_posts`) and you're good to go.
		npm run sandbox build next [/path/to/sandbox]
		> building next app at /path/to/sandbox

		### Pull request guidelines
		npm run sandbox start </path/to/sandbox>
		> starting dev server

		Here are a few notes you should take into account:
		npm run sandbox deploy </path/to/sandbox>
		> created codesandbox https://codesandbox.io/s/fgh476

		- Code style, notes: Make sure you have complied with the [guidelines](https://github.com/fabricjs/fabric.js/wiki/How-to-contribute-to-Fabric#code-style-notes)
		npm run sandbox deploy -- --template node
		> created codesandbox https://codesandbox.io/s/fgh476

		- Distribution files: Do your changes only in the [source files](https://github.com/fabricjs/fabric.js/tree/master/src). Don't include the [distribution files](https://github.com/fabricjs/fabric.js/tree/master/dist) in your commit.
		npm run sandbox -- --help

		- Add tests: Tests are always a great addition - invest a little time and expand the [unit tests suite](https://github.com/fabricjs/fabric.js/tree/master/test/unit). More informations about [QUnit](http://qunitjs.com/) tests can be found in the [wiki](https://github.com/fabricjs/fabric.js/wiki/How-to-contribute-to-Fabric#testing-fabric).
		> Usage: fabric.js sandbox [options] [command]

		- Add documentation: Fabric uses [JSDoc 3] for documentation. The generated documentation can be found at [fabricjs.com](http://fabricjs.com/docs).
		> sandbox commands

		- Create topic branches. Don't use your master branch for pull request. It's better to create a new branch for every pull request.
		Options:
		-h, --help display help for command

		- One pull request per feature/bug. If you want to do more than one thing, send multiple pull requests.
		Commands:
		deploy [options] [path] deploy a sandbox to codesandbox
		build <template> [destination] build and start a sandbox
		start <path> start a sandbox
		help [command] display help for command

		- And there you go! If you still have questions we're always happy to help. Also feel free to consult [wiki](https://github.com/fabricjs/fabric.js/wiki/How-to-contribute-to-Fabric).
		```

		[Fabric's google group]: https://groups.google.com/forum/#!forum/fabricjs
		[stackoverflow]: http://stackoverflow.com/questions/tagged/fabricjs
		[@fabric.js]: https://twitter.com/fabricjs
		[@AndreaBogazzi]: https://twitter.com/AndreaBogazzi
		[@kangax]: https://twitter.com/kangax
		[@kienzle_s]: https://twitter.com/kienzle_s
		[jsfiddle]: http://jsfiddle.net/user/fabricjs/fiddles
		[codepen.io]: http://codepen.io/tag/fabricjs
		[fabricjs.com]: http://fabricjs.com/demos
		[fabricjs.com/docs]: http://fabricjs.com/docs
		[JSDoc 3]: http://usejsdoc.org/
		[issue]: https://github.com/kangax/fabric.js/issues
		### 🔮 Symlinking

		Establish symlinking to work with a local version on separate projects.

		1. From `fabric.js` folder run `npm link` OR `yarn link`.
		1. From the project's folder run `npm link fabric` OR `yarn link fabric`.

		See [npm link][npm_link] OR [yarn link][yarn_link].\
		Don't forget to unlink the package once you're done.

		[repo]: ../..
		[issues]: ../../issues
		[discussions]: ../../discussions
		[search_issues]: ../../search?type=Issues
		[bug_report]: ../../issues/new?template=bug_report.md
		[website_repo]: https://github.com/fabricjs/fabricjs.com
		[website]: http://fabricjs.com/
		[docs]: http://fabricjs.com/docs
		[demos]: http://fabricjs.com/demos/
		[gotchas]: http://fabricjs.com/fabric-gotchas
		[demo_file]: https://github.com/fabricjs/fabricjs.com/blob/gh-pages/posts/demos/_posts/2020-2-15-custom-control-render.md
		[jsfiddles]: https://jsfiddle.net/user/fabricjs/fiddles/
		[codepens]: https://codepen.io/tag/fabricjs
		[jekyll]: https://jekyllrb.com/docs/installation/
		[wsl]: https://learn.microsoft.com/en-us/windows/wsl/
		[prettier]: https://prettier.io/
		[prettier_extension]: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
		[eslint]: https://eslint.org/
		[jsdoc]: https://jsdoc.app/
		[qunit]: https://qunitjs.com/
		[testem]: https://github.com/testem/testem
		[npm_link]: https://docs.npmjs.com/cli/v8/commands/npm-link
		[yarn_link]: https://yarnpkg.com/cli/link

129

package.json

		@@ -5,3 +5,3 @@ {
		"homepage": "http://fabricjs.com/",
		"version": "5.3.0",
		"version": "6.0.0-beta1",
		"author": "Juriy Zaytsev <kangax@gmail.com>",
		@@ -11,7 +11,14 @@ "contributors": [
		"name": "Andrea Bogazzi",
		"email": "andreabogazzi79@gmail.com"
		"email": "andreabogazzi79@gmail.com",
		"url": "https://github.com/asturur"
		},
		{
		"name": "Steve Eberhardt",
		"email": "melchiar2@gmail.com"
		"email": "melchiar2@gmail.com",
		"url": "https://github.com/melchiar"
		},
		{
		"name": "Shachar Nencel",
		"email": "shacharnen@gmail.com",
		"url": "https://github.com/ShaMan123"
		}
		@@ -29,13 +36,2 @@ ],
		],
		"browser": {
		"canvas": false,
		"fs": false,
		"jsdom": false,
		"jsdom/lib/jsdom/living/generated/utils": false,
		"jsdom/lib/jsdom/utils": false,
		"http": false,
		"https": false,
		"xmldom": false,
		"url": false
		},
		"repository": {
		@@ -50,41 +46,69 @@ "type": "git",
		"scripts": {
		"cli": "node ./scripts/index.mjs",
		"changelog": "auto-changelog -o change-output.md --unreleased-only",
		"build": "node build.js modules=ALL requirejs exclude=gestures,accessors,erasing",
		"build:fast": "node build.js modules=ALL requirejs fast exclude=gestures,accessors,erasing",
		"build:watch": "onchange 'src//' 'HEADER.js' 'lib//' -- npm run build_export",
		"link:watch": "onchange 'src//' 'HEADER.js' 'lib//' -- npm link",
		"build_with_gestures": "node build.js modules=ALL exclude=accessors",
		"build_export": "npm run build:fast && npm run export_dist_to_site",
		"test:single": "qunit test/node_test_setup.js test/lib",
		"build": "npm run cli -- build",
		"build:fast": "npm run build -- -f",
		"dev": "npm run cli -- dev",
		"start": "npm run cli -- start",
		"export": "npm run cli -- website export",
		"build-tests": "rollup -c ./rollup.test.config.js",
		"test:unit-browser": "npm run test -- -s unit -p 8080 -l -c ",
		"test:visual-browser": "npm run test -- -s visual -p 8080 -l -c ",
		"test": "npm run cli -- test",
		"test:coverage": "nyc --silent qunit test/node_test_setup.js test/lib test/unit",
		"test:visual:coverage": "nyc --silent --no-clean qunit test/node_test_setup.js test/lib test/visual",
		"coverage:report": "nyc report --reporter=lcov --reporter=text",
		"test": "qunit --require ./test/node_test_setup.js test/lib test/unit",
		"test:visual": "qunit test/node_test_setup.js test/lib test/visual",
		"test:visual:single": "qunit test/node_test_setup.js test/lib",
		"test:all": "npm run test && npm run test:visual",
		"lint": "eslint --config .eslintrc.json src",
		"lint": "eslint --config .eslintrc.js src/*/.ts",
		"lint_tests": "eslint test/unit --config .eslintrc_tests && eslint test/visual --config .eslintrc_tests",
		"export_gesture_to_site": "cp dist/fabric.js ../fabricjs.com/lib/fabric_with_gestures.js",
		"export_dist_to_site": "cp dist/fabric.js ../fabricjs.com/lib/fabric.js && cp package.json ../fabricjs.com/lib/package.json && cp -r src HEADER.js lib ../fabricjs.com/build/files/",
		"export_tests_to_site": "cp test/unit/.js ../fabricjs.com/test/unit && cp -r test/visual/ ../fabricjs.com/test/visual && cp -r test/fixtures/* ../fabricjs.com/test/fixtures && cp -r test/lib/* ../fabricjs.com/test/lib",
		"all": "npm run build && npm run test && npm run test:visual && npm run lint && npm run lint_tests && npm run export_dist_to_site && npm run export_tests_to_site",
		"testem": "testem .",
		"testem:ci": "testem ci"
		"all": "npm run build && npm run test -- --all && npm run lint && npm run lint_tests && npm run export",
		"prettier:check": "prettier --check .",
		"prettier:write": "prettier --write .",
		"babel-constants": "babel --no-babelrc src/constants.ts --extensions '.ts' --out-dir dist/src/ --config-file ./.babelrcAlt --plugins=babel-plugin-import-json-value",
		"babel-src": "babel --no-babelrc src --extensions '.ts' --ignore 'src/constants.ts' --out-dir dist/src --config-file ./.babelrcAlt"
		},
		"optionalDependencies": {
		"canvas": "^2.8.0",
		"jsdom": "^19.0.0"
		"jsdom": "^20.0.1"
		},
		"devDependencies": {
		"@babel/cli": "^7.20.7",
		"@babel/core": "^7.20.12",
		"@babel/preset-env": "^7.20.2",
		"@babel/preset-typescript": "^7.18.6",
		"@rollup/plugin-babel": "^6.0.3",
		"@rollup/plugin-json": "^6.0.0",
		"@rollup/plugin-terser": "^0.3.0",
		"@rollup/plugin-typescript": "^11.0.0",
		"@types/fs-extra": "^9.0.13",
		"@types/jsdom": "^20.0.1",
		"@types/lodash": "^4.14.180",
		"@types/node": "^17.0.21",
		"@typescript-eslint/eslint-plugin": "^5.29.0",
		"@typescript-eslint/parser": "^5.29.0",
		"abort-controller": "^3.0.0",
		"auto-changelog": "^2.3.0",
		"babel-plugin-import-json-value": "^0.1.2",
		"busboy": "^1.6.0",
		"chalk": "^2.4.1",
		"commander": "^9.1.0",
		"deep-object-diff": "^1.1.7",
		"eslint": "4.18.x",
		"eslint": "^8.23.1",
		"eslint-config-prettier": "^8.5.0",
		"fireworm": "^0.7.2",
		"fs-extra": "^10.0.1",
		"fuzzy": "^0.1.3",
		"inquirer": "^8.2.1",
		"inquirer-checkbox-plus-prompt": "^1.0.1",
		"kill-port": "^2.0.1",
		"moment": "^2.29.1",
		"nyc": "^15.1.0",
		"onchange": "^7.1.0",
		"pixelmatch": "^4.0.2",
		"prettier": "2.7.1",
		"ps-list": "^8.1.0",
		"qunit": "^2.17.2",
		"testem": "^3.2.0",
		"uglify-js": "3.3.x"
		"rollup": "^3.9.1",
		"source-map-support": "^0.5.21",
		"testem": "^3.8.0",
		"tslib": "^2.4.1",
		"typescript": "^4.9.4"
		},
		@@ -94,4 +118,31 @@ "engines": {
		},
		"main": "./dist/fabric.js",
		"dependencies": {}
		"module": "./dist/index.mjs",
		"main": "./dist/index.node.cjs",
		"types": "./dist/index.d.ts",
		"typesVersions": {
		">=4.2": {
		"*": [
		"dist/index.d.ts"
		],
		"node": [
		"dist/index.node.d.ts"
		]
		}
		},
		"exports": {
		".": {
		"import": "./dist/index.mjs",
		"require": "./dist/index.cjs",
		"default": "./dist/index.cjs",
		"node": null,
		"types": "./dist/index.d.ts"
		},
		"./node": {
		"import": "./dist/index.node.mjs",
		"require": "./dist/index.node.cjs",
		"default": "./dist/index.node.cjs",
		"node": "./dist/index.node.cjs",
		"types": "./dist/index.node.d.ts"
		}
		}
		}

publish.js

		var cp = require('child_process');
		var path = require('path');
		var fs = require('fs');

		// useful changelog regexp for atom
		// $#([0-9]+)$ [#$1](https://github.com/fabricjs/fabric.js/pull/$1)

		// eslint-disable-next-line no-undef
		var pkgPath = path.resolve(__dirname, './package.json');
		var pkgText = fs.readFileSync(pkgPath); // get original pkg text to restore it later
		var pkgObject = JSON.parse(pkgText); // parsed pkg to override its fields
		var args = process.argv.slice(2).join(' '); // args will be passed to npm publish (like --dry-run)
		@@ -21,21 +12,4 @@ var preRelease = process.env.PRE_RELEASE;

		// override package.json with updated fields
		fs.writeFileSync(
		pkgPath,
		JSON.stringify(Object.assign(pkgObject, {
		optionalDependencies: {},
		version: pkgObject.version + '-browser',
		}), null, '\t')
		);

		console.log('npm publish ' + args);

		// publish -browser version
		cp.execSync('npm publish ' + args);

		console.log('Browser package is published');

		// restore the original package.json contents
		fs.writeFileSync(pkgPath, pkgText);

		// publish the main version (the package is published "above" the -browser version)
		@@ -42,0 +16,0 @@ cp.execSync('npm publish ' + args);

415

README.md

		@@ -1,268 +0,208 @@
		## Fabric.js
		# Fabric.js

		<!-- build/coverage status, climate -->
		<a href="http://fabricjs.com/kitchensink" target="_blank"><img align="right" src="/lib/screenshot.png" style="width:400px"></a>

		[![Build Status](https://secure.travis-ci.org/fabricjs/fabric.js.svg?branch=master)](http://travis-ci.org/#!/kangax/fabric.js)
		[![Code Climate](https://d3s6mut3hikguw.cloudfront.net/github/kangax/fabric.js/badges/gpa.svg)](https://codeclimate.com/github/kangax/fabric.js)
		[![Coverage Status](https://coveralls.io/repos/fabricjs/fabric.js/badge.png?branch=master)](https://coveralls.io/r/kangax/fabric.js?branch=master)
		[![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/fabricjs/fabric.js)
		A simple and powerful Javascript HTML5 canvas library.

		<!-- npm, bower, CDNJS versions, downloads -->
		- [Website][website]
		- [GOTCHAS][gotchas]
		- [Contributing, Developing and More](CONTRIBUTING.md)

		[![Bower version](https://badge.fury.io/bo/fabric.svg)](http://badge.fury.io/bo/fabric)
		[![NPM version](https://badge.fury.io/js/fabric.svg)](http://badge.fury.io/js/fabric)
		[![Downloads per month](https://img.shields.io/npm/dm/fabric.svg)](https://www.npmjs.org/package/fabric)
		[![CDNJS version](https://img.shields.io/cdnjs/v/fabric.js.svg)](https://cdnjs.com/libraries/fabric.js)
		---

		<!-- bounties, tips -->
		<!-- build/coverage status, climate -->

		[![Bountysource](https://api.bountysource.com/badge/tracker?tracker_id=23217)](https://www.bountysource.com/trackers/23217-fabric-js?utm_source=23217&utm_medium=shield&utm_campaign=TRACKER_BADGE)
		[![Flattr this git repo](http://api.flattr.com/button/flattr-badge-large.png)](https://flattr.com/submit/auto?user_id=kangax&url=http://github.com/kangax/fabric.js&title=Fabric.js&language=&tags=github&category=software)
		[![🩺](../../actions/workflows/build.yml/badge.svg)](../../actions/workflows/build.yml)
		[![🧪](../../actions/workflows/tests.yml/badge.svg)](../../actions/workflows/tests.yml)
		[![CodeQL](../../actions/workflows/codeql-analysis.yml/badge.svg)](../../actions/workflows/codeql-analysis.yml)

		Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. It is also an SVG-to-canvas parser.
		---

		<a href="http://fabricjs.com/kitchensink" target="_blank"><img src="https://github.com/kangax/fabric.js/raw/master/lib/screenshot.png" style="width:300px;box-shadow:rgba(0,0,0,0.3) 0 0 5px"></a>
		<!-- npm, bower, CDNJS versions, downloads -->

		Using Fabric.js, you can create and populate objects on canvas; objects like simple geometrical shapes — rectangles, circles, ellipses, polygons, or more complex shapes consisting of hundreds or thousands of simple paths. You can then scale, move, and rotate these objects with the mouse; modify their properties — color, transparency, z-index, etc. You can also manipulate these objects altogether — grouping them with a simple mouse selection.
		[![cdnjs](https://img.shields.io/cdnjs/v/fabric.js.svg)][cdnjs]
		[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/fabric/badge)][jsdelivr]
		[![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/fabricjs/fabric.js)

		### Non-Technical Introduction to Fabric
		[![NPM](https://badge.fury.io/js/fabric.svg)](http://badge.fury.io/js/fabric)
		[![Downloads per month](https://img.shields.io/npm/dm/fabric.svg)](https://www.npmjs.org/package/fabric)
		[![Bower](https://badge.fury.io/bo/fabric.svg)](http://badge.fury.io/bo/fabric)

		Fabric.js allows you to easily create simple shapes like rectangles, circles, triangles and other polygons or more complex shapes made up of many paths, onto the HTML `<canvas>` element on a webpage using JavaScript. Fabric.js will then allow you to manipulate the size, position and rotation of these objects with a mouse. It’s also possible to change some of the attributes of these objects such as their color, transparency, depth position on the webpage or selecting groups of these objects using the Fabric.js library. Fabric.js will also allow you to convert an SVG image into JavaScript data that can be used for putting it onto the `<canvas>` element.
		---

		[![Sponsor asturur](https://img.shields.io/static/v1?label=Sponsor%20asturur&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/asturur)
		[![Sponsor melchiar](https://img.shields.io/static/v1?label=Sponsor%20melchiar&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/melchiar)
		[![Sponsor ShaMan123](https://img.shields.io/static/v1?label=Sponsor%20ShaMan123&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/ShaMan123)
		[![Patreon](https://img.shields.io/static/v1?label=Patreon&message=%F0%9F%91%8D&logo=Patreon&color=blueviolet)](https://www.patreon.com/fabricJS)

		[Contributions](https://github.com/kangax/fabric.js/wiki/Love-Fabric%3F-Help-us-by...) are very much welcome!
		---

		### Goals
		## Features

		- Unit tested (1150+ tests at the moment, 79%+ coverage)
		- Modular (~60 small ["classes", modules, mixins](http://fabricjs.com/docs/))
		- Cross-browser
		- [Fast](https://github.com/kangax/fabric.js/wiki/Focus-on-speed)
		- Encapsulated in one object
		- No browser sniffing for critical functionality
		- Runs under ES5 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/kangax/fabric.js/wiki/Fabric-limitations-in-node.js))
		- Follows [Semantic Versioning](http://semver.org/)
		- 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
		#### Supported Browsers/Environments

		- Firefox 4+
		- Safari 5+
		- Opera 9.64+
		- Chrome (all versions)
		- Edge (chromium based, all versions)
		- IE11 and Edge legacy, not supported. Fabric up to 5.0 is written with ES5 in mind, but no specific tests are run for those browsers.
		\| 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) \|

		You can [run automated unit tests](http://fabricjs.com/test/unit/) right in the browser.
		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.

		### History
		## Installation

		Fabric.js started as a foundation for design editor on [printio.ru](http://printio.ru) — interactive online store with ability to create your own designs. The idea was to create [Javascript-based editor](http://printio.ru/ringer_man_tees/new), which would make it easy to manipulate vector shapes and images on T-Shirts. Since performance was one of the most critical requirements, we chose canvas over SVG. While SVG is excellent with static shapes, it's not as performant as canvas when it comes to dynamic manipulation of objects (movement, scaling, rotation, etc.). Fabric.js was heavily inspired by [Ernest Delgado's canvas experiment](http://www.ernestdelgado.com/public-tests/canvasphoto/demo/canvas.html). In fact, code from Ernest's experiment was the foundation of an entire framework. Later, Fabric.js grew into a collection of distinct object types and got an SVG-to-canvas parser.

		### Installation Instructions

		<h3 id="bower-install">Install with bower</h3>

		$ bower install fabric

		<h3 id="npm-install">Install with npm</h3>

		Note: If you are using Fabric.js in a Node.js script, you will depend from [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 located [here](https://github.com/Automattic/node-canvas#compiling) in order to get it up and running.


		$ npm install fabric --save


		After this, you can import fabric like so:

		```bash
		$ npm install fabric --save
		// or
		$ yarn add fabric
		```
		const fabric = require("fabric").fabric;
		```

		Or you can use this instead if your build pipeline supports ES6 imports:
		```js
		// es6 imports
		import { fabric } from 'fabric';

		// or cjs
		const fabric = require('fabric').fabric;
		```
		import { fabric } from "fabric";
		```

		NOTE: es6 imports won't work in browser or with bundlers which expect es6 module like vite. Use commonjs syntax instead.
		#### Browser

		See [the example section](#examples-of-use) for usage examples.
		[![cdnjs](https://img.shields.io/cdnjs/v/fabric.js.svg)][cdnjs]
		[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/fabric/badge)][jsdelivr]

		<h3 id="fabric-building">Building</h3>
		See [browser modules][mdn_es6] for using es6 imports in the browser or use a dedicated bundler.

		1. [Install Node.js](https://github.com/joyent/node/wiki/Installation)
		#### Node.js

		2. Build distribution file [~77K minified, ~20K gzipped]
		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].

		$ node build.js
		Follow these [instructions][node_canvas_install] to get `node-canvas` up and running.

		2.1 Or build a custom distribution file, by passing (comma separated) module names to be included.
		## Quick Start

		$ node build.js modules=text,serialization,parser
		// or
		$ node build.js modules=text
		// or
		$ node build.js modules=parser,text
		// etc.
		<details><summary><b>Plain HTML</b></summary>

		By default (when none of the modules are specified) only basic functionality is included.
		See the list of modules below for more information on each one of them.
		Note that default distribution has support for static canvases only.
		```html
		<canvas id="canvas" width="300" height="300"></canvas>

		To get minimal distribution with interactivity, make sure to include corresponding module:
		<script src="https://cdn.jsdelivr.net/npm/fabric"></script>
		<script>
		const canvas = new fabric.Canvas('canvas');
		const rect = new fabric.Rect({
		top: 100,
		left: 100,
		width: 60,
		height: 70,
		fill: 'red',
		});
		canvas.add(rect);
		</script>
		```

		$ node build.js modules=interaction
		</details>

		2.2 You can also include all modules like so:
		<details><summary><b>ReactJS</b></summary>

		$ node build.js modules=ALL
		```tsx
		import React, { useEffect, useRef } from 'react';
		import { fabric } from 'fabric';

		2.3 You can exclude a few modules like so:
		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();
		}
		}, []);

		$ node build.js modules=ALL exclude=gestures,image_filters
		return (<canvas width="300" height="300" ref={canvasEl}/>)
		});

		3. Create a minified distribution file
		```

		# Using YUICompressor (default option)
		$ node build.js modules=... minifier=yui
		</details>

		# or Google Closure Compiler
		$ node build.js modules=... minifier=closure
		<details><summary><b>Node.js</b></summary>

		4. Enable AMD support via require.js (requires uglify)
		```js
		const http = require('http');
		const { fabric } = require('fabric');

		$ node build.js requirejs modules=...
		const port = 8080;

		5. Create source map file for better productive debugging (requires uglify or google closure compiler).<br>More information about [source maps](http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/).

		$ node build.js sourcemap modules=...

		If you use google closure compiler you have to add `sourceMappingURL` manually at the end of the minified file all.min.js (see issue https://code.google.com/p/closure-compiler/issues/detail?id=941).

		//# sourceMappingURL=fabric.min.js.map

		6. Ensure code guidelines are met (prerequisite: `npm -g install eslint`)

		$ npm run lint && npm run lint_tests

		<h3 id="fabric-building">Testing</h3>

		1. [Install Node.js](https://github.com/joyent/node/wiki/Installation)

		2. [Install NPM, if necessary](https://github.com/npm/npm#super-easy-install)

		3. Install NPM packages

		$ npm install

		4. Run test suite

		Make sure testem is installed

		$ npm install -g testem

		Run tests Chrome and Node (by default):

		$ testem

		See testem docs for more info: https://github.com/testem/testem

		### Demos

		- [Demos](http://fabricjs.com/demos/)
		- [Kitchensink demo](http://fabricjs.com/kitchensink)
		- [Benchmarks](http://fabricjs.com/benchmarks/)

		[Who's using Fabric?](http://trends.builtwith.com/javascript/FabricJS)

		### Documentation

		Documentation is always available at [http://fabricjs.com/docs/](http://fabricjs.com/docs/).

		Also see [official 4-part intro series](http://fabricjs.com/articles), [presentation from BK.js](http://www.slideshare.net/kangax/fabricjs-building-acanvaslibrarybk) and [presentation from Falsy Values](http://www.slideshare.net/kangax/fabric-falsy-values-8067834) for an overview of fabric.js, how it works, and its features.

		### 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

		### Examples of use

		#### Adding red rectangle to canvas

		```html
		<!DOCTYPE html>
		<html>
		<head>
		</head>
		<body>
		<canvas id="canvas" width="300" height="300"></canvas>

		<script src="lib/fabric.js"></script>
		<script>
		var canvas = new fabric.Canvas('canvas');

		var rect = new fabric.Rect({
		top : 100,
		left : 100,
		width : 60,
		height : 70,
		fill : 'red'
		});

		canvas.add(rect);
		</script>
		</body>
		</html>
		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(`<img src="${imageData}" />`);
		res.end();
		}
		})
		.listen(port, (err) => {
		if (err) throw err;
		console.log(
		`> Ready on http://localhost:${port}, http://localhost:${port}/view, http://localhost:${port}/download`
		);
		});
		```

		### Helping Fabric
		</details>

		- [Fabric on Bountysource](https://www.bountysource.com/trackers/23217-fabric-js)
		- [Fabric on CodeTriage](http://www.codetriage.com/kangax/fabric.js)
		- [Contributing](./CONTRIBUTING.md)
		---

		### Staying in touch
		## Other Solutions

		Follow [@fabric.js](http://twitter.com/fabricjs), [@kangax](http://twitter.com/kangax) or [@AndreaBogazzi](http://twitter.com/AndreaBogazzi) on twitter.
		\| Project \| Description \| Demo \|
		\| ------------------------------ \| -------------------- \| :--: \|
		\| [Three.js][three.js] \| 3D graphics \|
		\| [PixiJS][pixijs] \| WebGL renderer \|
		\| [Konva][konva] \| Similar features \| ❌ \|
		\| [Canvas2PDF][canvas2pdf] \| PDF renderer \|
		\| [html-to-image][html-to-image] \| HTML to image/canvas \|

		Questions, suggestions — [fabric.js on Google Groups](http://groups.google.com/group/fabricjs).
		## More Resources

		See [Fabric questions on Stackoverflow](http://stackoverflow.com/questions/tagged/fabricjs),
		Fabric snippets on [jsfiddle](http://jsfiddle.net/user/fabricjs/fiddles/)
		or [codepen.io](http://codepen.io/tag/fabricjs).
		- [Demos on `fabricjs.com`][demos]
		- [Fabric.js on `Twitter`][twitter]
		- [Fabric.js on `CodeTriage`][code_triage]
		- [Fabric.js on `Stack Overflow`][so]
		- [Fabric.js on `jsfiddle`][jsfiddles]
		- [Fabric.js on `Codepen.io`][codepens]

		Fabric on [LibKnot](http://libknot.ohmztech.com/).
		## Credits [![Patreon](https://img.shields.io/static/v1?label=Patreon&message=%F0%9F%91%8D&logo=Patreon&color=blueviolet)](https://www.patreon.com/fabricJS)

		Get help in Fabric's IRC channel — irc://irc.freenode.net/#fabric.js

		### Credits

		- [Andrea Bogazzi](https://twitter.com/AndreaBogazzi) for help with bugs, new features, documentation, GitHub issues
		- [kangax][kagnax]
		- [asturur][asturur] on [`Twitter`][asturur_twitter]
		[![Sponsor asturur](https://img.shields.io/static/v1?label=Sponsor%20asturur&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/asturur)
		- [melchiar][melchiar] [![Sponsor melchiar](https://img.shields.io/static/v1?label=Sponsor%20melchiar&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/melchiar)
		- [ShaMan123][shaman123] [![Sponsor ShaMan123](https://img.shields.io/static/v1?label=Sponsor%20ShaMan123&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/ShaMan123)
		- Ernest Delgado for the original idea of [manipulating images on canvas](http://www.ernestdelgado.com/archive/canvas/)
		@@ -272,22 +212,31 @@ - [Maxim "hakunin" Chernyak](http://twitter.com/hakunin) for ideas, and help with various parts of the library throughout its life
		- [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/kangax/fabric.js/graphs/contributors)
		- [Shutterstock](http://www.shutterstock.com/jobs) for the time and resources invested in using and improving Fabric.js
		- [and all the other contributors][contributors]

		### MIT License

		Copyright (c) 2008-2015 Printio (Juriy Zaytsev, Maxim Chernyak)

		Permission is hereby granted, free of charge, to any person obtaining a copy
		of this software and associated documentation files (the "Software"), to deal
		in the Software without restriction, including without limitation the rights
		to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
		copies of the Software, and to permit persons to whom the Software is
		furnished to do so, subject to the following conditions:

		THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
		IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
		FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
		AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
		LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
		OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
		SOFTWARE.
		[asturur]: https://github.com/asturur
		[asturur_twitter]: https://twitter.com/AndreaBogazzi
		[canvas2pdf]: https://github.com/joshua-gould/canvas2pdf
		[cdnjs]: https://cdnjs.com/libraries/fabric.js
		[code_triage]: https://www.codetriage.com/kangax/fabric.js
		[codepens]: https://codepen.io/tag/fabricjs
		[contributors]: https://github.com/fabricjs/fabric.js/graphs/contributors
		[demos]: http://fabricjs.com/demos/
		[gotchas]: http://fabricjs.com/fabric-gotchas
		[html-to-image]: https://github.com/bubkoo/html-to-image
		[jsdelivr]: https://www.jsdelivr.com/package/npm/fabric
		[jsdom]: https://github.com/jsdom/jsdom
		[jsfiddles]: https://jsfiddle.net/user/fabricjs/fiddles/
		[kagnax]: https://twitter.com/kangax
		[konva]: https://github.com/konvajs/konva
		[mdn_es6]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
		[melchiar]: https://github.com/melchiar
		[node_canvas]: https://github.com/Automattic/node-canvas
		[node_canvas_install]: https://github.com/Automattic/node-canvas#compiling
		[node_canvas_issues]: https://github.com/Automattic/node-canvas/issues
		[patreon_badge]: https://img.shields.io/static/v1?label=Patreon&message=%F0%9F%91%8D&logo=Patreon&color=blueviolet
		[pixijs]: https://github.com/pixijs/pixijs
		[shaman123]: https://github.com/ShaMan123
		[so]: https://stackoverflow.com/questions/tagged/fabricjs
		[three.js]: https://github.com/mrdoob/three.js/
		[twitter]: https://twitter.com/fabricjs
		[website]: http://fabricjs.com/

build.js

dist/fabric.js

dist/fabric.min.js

HEADER.js

old-travis-reference.yml

src/brushes/base_brush.class.js

src/brushes/circle_brush.class.js

src/brushes/pattern_brush.class.js

src/brushes/pencil_brush.class.js

src/brushes/spray_brush.class.js

src/canvas.class.js

src/color.class.js

src/control.class.js

src/controls.actions.js

src/controls.render.js

src/elements_parser.js

src/filters/2d_backend.class.js

src/filters/base_filter.class.js

src/filters/blendcolor_filter.class.js

src/filters/blendimage_filter.class.js

src/filters/blur_filter.class.js

src/filters/brightness_filter.class.js

src/filters/colormatrix_filter.class.js

src/filters/composed_filter.class.js

src/filters/contrast_filter.class.js

src/filters/convolute_filter.class.js

src/filters/filter_boilerplate.js

src/filters/filter_generator.js

src/filters/gamma_filter.class.js

src/filters/grayscale_filter.class.js

src/filters/hue_rotation.class.js

src/filters/invert_filter.class.js

src/filters/noise_filter.class.js

src/filters/pixelate_filter.class.js

src/filters/removecolor_filter.class.js

src/filters/resize_filter.class.js

src/filters/saturate_filter.class.js

src/filters/vibrance_filter.class.js

src/filters/webgl_backend.class.js

src/globalFabric.js

src/gradient.class.js

src/intersection.class.js

src/log.js

src/mixins/animation.mixin.js

src/mixins/canvas_dataurl_exporter.mixin.js

src/mixins/canvas_events.mixin.js

src/mixins/canvas_gestures.mixin.js

src/mixins/canvas_grouping.mixin.js

src/mixins/canvas_serialization.mixin.js

src/mixins/collection.mixin.js

src/mixins/default_controls.js

src/mixins/eraser_brush.mixin.js

src/mixins/itext_behavior.mixin.js

src/mixins/itext_click_behavior.mixin.js

src/mixins/itext_key_behavior.mixin.js

src/mixins/itext.svg_export.js

src/mixins/object_geometry.mixin.js

src/mixins/object_interactivity.mixin.js

src/mixins/object_origin.mixin.js

src/mixins/object_stacking.mixin.js

src/mixins/object_straightening.mixin.js

src/mixins/object.svg_export.js

src/mixins/observable.mixin.js

src/mixins/shared_methods.mixin.js

src/mixins/stateful.mixin.js

src/mixins/text_style.mixin.js

src/parser.js

src/pattern.class.js

src/point.class.js

src/shadow.class.js

src/shapes/active_selection.class.js

src/shapes/circle.class.js

src/shapes/ellipse.class.js

src/shapes/group.class.js

src/shapes/image.class.js

src/shapes/itext.class.js

src/shapes/line.class.js

src/shapes/object.class.js

src/shapes/path.class.js

src/shapes/polygon.class.js

src/shapes/polyline.class.js

src/shapes/rect.class.js

src/shapes/text.class.js

src/shapes/textbox.class.js

src/shapes/triangle.class.js

src/static_canvas.class.js

src/util/anim_ease.js

src/util/animate_color.js

src/util/animate.js

src/util/dom_event.js

src/util/dom_misc.js

src/util/dom_request.js

src/util/dom_style.js

src/util/lang_array.js

src/util/lang_class.js

src/util/lang_object.js

src/util/lang_string.js

src/util/misc.js

src/util/named_accessors.mixin.js

src/util/path.js

.eslintrc_tests

Sorry, the diff of this file is not supported yet

CHANGELOG.md

Sorry, the diff of this file is too big to display

fabric - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics