Fuderu

A stable 1.0.0 canvas drawing engine for the web

Framework-AgnosticTypeScript-FirstProfessional Brush EngineLayer System

Try Fuderu in the browser

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

Loading demo…

ColorSizeSpacing

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.0.0 is the stable baseline for the library’s core workflow: dependable brush rendering, a layer-based compositing model, and a focused API that is ready for real projects.

🎨 Focused on Drawing Excellence

Unlike general-purpose canvas libraries, Fuderu specializes in brush stroke rendering with sophisticated features like:

✨ 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!