Quick Start Guide

Get up and running with Fuderu in just a few minutes. This guide will walk you through creating your first drawing application using Fuderu with different frameworks.

Prerequisites

Basic knowledge of HTML, CSS, and JavaScript/TypeScript
Node.js 14+ installed (for framework examples)
Familiarity with your chosen framework (React, Vue, Svelte, or vanilla JS)

Option 1: Vanilla JavaScript/TypeScript

Step 1: Install Fuderu

npm install fuderu

Step 2: Create HTML File

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Fuderu Drawing App</title>
    <style>
      body {
        margin: 0;
        padding: 20px;
        background: #f5f5f5;
        font-family: sans-serif;
      }
      #drawing-container {
        max-width: 800px;
        margin: 0 auto;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        overflow: hidden;
      }
      .toolbar {
        padding: 15px;
        background: #f8f9fa;
        border-bottom: 1px solid #eee;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
      }
      .toolbar-group {
        display: flex;
        align-items: center;
        gap: 5px;
      }
      canvas {
        display: block;
        width: 100%;
        height: 600px;
        background: white;
      }
    </style>
  </head>
  <body>
    <div id="drawing-container">
      <div class="toolbar">
        <div class="toolbar-group">
          <label for="color-picker">Color:</label>
          <input type="color" id="color-picker" value="#ff0000" />
        </div>
        <div class="toolbar-group">
          <label for="size-slider">Size:</label>
          <input type="range" id="size-slider" min="1" max="50" value="10" />
          <span id="size-value">10px</span>
        </div>
        <div class="toolbar-group">
          <button id="clear-btn">Clear</button>
        </div>
        <div class="toolbar-group">
          <button id="undo-btn">Undo</button>
        </div>
        <div class="toolbar-group">
          <button id="redo-btn">Redo</button>
        </div>
      </div>
      <div>
        <canvas id="drawing-canvas" width="800" height="600"></canvas>
      </div>
    </div>

    <script type="module">
      import { Canvas } from "fuderu";

      const canvas = document.getElementById("drawing-canvas");
      const colorPicker = document.getElementById("color-picker");
      const sizeSlider = document.getElementById("size-slider");
      const sizeValue = document.getElementById("size-value");
      const clearBtn = document.getElementById("clear-btn");
      const undoBtn = document.getElementById("undo-btn");
      const redoBtn = document.getElementById("redo-btn");

      let painter = null;

      // Initialize Fuderu canvas
      function initCanvas() {
        if (!canvas) return;

        painter = new Canvas({
          canvas,
          document: {
            width: 800,
            height: 600,
          },
          brush: {
            color: colorPicker.value,
            size: parseInt(sizeSlider.value),
          },
        });
      }

      // Update brush color
      function updateColor() {
        if (painter) {
          painter.loadConfig({ color: colorPicker.value });
        }
      }

      // Update brush size
      function updateSize() {
        if (painter) {
          const size = parseInt(sizeSlider.value);
          painter.loadConfig({ size });
          sizeValue.textContent = `${size}px`;
        }
      }

      // Clear canvas
      function clearCanvas() {
        if (painter) {
          painter.clear();
        }
      }

      // Undo last action
      function undo() {
        if (painter) {
          painter.undo();
        }
      }

      // Redo last action
      function redo() {
        if (painter) {
          painter.redo();
        }
      }

      // Event listeners
      colorPicker.addEventListener("change", updateColor);
      sizeSlider.addEventListener("input", updateSize);
      clearBtn.addEventListener("click", clearCanvas);
      undoBtn.addEventListener("click", undo);
      redoBtn.addEventListener("click", redo);

      // Initialize
      initCanvas();
    </script>
  </body>
</html>

Option 2: React

Step 1: Install Dependencies

npm install fuderu

Step 2: Create Drawing Component

Create src/components/DrawingCanvas.jsx:

import { useEffect, useRef } from "react";
import { Canvas } from "fuderu";

function DrawingCanvas({ width = 800, height = 600 }) {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const painter = new Canvas({
      canvas,
      document: { width, height },
      brush: {
        color: "#ff0000",
        size: 10,
      },
    });

    // Cleanup on unmount
    return () => {
      if (painter) {
        painter.destroy();
      }
    };
  }, [width, height]);

  return <canvas ref={canvasRef} width={width} height={height} />;
}

export default DrawingCanvas;

Step 3: Use the Component

import React from "react";
import DrawingCanvas from "./components/DrawingCanvas";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Fuderu Drawing App</h1>
      </header>
      <div className="drawing-container">
        <DrawingCanvas width={800} height={600} />
      </div>
    </div>
  );
}

export default App;

Option 3: Vue 3

Step 1: Install Dependencies

npm install fuderu

Step 2: Create Drawing Component

Create src/components/DrawingCanvas.vue:

<template>
  <canvas ref="canvas" width="800" height="600"></canvas>
</template>

<script>
import { onMounted, onUnmounted, ref } from "vue";
import { Canvas } from "fuderu";

