fabricjs/fabric.js

Fabric.js is a JavaScript/TypeScript library that makes it straightforward to draw, manipulate, and animate objects on an HTML5 canvas element. The problem it solves is that working directly with the browser's native canvas API is verbose and low-level, you have to manually track object positions, redraw everything on each frame, and implement hit-detection yourself. Fabric.js wraps all of that complexity into a friendly object model where shapes, images, and text become interactive items you can move, resize, rotate, skew, and group with just a few lines of code. Under the hood, the library maintains an internal scene graph, a list of drawable objects, and handles rendering, event propagation, and state management on your behalf. When a user clicks and drags a rectangle on the canvas, Fabric.js detects which object was hit, tracks the pointer movement, updates the object's position, and redraws the scene automatically. It also includes a bidirectional SVG parser, meaning you can import SVG files onto a canvas and export a canvas scene back to SVG format. Filters, gradients, patterns, and brush tools for freehand drawing are all built in. You would reach for Fabric.js when building anything that requires a rich interactive drawing surface in the browser: image editors, whiteboard collaboration tools, design apps, signature pads, floor-plan editors, or data-visualization canvases where elements need to be dragged and resized. It works in all modern browsers and also runs on Node.js via node-canvas, which means you can generate canvas images server-side, useful for automated thumbnail creation or PDF generation. The library is written in TypeScript, ships as an npm package, and can be loaded via a CDN script tag for plain HTML pages or imported as an ES module in React, Vue, or any bundler-based project.