Canvas Editor: Developing Drawing and Annotation Tools

Once a startup came to us wanting to embed PDF annotation into a web application. They used an SVG overlay and experienced lag on a 200-page document — every stroke took a second to respond. We migrated them to Canvas with retained mode (Fabric.js) — and rendering speed increased by 8x, and users stopped complaining about lag. Over 5+ years, we have implemented over 50 canvas tools: from simple brushes to full-fledged diagram editors.

Regardless of the scenario — freehand drawing, document annotation, or diagrams — the basic architecture boils down to choosing between immediate mode and retained mode. Each approach has its trade-offs, and we will help you choose the right one for your tasks.

Technical Challenges in Developing Canvas Tools

Freehand drawing with pressure sensitivity. Not all browsers correctly transmit pen pressure — we have to emulate line width through pen speed. In 80% of cases, the problem is solved in a day: add a polyfill for Pointer Events and calibrate the algorithm for specific devices (Windows Ink, iPad, Wacom).

PDF annotation. Annotation coordinates must be tied to the page, not the screen. When zooming and scrolling, positions are recalculated with respect to the current scale. We use scalable layers and intercept transform events in Konva.js.

Export validation. Annotations must precisely overlay the original. We first render the PDF as an image, then overlay the canvas with annotations — this eliminates DPI discrepancies.

Why Retained Mode is Preferable for Annotations?

Immediate mode (pure Canvas 2D) is fast but requires manual hit-testing and scene management. Retained mode (Fabric.js, Konva.js) provides an object model: each shape is an object that can be selected, moved, or modified. For editors with undo/redo and export, retained mode cuts development time in half. Additionally, retained mode is more convenient for teamwork: changes in the object model are easily synchronized over WebSocket — enabling online collaborative drawing.

How We Implement Annotation with Konva.js

We use Konva.js 9 with React-Konva. Each annotation is an object of class Rect, Line, Circle, Text, or Arrow. The user selects a tool and draws on the stage — the object is added to an array and rendered. Selection, moving, and editing are built-in.

import { Stage, Layer, Line, Rect, Circle, Text, Transformer } from 'react-konva'; import Konva from 'konva'; type AnnotationType = 'line' | 'rect' | 'circle' | 'arrow' | 'text'; interface Annotation { id: string; type: AnnotationType; points?: number[]; x?: number; y?: number; width?: number; height?: number; text?: string; color: string; } function AnnotationTool({ backgroundImage }: { backgroundImage: string }) { const [annotations, setAnnotations] = useState<Annotation[]>([]); const [selectedId, setSelectedId] = useState<string | null>(null); const [activeTool, setActiveTool] = useState<AnnotationType>('rect'); const [isDrawing, setIsDrawing] = useState(false); const stageRef = useRef<Konva.Stage>(null); function getRelativePosition() { const stage = stageRef.current!; const pos = stage.getPointerPosition()!; return { x: pos.x, y: pos.y }; } function handleMouseDown() { setSelectedId(null); const pos = getRelativePosition(); const newAnnotation: Annotation = { id: crypto.randomUUID(), type: activeTool, color: '#ef4444', x: pos.x, y: pos.y, width: 0, height: 0, }; if (activeTool === 'line') { newAnnotation.points = [pos.x, pos.y, pos.x, pos.y]; } setAnnotations((prev) => [...prev, newAnnotation]); setIsDrawing(true); } function handleMouseMove() { if (!isDrawing) return; const pos = getRelativePosition(); const lastIndex = annotations.length - 1; const last = annotations[lastIndex]; const updated = { ...last }; if (activeTool === 'line') { updated.points = [last.points![0], last.points![1], pos.x, pos.y]; } else { updated.width = pos.x - last.x!; updated.height = pos.y - last.y!; } setAnnotations((prev) => [...prev.slice(0, lastIndex), updated]); } function handleMouseUp() { setIsDrawing(false); } return ( <Stage ref={stageRef} width={800} height={600} onMouseDown={handleMouseDown} onMouseMove={handleMouseMove} onMouseUp={handleMouseUp} > <Layer> {annotations.map((ann) => { if (ann.type === 'rect') { return ( <Rect key={ann.id} x={ann.x} y={ann.y} width={ann.width} height={ann.height} stroke={ann.color} strokeWidth={2} fill="transparent" onClick={() => setSelectedId(ann.id)} draggable={selectedId === ann.id} /> ); } if (ann.type === 'line') { return ( <Line key={ann.id} points={ann.points} stroke={ann.color} strokeWidth={2} lineCap="round" /> ); } return null; })} </Layer> </Stage> ); } 

How to Implement Undo/Redo in a Canvas Editor?

For undo and redo we use a state stack. Each operation creates a snapshot of the current annotations and places it in history. Branching is supported — if a new action is taken after an undo, the history is truncated.

function useUndoRedo<T>(initialState: T) { const [history, setHistory] = useState<T[]>([initialState]); const [cursor, setCursor] = useState(0); const current = history[cursor]; function push(newState: T) { // Truncate history after current position (branching) const newHistory = [...history.slice(0, cursor + 1), newState]; setHistory(newHistory); setCursor(newHistory.length - 1); } function undo() { if (cursor > 0) setCursor((c) => c - 1); } function redo() { if (cursor < history.length - 1) setCursor((c) => c + 1); } return { current, push, undo, redo, canUndo: cursor > 0, canRedo: cursor < history.length - 1 }; } 

Canvas Tool Development Process

How We Export the Annotated Image

The background (PDF or image) is rendered as the first layer, annotations as the second. Then the entire stage canvas is converted to Blob via toBlob(). HiDPI is considered: multiply dimensions by window.devicePixelRatio.

function exportAnnotated(stage: Konva.Stage, bgImage: HTMLImageElement) { const canvas = document.createElement('canvas'); canvas.width = stage.width(); canvas.height = stage.height(); const ctx = canvas.getContext('2d')!; // First the background ctx.drawImage(bgImage, 0, 0); // Overlay annotations from Konva const stageCanvas = stage.toCanvas(); ctx.drawImage(stageCanvas, 0, 0); canvas.toBlob((blob) => { const url = URL.createObjectURL(blob!); const a = document.createElement('a'); a.href = url; a.download = 'annotated.png'; a.click(); URL.revokeObjectURL(url); }); } 

Timeline and What's Included

Timeline: basic tool with brush and shapes — from 3 to 5 days. PDF annotation with coordinate preservation — from 7 to 10 days. Cost is calculated individually after analyzing your technical specification. Thanks to architecture optimization, you can save up to 40% of development time.

What's included:

• Source code with comments
• API documentation (main methods and events)
• Deployment instructions
• 2 hours of training for the client's team
• 30-day warranty on bug fixes

Why choose us: 5+ years of experience in canvas solutions development, 50+ implemented projects, certified React and Node.js developers. Contact us for a consultation on Canvas architecture — we'll respond within a day.

For reference: Canvas API is part of the WHATWG HTML Living Standard, retained mode is a graphics programming paradigm.