export default {
  name: "DrawingCanvas",
  setup() {
    const canvas = ref(null);
    let painter = null;

    onMounted(() => {
      if (!canvas.value) return;

      painter = new Canvas({
        canvas: canvas.value,
        document: {
          width: 800,
          height: 600,
        },
        brush: {
          color: "#ff0000",
          size: 10,
        },
      });
    });

    onUnmounted(() => {
      if (painter) {
        painter.destroy();
      }
    });

    return {
      canvas,
    };
  },
};
</script>

<style scoped>
canvas {
  display: block;
  background: white;
}
</style>

Step 3: Use the Component

In your App.vue or page component:

<template>
  <div>
    <h1>Fuderu Drawing App</h1>
    <DrawingCanvas />
  </div>
</template>

<script>
import DrawingCanvas from "./components/DrawingCanvas.vue";

export default {
  name: "App",
  components: {
    DrawingCanvas,
  },
};
</script>

Option 4: Svelte

Step 1: Install Dependencies

npm install fuderu

Step 2: Create Drawing Component

Create src/lib/DrawingCanvas.svelte:

<script>
  import { onMount, onDestroy } from 'svelte';
  import { Canvas } from 'fuderu';

  let canvas;
  let painter = null;

  onMount(() => {
    if (!canvas) return;

    painter = new Canvas({
      canvas,
      document: {
        width: 800,
        height: 600
      },
      brush: {
        color: '#ff0000',
        size: 10
      }
    });
  });

  onDestroy(() => {
    if (painter) {
      painter.destroy();
      painter = null;
    }
  });
</script>

<canvas bind:this={canvas} width="800" height="600" />

Step 3: Use the Component

Modify src/routes/+page.svelte:

<script>
  import DrawingCanvas from '../lib/DrawingCanvas.svelte';
</script>

<svelte:head>
  <title>Fuderu Drawing App</title>
</svelte:head>

<div class="container">
  <h1>Fuderu Drawing App</h1>
  <div class="drawing-container">
    <DrawingCanvas />
  </div>
</div>

<style>
  .container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
  }

  .drawing-container {
    margin-top: 20px;
  }
</style>

Step 4: Run the Application

npm run dev

Next Steps

Now that you have a basic drawing application running, consider exploring these features:

Brush Configuration - Customize brush behavior for different effects
Modules - Add special effects like texture, jitter, and patterns
Image Brushes - Use custom images as brush tips
Layer System - Learn how to create complex drawings with multiple layers
React Integration - Learn advanced patterns for React apps
Performance Optimization - Ensure your application runs smoothly on all devices

Common Issues and Solutions

"Canvas is not defined" Error

Make sure you're running your code in a browser environment. Fuderu requires the HTML Canvas API and won't work in Node.js without a canvas implementation like canvas.

Nothing Appears on Canvas

Check that your canvas element has explicit width and height attributes (not just CSS)
Verify that you've successfully created a Canvas instance
Ensure you're calling methods on the correct painter instance

Poor Performance

Reduce your canvas size if it's unnecessarily large
Consider disabling expensive features like complex patterns or high-density scattering
Use the performance profiling tips in our Performance Guide

Events Not Working

Make sure you're attaching event listeners to the correct element
Check if another element is covering your canvas (z-index issues)
Verify that you're not preventing default behavior unnecessarily

Where to Go Next

Try the interactive editor or revisit the Layer System guide for more advanced workflows.

Join our Discord community to ask questions, share your creations, and get help from other developers.

Happy drawing! 🎨

Prerequisites​

Option 1: Vanilla JavaScript/TypeScript​

Step 1: Install Fuderu​

Step 2: Create HTML File​

Option 2: React​

Step 1: Install Dependencies​

Step 2: Create Drawing Component​

Step 3: Use the Component​

Option 3: Vue 3​

Step 1: Install Dependencies​

Step 2: Create Drawing Component​

Step 3: Use the Component​

Option 4: Svelte​

Step 1: Install Dependencies​

Step 2: Create Drawing Component​

Step 3: Use the Component​

Step 4: Run the Application​

Next Steps​

Common Issues and Solutions​

"Canvas is not defined" Error​

Nothing Appears on Canvas​

Poor Performance​

Events Not Working​

Where to Go Next​

Prerequisites

Option 1: Vanilla JavaScript/TypeScript

Step 1: Install Fuderu

Step 2: Create HTML File

Option 2: React

Step 1: Install Dependencies

Step 2: Create Drawing Component

Step 3: Use the Component

Option 3: Vue 3

Step 1: Install Dependencies

Step 2: Create Drawing Component

Step 3: Use the Component

Option 4: Svelte

Step 1: Install Dependencies

Step 2: Create Drawing Component

Step 3: Use the Component

Step 4: Run the Application

Next Steps

Common Issues and Solutions

"Canvas is not defined" Error

Nothing Appears on Canvas

Poor Performance

Events Not Working

Where to Go Next