Skip to main content

Installation

Current package version: 0.8.7.

Install Fuderu from npm:

npm install fuderu

Fuderu ships ESM, UMD, and TypeScript declarations from the dist directory.

import { Canvas, Brush } from "fuderu";

Browser Requirements​

Fuderu targets browser environments with:

  • HTMLCanvasElement
  • CanvasRenderingContext2D
  • pointer events
  • requestAnimationFrame

The library is framework-agnostic. You can use it from vanilla TypeScript, React, Next.js client components, Vue, Svelte, or any other browser UI layer.

Canvas Sizing​

The Canvas wrapper separates the visible CSS size from the logical drawing buffer.

Give the canvas a real CSS size before constructing Canvas:

<canvas id="paint" style="width: 800px; height: 500px"></canvas>
import { Canvas } from "fuderu";

const painter = new Canvas({
  canvas: "#paint",
});

When document is omitted, Fuderu reads the element's layout size and sets the internal canvas buffer to width * window.devicePixelRatio by height * window.devicePixelRatio.

For a fixed drawing resolution, pass document:

const painter = new Canvas({
  canvas: "#paint",
  document: {
    width: 1536,
    height: 1536,
  },
});

Changing the canvas element's CSS size is still your app's responsibility.