# fabricjs/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/fabricjs-fabric-js).**

30,941 stars · 3,623 forks · TypeScript · mit

## Links

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

## Description

Fabric.js is a library for working with HTML5 canvas elements. It provides an object model that allows developers to manipulate canvas content as interactive objects rather than raw pixels.

The library enables the creation and modification of shapes, images, and text directly on the canvas. It includes built-in support for object selection, transformation, and grouping, allowing for complex compositions within a browser-based drawing environment.

The project includes a comprehensive set of tools for handling events, animations, and serialization of canvas states. It is distributed as a standalone package and is documented through a collection of guides and API references.

## Tags

### User Interface & Experience

- [Canvas Object Models](https://awesome-repositories.com/f/user-interface-experience/canvas-object-models.md) — Provides a programmable interface for managing and manipulating graphical elements through an object-oriented hierarchy.
- [Retained Mode Graphics Engines](https://awesome-repositories.com/f/user-interface-experience/retained-mode-graphics-engines.md) — Maintains a persistent state of visual objects to simplify updates and event handling.
- [Canvas Abstractions](https://awesome-repositories.com/f/user-interface-experience/canvas-abstractions.md) — Wraps low-level drawing primitives into stateful objects that maintain their own properties and event listeners.
- [Interactive Graphics](https://awesome-repositories.com/f/user-interface-experience/interactive-graphics.md) — Builds complex visual interfaces where users can manipulate, drag, and transform individual objects.
- [Interactive Graphics Libraries](https://awesome-repositories.com/f/user-interface-experience/interactive-graphics-libraries.md) — Provides tools for building complex user interfaces that respond to mouse and touch events.
- [Event-Driven UI Frameworks](https://awesome-repositories.com/f/user-interface-experience/event-driven-ui-frameworks.md) — Decouples application logic from visual elements by using a messaging system to respond to interactions.
- [Rendering Loops](https://awesome-repositories.com/f/user-interface-experience/rendering-loops.md) — Translates a persistent object graph into a sequence of drawing commands executed every frame.
- [Rendering Optimizers](https://awesome-repositories.com/f/user-interface-experience/rendering-optimizers.md) — Improves frame rates by caching complex visual elements to reduce computational load.
- [Canvas Caching](https://awesome-repositories.com/f/user-interface-experience/canvas-caching.md) — Renders complex object groups to hidden bitmap buffers to minimize expensive redraw operations.
- [Performance Optimizers](https://awesome-repositories.com/f/user-interface-experience/performance-optimizers.md) — Provides mechanisms for improving rendering speed by caching complex visual elements.
- [Visual Caching](https://awesome-repositories.com/f/user-interface-experience/visual-caching.md) — Stores complex visual elements as static images on an offscreen surface to reduce computational cost. ([source](http://fabricjs.com/docs/fabric-object-caching/))
- [Interaction Listeners](https://awesome-repositories.com/f/user-interface-experience/interaction-listeners.md) — Subscribes to specific event names on visual elements to trigger custom application logic. ([source](http://fabricjs.com/docs/events/))
- [Transformation Matrices](https://awesome-repositories.com/f/user-interface-experience/transformation-matrices.md) — Calculates nested coordinate systems by multiplying individual object matrices to handle complex positioning.
- [Custom Components](https://awesome-repositories.com/f/user-interface-experience/custom-components.md) — Extends standard drawing primitives with specialized logic to create unique interactive components.
- [Custom Event Systems](https://awesome-repositories.com/f/user-interface-experience/custom-event-systems.md) — Triggers and listens to events on visual elements to decouple application logic. ([source](http://fabricjs.com/docs/events/))

### Software Engineering & Architecture

- [Event Buses](https://awesome-repositories.com/f/software-engineering-architecture/event-buses.md) — Provides a centralized observer pattern to propagate state changes across the application logic.