1"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["6273"],{3393(n,e,t){t.r(e),t.d(e,{metadata:()=>i,default:()=>p,frontMatter:()=>s,contentTitle:()=>l,toc:()=>d,assets:()=>o});var i=JSON.parse('{"id":"getting-started/quick-start","title":"Quick Start","description":"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.","source":"@site/docs/getting-started/quick-start.mdx","sourceDirName":"getting-started","slug":"/getting-started/quick-start","permalink":"/docs/getting-started/quick-start","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":2,"frontMatter":{"sidebar_position":2,"title":"Quick Start"},"sidebar":"docsSidebar","previous":{"title":"Installation","permalink":"/docs/getting-started/installation"},"next":{"title":"The Mental Model","permalink":"/docs/getting-started/mental-model"}}'),a=t(4848),r=t(8453);let s={sidebar_position:2,title:"Quick Start"},l="Quick Start Guide",o={},d=[{value:"Prerequisites",id:"prerequisites",level:2},{value:"Option 1: Vanilla JavaScript/TypeScript",id:"option-1-vanilla-javascripttypescript",level:2},{value:"Step 1: Install Fuderu",id:"step-1-install-fuderu",level:3},{value:"Step 2: Create HTML File",id:"step-2-create-html-file",level:3},{value:"Option 2: React",id:"option-2-react",level:2},{value:"Step 1: Install Dependencies",id:"step-1-install-dependencies",level:3},{value:"Step 2: Create Drawing Component",id:"step-2-create-drawing-component",level:3},{value:"Step 3: Use the Component",id:"step-3-use-the-component",level:3},{value:"Option 3: Vue 3",id:"option-3-vue-3",level:2},{value:"Step 1: Install Dependencies",id:"step-1-install-dependencies-1",level:3},{value:"Step 2: Create Drawing Component",id:"step-2-create-drawing-component-1",level:3},{value:"Step 3: Use the Component",id:"step-3-use-the-component-1",level:3},{value:"Option 4: Svelte",id:"option-4-svelte",level:2},{value:"Step 1: Install Dependencies",id:"step-1-install-dependencies-2",level:3},{value:"Step 2: Create Drawing Component",id:"step-2-create-drawing-component-2",level:3},{value:"Step 3: Use the Component",id:"step-3-use-the-component-2",level:3},{value:"Step 4: Run the Application",id:"step-4-run-the-application",level:3},{value:"Next Steps",id:"next-steps",level:2},{value:"Common Issues and Solutions",id:"common-issues-and-solutions",level:2},{value:""Canvas is not defined" Error",id:"canvas-is-not-defined-error",level:3},{value:"Nothing Appears on Canvas",id:"nothing-appears-on-canvas",level:3},{value:"Poor Performance",id:"poor-performance",level:3},{value:"Events Not Working",id:"events-not-working",level:3}];function c(n){let e={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.R)(),...n.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.header,{children:(0,a.jsx)(e.h1,{id:"quick-start-guide",children:"Quick Start Guide"})}),"\n",(0,a.jsx)(e.p,{children:"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."}),"\n",(0,a.jsx)(e.h2,{id:"prerequisites",children:"Prerequisites"}),"\n",(0,a.jsxs)(e.ul,{children:["\n",(0,a.jsx)(e.li,{children:"Basic knowledge of HTML, CSS, and JavaScript/TypeScript"}),"\n",(0,a.jsx)(e.li,{children:"Node.js 14+ installed (for framework examples)"}),"\n",(0,a.jsx)(e.li,{children:"Familiarity with your chosen framework (React, Vue, Svelte, or vanilla JS)"}),"\n"]}),"\n",(0,a.jsx)(e.h2,{id:"option-1-vanilla-javascripttypescript",children:"Option 1: Vanilla JavaScript/TypeScript"}),"\n",(0,a.jsx)(e.h3,{id:"step-1-install-fuderu",children:"Step 1: Install Fuderu"}),"\n",(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-bash",children:"npm install fuderu\n"})}),"\n",(0,a.jsx)(e.h3,{id:"step-2-create-html-file",children:"Step 2: Create HTML File"}),"\n",(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-html",children:'<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <title>Fuderu Drawing App</title>\n <style>\n body {\n margin: 0;\n padding: 20px;\n background: #f5f5f5;\n font-family: sans-serif;\n }\n #drawing-container {\n max-width: 800px;\n margin: 0 auto;\n background: white;\n border-radius: 8px;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n }\n .toolbar {\n padding: 15px;\n background: #f8f9fa;\n border-bottom: 1px solid #eee;\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n }\n .toolbar-group {\n display: flex;\n align-items: center;\n gap: 5px;\n }\n canvas {\n display: block;\n width: 100%;\n height: 600px;\n background: white;\n }\n </style>\n </head>\n <body>\n <div id="drawing-container">\n <div class="toolbar">\n <div class="toolbar-group">\n <label for="color-picker">Color:</label>\n <input type="color" id="color-picker" value="#ff0000" />\n </div>\n <div class="toolbar-group">\n <label for="size-slider">Size:</label>\n <input type="range" id="size-slider" min="1" max="50" value="10" />
1\n <span id="size-value">10px</span>\n </div>\n <div class="toolbar-group">\n <button id="clear-btn">Clear</button>\n </div>\n <div class="toolbar-group">\n <button id="undo-btn">Undo</button>\n </div>\n <div class="toolbar-group">\n <button id="redo-btn">Redo</button>\n </div>\n </div>\n <div>\n <canvas id="drawing-canvas" width="800" height="600"></canvas>\n </div>\n </div>\n\n <script type="module">\n import { Canvas } from "fuderu";\n\n const canvas = document.getElementById("drawing-canvas");\n const colorPicker = document.getElementById("color-picker");\n const sizeSlider = document.getElementById("size-slider");\n const sizeValue = document.getElementById("size-value");\n const clearBtn = document.getElementById("clear-btn");\n const undoBtn = document.getElementById("undo-btn");\n const redoBtn = document.getElementById("redo-btn");\n\n let painter = null;\n\n // Initialize Fuderu canvas\n function initCanvas() {\n if (!canvas) return;\n\n painter = new Canvas({\n canvas,\n document: {\n width: 800,\n height: 600,\n },\n brush: {\n color: colorPicker.value,\n size: parseInt(sizeSlider.value),\n },\n });\n }\n\n // Update brush color\n function updateColor() {\n if (painter) {\n painter.loadConfig({ color: colorPicker.value });\n }\n }\n\n // Update brush size\n function updateSize() {\n if (painter) {\n const size = parseInt(sizeSlider.value);\n painter.loadConfig({ size });\n sizeValue.textContent = `${size}px`;\n }\n }\n\n // Clear canvas\n function clearCanvas() {\n if (painter) {\n painter.clear();\n }\n }\n\n // Undo last action\n function undo() {\n if (painter) {\n painter.undo();\n }\n }\n\n // Redo last action\n function redo() {\n if (painter) {\n painter.redo();\n }\n }\n\n // Event listeners\n colorPicker.addEventListener("change", updateColor);\n sizeSlider.addEventListener("input", updateSize);\n clearBtn.addEventListener("click", clearCanvas);\n undoBtn.addEventListener("click", undo);\n redoBtn.addEventListener("click", redo);\n\n // Initialize\n initCanvas();\n <\/script>\n </body>\n</html>\n'})}),"\n",(0,a.jsx)(e.h2,{id:"option-2-react",children:"Option 2: React"}),"\n",(0,a.jsx)(e.h3,{id:"step-1-install-dependencies",children:"Step 1: Install Dependencies"}),"\n",(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-bash",children:"npm install fuderu\n"})}),"\n",(0,a.jsx)(e.h3,{id:"step-2-create-drawing-component",children:"Step 2: Create Drawing Component"}),"\n",(0,a.jsxs)(e.p,{children:["Create ",(0,a.jsx)(e.code,{children:"src/components/DrawingCanvas.jsx"}),":"]}),"\n",(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-jsx",children:'import { useEffect, useRef } from "react";\nimport { Canvas } from "fuderu";\n\nfunction DrawingCanvas({ width = 800, height = 600 }) {\n const canvasRef = useRef(null);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n\n const painter = new Canvas({\n canvas,\n document: { width, height },\n brush: {\n color: "#ff0000",\n size: 10,\n },\n });\n\n // Cleanup on unmount\n return () => {\n if (painter) {\n painter.destroy();\n }\n };\n }, [width, height]);\n\n return <canvas ref={canvasRef} width={width} height={height} />;\n}\n\nexport default DrawingCanvas;\n'})}),"\n",(0,a.jsx)(e.h3,{id:"step-3-use-the-component",children:"Step 3: Use the Component"}),"\n",(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-jsx",children:'import React from "react";\nimport DrawingCanvas from "./components/DrawingCanvas";\n\nfunction App() {\n return (\n <div className="App">\n <header className="App-header">\n <h1>Fuderu Drawing App</h1>\n </header>\n <div className="drawing-container">\n <DrawingCanvas width={800} height={600} />\n </div>\n </div>\n );\n}\n\nexport default App;\n'})}),"\n",(0,a.jsx)(e.h2,{id:"option-3-vue-3",children:"Option 3: Vue 3"}),"\n",(0,a.jsx)(e.h3,{id:"step-1-install-dependencies-1",children:"Step 1: Install Dependencies"}),"\n",(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-bash",children:"npm install fuderu\n"})}),"\n",(0,a.jsx)(e.h3,{id:"step-2-create-drawing-component-1",children:"Step 2: Create Drawing Component"}),"\n",(0,a.jsxs)(e.p,{children:["Create ",(0,a.jsx)(e.code,{children:"src/components/DrawingCanvas.vue"}),":"]}),"\n",(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-vue",children:'<template>\n <canvas ref="canvas" width="800" height="600"></canvas>\n</template>\n\n<script>\nimport { onMounted, onUnmounted, ref } from "vue";\nimport { Canvas } from "fuderu";
1\n\nexport default {\n name: "DrawingCanvas",\n setup() {\n const canvas = ref(null);\n let painter = null;\n\n onMounted(() => {\n if (!canvas.value) return;\n\n painter = new Canvas({\n canvas: canvas.value,\n document: {\n width: 800,\n height: 600,\n },\n brush: {\n color: "#ff0000",\n size: 10,\n },\n });\n });\n\n onUnmounted(() => {\n if (painter) {\n painter.destroy();\n }\n });\n\n return {\n canvas,\n };\n },\n};\n<\/script>\n\n<style scoped>\ncanvas {\n display: block;\n background: white;\n}\n</style>\n'})}),"\n",(0,a.jsx)(e.h3,{id:"step-3-use-the-component-1",children:"Step 3: Use the Component"}),"\n",(0,a.jsxs)(e.p,{children:["In your ",(0,a.jsx)(e.code,{children:"App.vue"})," or page component:"]}),"\n",(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-vue",children:'<template>\n <div>\n <h1>Fuderu Drawing App</h1>\n <DrawingCanvas />\n </div>\n</template>\n\n<script>\nimport DrawingCanvas from "./components/DrawingCanvas.vue";\n\nexport default {\n name: "App",\n components: {\n DrawingCanvas,\n },\n};\n<\/script>\n'})}),"\n",(0,a.jsx)(e.h2,{id:"option-4-svelte",children:"Option 4: Svelte"}),"\n",(0,a.jsx)(e.h3,{id:"step-1-install-dependencies-2",children:"Step 1: Install Dependencies"}),"\n",(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-bash",children:"npm install fuderu\n"})}),"\n",(0,a.jsx)(e.h3,{id:"step-2-create-drawing-component-2",children:"Step 2: Create Drawing Component"}),"\n",(0,a.jsxs)(e.p,{children:["Create ",(0,a.jsx)(e.code,{children:"src/lib/DrawingCanvas.svelte"}),":"]}),"\n",(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-svelte",children:"<script>\n import { onMount, onDestroy } from 'svelte';\n import { Canvas } from 'fuderu';\n\n let canvas;\n let painter = null;\n\n onMount(() => {\n if (!canvas) return;\n\n painter = new Canvas({\n canvas,\n document: {\n width: 800,\n height: 600\n },\n brush: {\n color: '#ff0000',\n size: 10\n }\n });\n });\n\n onDestroy(() => {\n if (painter) {\n painter.destroy();\n painter = null;\n }\n });\n<\/script>\n\n<canvas bind:this={canvas} width=\"800\" height=\"600\" />\n"})}),"\n",(0,a.jsx)(e.h3,{id:"step-3-use-the-component-2",children:"Step 3: Use the Component"}),"\n",(0,a.jsxs)(e.p,{children:["Modify ",(0,a.jsx)(e.code,{children:"src/routes/+page.svelte"}),":"]}),"\n",(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-svelte",children:'<script>\n import DrawingCanvas from \'../lib/DrawingCanvas.svelte\';\n<\/script>\n\n<svelte:head>\n <title>Fuderu Drawing App</title>\n</svelte:head>\n\n<div class="container">\n <h1>Fuderu Drawing App</h1>\n <div class="drawing-container">\n <DrawingCanvas />\n </div>\n</div>\n\n<style>\n .container {\n max-width: 800px;\n margin: 0 auto;\n padding: 20px;\n text-align: center;\n }\n\n .drawing-container {\n margin-top: 20px;\n }\n</style>\n'})}),"\n",(0,a.jsx)(e.h3,{id:"step-4-run-the-application",children:"Step 4: Run the Application"}),"\n",(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-bash",children:"npm run dev\n"})}),"\n",(0,a.jsx)(e.h2,{id:"next-steps",children:"Next Steps"}),"\n",(0,a.jsx)(e.p,{children:"Now that you have a basic drawing application running, explore Fuderu's full capabilities:"}),"\n",(0,a.jsxs)(e.ol,{children:["\n",(0,a.jsxs)(e.li,{children:[(0,a.jsx)(e.strong,{children:(0,a.jsx)(e.a,{href:"/docs/getting-started/mental-model",children:"The Art Studio Mental Model"})})," - Understand how Canvas, Layers, and Selections work together"]}),"\n",(0,a.jsxs)(e.li,{children:[(0,a.jsx)(e.strong,{children:(0,a.jsx)(e.a,{href:"/docs/guides/layer-system",children:"Layer System Guide"})})," - Work with multiple transparent layers, opacity, and blend modes"]}),"\n",(0,a.jsxs)(e.li,{children:[(0,a.jsx)(e.strong,{children:(0,a.jsx)(e.a,{href:"/docs/guides/selection-tools",children:"Selection Tools"})})," - Use rectangular, elliptical, and lasso selections with marching ants"]}),"\n",(0,a.jsxs)(e.li,{children:[(0,a.jsx)(e.strong,{children:(0,a.jsx)(e.a,{href:"/docs/guides/transform-operations",children:"Transform Operations"})})," - Move, rotate, scale, and flip selections with interactive handles"]}),"\n",(0,a.jsxs)(e.li,{children:[(0,a.jsx)(e.strong,{children:(0,a.jsx)(e.a,{href:"/docs/guides/clipboard-pipeline",children:"Clipboard Pipeline"})})," - Cut, copy, and paste artwork across layers and documents"]}),"\n",(0,a.jsxs)(e.li,{children:[(0,a.jsx)(e.strong,{children:(0,a.jsx)(e.a,{href:"/docs/guides/history-and-undo",children:"History & Snapshots"})})," - Implement undo, redo, and reactive UI bindings"]}),"\n",(0,a.jsxs)(e.li,{children:[(0,a.jsx)(e.strong,{children:(0,a.jsx)(e.a,{href:"/docs/api/configuration",children:"Brush Configuration"})})," - Customize colors, sizes, flow, and spacing"]}),"\n",(0,a.jsxs)(e.li,{children:[(0,a.jsx)(e.strong,{children:(0,a.jsx)(e.a,{href:"/docs/guides/integration-react",children:"Framework Integrations"})})," - Deep-dive patterns for React, Vue, and Svelte"]}),"\n"]}),"\n",(0,a.jsx)(e.h2,{id:"common-issues-and-solutions",children:"Common Issues and Solutions"}),"\n",(0,a.jsx)(e.h3,{id:"canvas-is-not-defined-error",children:'"Canvas is not defined" Error'}),"\n",(0,a.jsx)(e.p,{children:"Make sure you're running your co
1de in a browser environment. Fuderu requires the HTML Canvas API and won't work in server-side Node.js without a polyfill."}),"\n",(0,a.jsx)(e.h3,{id:"nothing-appears-on-canvas",children:"Nothing Appears on Canvas"}),"\n",(0,a.jsxs)(e.ul,{children:["\n",(0,a.jsx)(e.li,{children:"Check that your canvas element has explicit width and height attributes (not just CSS)"}),"\n",(0,a.jsx)(e.li,{children:"Verify that you've successfully created a Canvas instance"}),"\n",(0,a.jsx)(e.li,{children:"Ensure you're calling methods on the correct painter instance"}),"\n"]}),"\n",(0,a.jsx)(e.h3,{id:"poor-performance",children:"Poor Performance"}),"\n",(0,a.jsxs)(e.ul,{children:["\n",(0,a.jsx)(e.li,{children:"Reduce your canvas logical dimensions if unnecessarily large"}),"\n",(0,a.jsxs)(e.li,{children:["Use the performance profiling tips in our ",(0,a.jsx)(e.a,{href:"/docs/guides/performance",children:"Performance Guide"})]}),"\n"]}),"\n",(0,a.jsx)(e.h3,{id:"events-not-working",children:"Events Not Working"}),"\n",(0,a.jsxs)(e.ul,{children:["\n",(0,a.jsx)(e.li,{children:"Make sure you're attaching event listeners to the correct element"}),"\n",(0,a.jsxs)(e.li,{children:["Check if another element is covering your canvas (",(0,a.jsx)(e.code,{children:"pointer-events: none"})," on overlays)"]}),"\n",(0,a.jsx)(e.li,{children:"Verify that you're not preventing default pointer behavior unnecessarily"}),"\n"]}),"\n",(0,a.jsx)(e.p,{children:"Happy drawing! \u{1F3A8}"})]})}function p(n={}){let{wrapper:e}={...(0,r.R)(),...n.components};return e?(0,a.jsx)(e,{...n,children:(0,a.jsx)(c,{...n})}):c(n)}},8453(n,e,t){t.d(e,{R:()=>s,x:()=>l});var i=t(6540);let a={},r=i.createContext(a);function s(n){let e=i.useContext(r);return i.useMemo(function(){return"function"==typeof n?n(e):{...e,...n}},[e,n])}function l(n){let e;return e=n.disableParentContext?"function"==typeof n.components?n.components(a):n.components||a:s(n.components),i.createElement(r.Provider,{value:e},n.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.