Pencil Tool

Draw freely with smooth, flowing lines. Perfect for handwriting, sketching, signatures, and decorative curves with automatic line smoothing.

How to use the Pencil

Select the Pencil tool. The context panel displays the Stroke width control with a slider and number input box.

Choose a colour. The pencil uses your currently selected drawing colour. You can change colours between strokes to create multicoloured sketches.

Set the stroke width. Use the slider or type directly in the number box. Range: 0–50 pixels (default 2 px). Both controls stay synchronised.

Draw on the canvas. Press and drag your pointer to sketch. The tool records your movement and creates a smooth path. Release to finish the stroke.

Very small pointer movements (less than 2 pixels) are automatically filtered out to prevent accidental dots and keep your lines clean.

Cancel if needed. Press Esc whilst drawing to cancel the current stroke. The incomplete path will be removed and you can start again.

What the Pencil creates

SVG Path Element

Each stroke becomes an <path> element with round caps and joins for a natural, hand-drawn appearance. The path uses vector-effect: non-scaling-stroke so the line width remains visually consistent at any zoom level.

Automatic Smoothing

The tool applies quadratic curve smoothing as you draw, converting your pointer movements into elegant, flowing lines. This happens automatically to give you professional-looking results without manual adjustment.

Accessibility note: As you draw, screen readers announce "Drawing..." when you start and "Drawing complete" when you finish. If you cancel with Esc, you'll hear "Drawing cancelled".

Controls at a glance

Stroke Width Slider

Range: 0–50 pixels (default 2 px). Drag the slider handle to adjust width smoothly. The slider has proper ARIA labels for screen reader users.

Stroke Width Number Input

Type a specific pixel value directly. Accepts values from 0 to 50. Stays synchronised with the slider at all times.

Escape Key

Press Esc whilst drawing to immediately cancel the current stroke. The incomplete path is removed from the canvas.

Colour Selection

Uses your current drawing colour from the application colour picker. Change colours between strokes to create varied artwork.

Technical features

Movement filtering: Pointer movements smaller than 2 pixels are ignored to prevent accidental dots and maintain clean lines during normal drawing.
Performance optimisation: The tool uses requestAnimationFrame to efficiently process pointer movements, ensuring smooth drawing even on slower devices.
Metadata tracking: Each path includes data-tool and data-timestamp attributes for version control and history tracking.
Undo/Redo compatible: Pencil strokes integrate with the application's history system, allowing you to undo or redo any stroke using the standard shortcuts.
Round caps and joins: Strokes use round line caps and joins for a natural, organic appearance that mimics real pencil drawings.

Tips for better drawings

Drawing technique

Quick, confident strokes typically produce better results than slow, hesitant movements. The automatic smoothing works best when you draw with purpose and fluidity.

Stroke width and zoom

Remember that stroke width doesn't scale with zoom level. If your line appears too thick when zoomed in, reduce the pixel value rather than adjusting your zoom. A 2px line always appears as 2px on screen, regardless of zoom.

Colour changes

You can switch colours between strokes to add visual interest. Select a new colour from the colour picker, then continue drawing. Each new stroke will use the newly selected colour.

Combining with other tools

The Pencil tool works beautifully alongside the Line tool for technical diagrams—use the Pencil for freehand annotations and the Line tool for precise straight or curved connectors.

Keyboard shortcuts

Esc — Cancel the current stroke whilst drawing (before releasing the pointer)
Tab — Navigate through stroke width controls and other interface elements
Arrow keys — Adjust slider value when the slider has focus

Accessibility features

WCAG 2.2 Level AA compliant: The Pencil tool includes comprehensive accessibility features for users who rely on assistive technology.

Screen reader announcements: Status messages announce when drawing starts, completes, or is cancelled.
ARIA labels: All controls include proper ARIA labels identifying their purpose and current value.
Keyboard navigation: All controls are fully accessible via keyboard with clear focus indicators.
Synchronised controls: The slider and number input stay synchronised, ensuring consistent information regardless of which control is used.
High contrast support: The interface adapts to high contrast mode preferences for improved visibility.