# kangax/fabric.js

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/kangax-fabric-js).**

31,236 stars · 3,626 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/kangax/fabric.js
- Homepage: http://fabricjs.com
- awesome-repositories: https://awesome-repositories.com/repository/kangax-fabric-js.md

## Description

Fabric.js is an HTML5 canvas library and interactive vector graphics engine. It provides an object-oriented model for creating, manipulating, and animating 2D shapes and interactive graphics on a web page.

The project functions as an SVG to canvas parser, translating SVG data into interactive canvas objects and exporting canvas states back into SVG format. It also serves as a canvas image processing tool for applying filters, gradients, patterns, and brush strokes to visual elements.

The library covers programmatic vector manipulation, including the ability to scale, rotate, skew, and group 2D elements. It supports canvas data serialization and export to formats including JSON, JPG, PNG, and SVG.

## Tags

### User Interface & Experience

- [Interactive Graphics](https://awesome-repositories.com/f/user-interface-experience/interactive-graphics.md) — Provides a comprehensive framework for building interactive 2D graphics that support direct manipulation of visual objects. ([source](https://github.com/kangax/fabric.js#readme))
- [Retained Mode Graphics Engines](https://awesome-repositories.com/f/user-interface-experience/retained-mode-graphics-engines.md) — Employs a retained-mode architecture that stores visual object states in memory for efficient updating and redrawing.
- [Coordinate Space Mappers](https://awesome-repositories.com/f/user-interface-experience/coordinate-systems/coordinate-converters/coordinate-space-mappers.md) — Implements transformation matrices to map local object coordinates to the global canvas space for accurate positioning and scaling.
- [Canvas-Based Image Editors](https://awesome-repositories.com/f/user-interface-experience/ui-components/image-view-components/image-manipulation-tools/raw-image-data-manipulators/canvas-based-image-editors.md) — Provides tools for non-destructive image transformations, including filters and gradients, via the browser canvas API.

### Part of an Awesome List

- [Canvas Libraries](https://awesome-repositories.com/f/awesome-lists/devtools/canvas-libraries.md) — Serves as a comprehensive JavaScript library for creating and animating 2D graphics on HTML5 canvas elements.
- [Format Converters](https://awesome-repositories.com/f/awesome-lists/devtools/graphics-and-svg/format-converters.md) — Enables parsing of SVG data into canvas objects and exporting canvas states back into SVG format. ([source](https://github.com/kangax/fabric.js#readme))
- [JSON and Serialization](https://awesome-repositories.com/f/awesome-lists/data/json-and-serialization.md) — Implements serialization mechanisms to save and load canvas states using JSON and various image formats.
- [Game Engines](https://awesome-repositories.com/f/awesome-lists/devtools/game-engines.md) — Canvas library with SVG parsing capabilities.
- [Graphic Libraries](https://awesome-repositories.com/f/awesome-lists/devtools/graphic-libraries.md) — Canvas library for object-oriented graphics.

### Data & Databases

- [SVG Primitive Converters](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/visualization-frameworks-libraries/svg-diagramming-libraries/svg-primitive-converters.md) — Translates SVG primitive shapes into canvas objects for interactive rendering and manipulation. ([source](https://github.com/kangax/fabric.js#readme))
- [Canvas State Serialization](https://awesome-repositories.com/f/data-databases/json-serialization-libraries/canvas-state-serialization.md) — Provides the ability to save and restore the entire canvas layout using structured JSON serialization.
- [Canvas Data Exports](https://awesome-repositories.com/f/data-databases/data-import-and-export/canvas-data-exports.md) — Supports exporting canvas content to JPG, PNG, JSON, and SVG formats to preserve visual data. ([source](https://github.com/kangax/fabric.js#readme))

### Graphics & Multimedia

- [Dynamic Vector Graphics](https://awesome-repositories.com/f/graphics-multimedia/graphics-and-media/dynamic-vector-graphics.md) — Enables programmatic scaling, rotation, and grouping of 2D vector elements for dynamic layout creation.
- [Vector Graphics Editors](https://awesome-repositories.com/f/graphics-multimedia/graphics-and-media/vector-graphics-editors.md) — Provides a programmatic object model for creating and manipulating interactive vector-based graphics. ([source](https://github.com/kangax/fabric.js#readme))
- [Scene Graphs](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/scene-management-systems/scene-graphs.md) — Maintains a hierarchical scene graph of shapes and groups to manage spatial transformations and properties.
- [SVG and Canvas Converters](https://awesome-repositories.com/f/graphics-multimedia/svg-and-canvas-converters.md) — Provides a bidirectional parser that translates SVG data into interactive canvas objects and exports canvas states back to SVG.
- [SVG Parsers](https://awesome-repositories.com/f/graphics-multimedia/svg-parsers.md) — Translates XML-based SVG data into internal JavaScript objects for interactive manipulation on the canvas.
- [Drawing Layers](https://awesome-repositories.com/f/graphics-multimedia/graphics-and-media/shape-drawing/drawing-layers.md) — Manages the visual depth and overlapping of graphics using a layered rendering system.
- [Canvas Filters](https://awesome-repositories.com/f/graphics-multimedia/media-production-suites/visual-effects/canvas-filters.md) — Provides pixel-based image processing and rendering effects, including filters, gradients, and custom brush strokes. ([source](https://github.com/kangax/fabric.js#readme))

### Software Engineering & Architecture

- [Canvas Integration](https://awesome-repositories.com/f/software-engineering-architecture/runtime-path-resolvers/path-normalizers/svg/canvas-integration.md) — Converts SVG data into interactive canvas elements and exports those states back into SVG.