A Drawing WebApp

Chromium-based browsers only. FreeHands was developed and tested exclusively on Chromium-based browsers (Chrome, Edge, Brave). Firefox may exhibit visual inconsistencies in Canvas rendering, globalCompositeOperation compositing, CSS filters, and custom scrollbars. A Chromium browser is strongly recommended.

Try FreeHands Live

---

Features

Drawing Tools — Pressure-sensitive brush (PressureBrush) with real pointer pressure support, stabilized pencil (), and geometric eraser () with boolean pixel destruction.

Fill — Flood Fill with configurable tolerance, operating directly on raw ImageData via BFS traversal.

Shapes & Text — Rectangle, Ellipse (), Line (), and a full IText editor () with font, size, spacing, and style controls.

Selection & Alignment — Free-select with a floating SelectionPanel for align/distribute operations, magnetic snap guides via AlignmentGuides rendered on Fabric's contextTop.

Layers — Dynamic layer stack with opacity, blend modes (multiply, screen, overlay, etc.), visibility, lock, drag-to-reorder, duplicate, merge-down, and delete.

Undo / Redo — Command Pattern history with atomic operations (add, remove, modify, raster, layer). Periodic snapshots every 15 commands for fast rewind.

Cut / Copy / Paste — CutAreaManager for region-based selection and pixel extraction. Native Fabric clipboard for object-level copy/paste/duplicate (Ctrl+C/V/X/D).

Filters & Effects — Per-selection Fabric.js image filters (brightness, contrast, blur, hue, sepia). Per-layer effects via EffectManager (shadow, noise, color overlay).

Canvas Textures — Procedurally generated backgrounds (plain, parchment, kraft, grid) cached and applied silently without entering the undo history.

---

How It Works

FreeHands uses a Manager-based architecture in Vanilla JS. Each subsystem is an encapsulated class that communicates via direct object references held by the central CanvasManager. No event bus, no framework reactivity.

The rendering pipeline overrides Fabric.js's internal _renderObjects to composite each layer onto an offscreen layerCanvas with its own globalAlpha and globalCompositeOperation before drawing to the main context. The brush engine combines the perfect-freehand library for stroke geometry with fabric.Path for vector storage, committing to the canvas and history only on mouseup.

See docs/ARCHITECTURE.md for the full technical breakdown.

---

Setup

git clone https://github.com/jm-works/FreeHands.git
cd FreeHands
# Open index.html in Chrome, Edge, or Brave

No npm install. No build step. Fabric.js is loaded via CDN.

---

Project Docs

Document	Description
docs/ARCHITECTURE.md	System design, module graph, communication model
docs/MODULES.md	Per-module API and responsibilities
docs/HISTORY_SYSTEM.md	Command Pattern internals, op types, undo/redo flow
docs/CANVAS_RENDER.md	Layer compositing pipeline, offscreen rendering
docs/CONTRIBUTING.md	Contribution guidelines and code conventions
Documentação Técnica (PT-BR)	Documentação técnica completa em português

---

_{Parts of the codebase underwent AI-assisted technical review for bug identification and targeted corrections. Architecture, design, and implementation are original authorial work.}