Skip to main content

Fuderu

Stable 1.4.0 canvas drawing engine for the web

Framework-AgnosticTypeScript-FirstBrush EngineAction Replay StreamLayer System & Alpha LockDocument Persistence API
Try Fuderu in the browser

Draw directly on the demo canvas and explore pressure-aware brush rendering and layer management.

Loading demo…

What Makes Fuderu Special?​

Fuderu is designed for developers who want to build beautiful drawing experiences without the complexity of heavy graphics libraries. Whether you're building a simple sketch pad, a professional annotation tool, or a creative art application, Fuderu gives you the building blocks you need.

Fuderu 1.4.0 expands beyond brush rendering into a complete, production-ready canvas architecture: featuring a serializable Operation Log & Action Replay stream API (action:record, stroke:record, replay), first-class document persistence, layer-level Alpha Lock and Layer Lock, native scanline flood fill, shape primitives, raster text, pointer ID gesture safety, and typed state event subscriptions.

🎨 Key Capabilities​

Unlike general-purpose canvas libraries, Fuderu combines a standalone brush engine with a full layer compositing stack and document state system:

📄 Document Persistence API​

Export and import complete canvas state as versioned JSON containing dimensions, layer metadata, active selections, and serialized image data (exportDocument, importDocument), or export flattened PNG composition renders (exportPNG).

🔒 Advanced Layer Stack & Alpha Lock​

16 blend modes, opacity, visibility, layer reordering, Alpha Lock (restricting drawing/filling to existing non-transparent pixels), and Layer Lock (protecting layers against accidental edits or deletions).

🪣 Native Raster Operations & Shapes​

Built-in scanline flood fill (floodFill), vector shape primitives (drawRectangle, drawEllipse, drawLine), raster text rendering (drawText), and pixel color sampling (getColorAt).

⚡ Reactive Event System & Timeline History​

Subscribe to typed state events (change, stroke:start, stroke:end, layer:change, history:change) with getSnapshot(), and navigate history timeline directly with canvas.history.goTo(index) or sparse memory patches.

✨ Smooth Interpolation​

Natural-looking strokes that connect points intelligently, eliminating jagged lines. Fuderu uses advanced Bezier curve algorithms to ensure your drawings look professional and fluid, regardless of drawing speed.

⚡ Adaptive Spacing​

Automatically adjusts brush stamp density for consistent texture at any drawing speed. Whether you're making slow, precise lines or quick, gestural strokes, the texture remains uniform.

🖱️ Pressure Sensitivity​

Real pen pressure support with intelligent mouse/touch simulation. Fidelity to your input device creates natural variations in line weight and opacity that feel authentic to traditional media.

🖼️ Image Brushes​

Use PNG/WebP stamps as brush tips with recoloring and rotation capabilities. Turn any image into a custom brush for stamps, textures, or special effects.

📚 Professional Layers​

Non-destructive editing with blend modes, opacity control, and layer management. Work like a pro with the ability to experiment without permanently altering your artwork.

🔧 Runtime Configuration​

Change brush properties on the fly without recreating objects. Adjust size, color, opacity, and more mid-stroke for dynamic creative control.

🔩 Module System​

Extend brush behavior with size jitter, scatter, transparency effects, and patterns. Create unique brushes that respond to pressure, velocity, or randomization for natural media simulation.

🧩 Built for Integration​

Fuderu is deliberately framework-agnostic - use it with:

  • ⚛️ React
  • 💙 Vue
  • 💚 Svelte
  • 🌐 Vanilla JS/TS
  • ⚡ Next.js
  • 📄 Plain HTML

What You'll Learn​

This documentation is organized around the core experience that matters most for a first stable release:

  1. Create a canvas with the Canvas wrapper
  2. Work with layers for non-destructive composition and blend modes
  3. Tune brush behavior for pressure, spacing, and stroke dynamics
  4. Extend the experience with built-in modules when needed

Getting Started in 60 Seconds​

Here's the fastest way to see Fuderu in action:

npm install fuderu
<canvas id="my-canvas" style="width: 600px; height: 400px"></canvas>
import { Canvas } from "fuderu";

const painter = new Canvas({
  canvas: "#my-canvas",
  document: {
    width: 1200,
    height: 800,
  },
  brush: {
    color: "#2563eb",
    size: 24,
    spacing: 0.25,
  },
});

// Start drawing immediately!
// Try changing colors, sizes, or try the eraser mode
painter.loadConfig({
  color: "#dc2626",
  size: 12,
});

💡 Tip: Try pressing harder with your stylus (or moving your mouse faster/slower) to see pressure sensitivity in action!

Ready to Dive In?​

Start with our Quick Start tutorial to build your first drawing application, or jump straight to the feature that interests you most:

  • Canvas API - High-level wrapper with built-in event handling
  • Brush API - Low-level brush engine for custom integrations
  • Layer System - Professional non-destructive editing
  • Image Brushes - Stamp with custom textures
  • Modules - Add special effects to your brushes

🚀 Let's Get Started!

Head over to the Quick Start guide to build your first drawing application in just minutes!