Line Tool

Draw straight lines, curved lines, or multi-line closed shapes with live previews and customisable styles. Switch between line types on the fly using the quick submenu.

How to draw lines

  1. Choose your line type

    Click the Line tool button. A compact submenu appears next to the button with three options:

    • Straight — For direct point-to-point lines
    • Curved — For quadratic Bézier curves with a control point
    • Multi-line Shape — For closed shapes made from multiple straight segments

    Your selection is highlighted and announced to screen readers. You can switch types at any time by clicking the submenu buttons again.

  2. Configure line properties

    The context panel displays customisation options:

    • Style: Choose from Solid, Dashed, Dotted, or Dash-Dot patterns
    • Arrows: Add arrowheads at None, Start, End, or Both positions (straight/curved modes)
    • Stroke: Set width from 0–100 pixels (default 3 px). The slider and number input stay synchronised

    All controls update the live preview immediately so you can see your changes before placement.

  3. Draw your line

    For straight lines:

    • Click once to set the start point
    • Move your pointer to position the end point
    • Click again to place the line
    • Hold Shift to constrain to horizontal or vertical directions (snaps to nearest 90° angle)

    For curved lines:

    • Click once to set the start point
    • Click again to set the curve control point (this shapes the curve)
    • Click a third time to set the end point
    • Blue helper guides show the control point and tangent lines whilst you work

    For multi-line shapes:

    • Click once to set the first corner
    • Click additional points to add each straight segment
    • Click near the first point to close the shape, or press Enter when at least 3 points exist
    • After closing, use the Fill or Gradient Fill tools to fill only inside the shape boundary
  4. Live preview

    A dotted preview follows your pointer whilst you position each point. The preview shows your selected style, arrows, stroke width, and current colour. In Multi-line Shape mode, a start-point marker and close guide appear, turning green when you're close enough to close the shape. Completed output uses vector-effect: non-scaling-stroke so stroke width appears consistent at any zoom level.

  5. Cancel or undo

    Press Esc at any point before completing the line to cancel the operation and clear the preview. After placement, use the History tool or standard undo shortcuts to remove or restore lines.

Line types explained

Straight Lines

Create perfect straight lines between two points. Hold Shift to constrain to horizontal or vertical directions, ideal for technical diagrams, borders, and geometric designs.

Curved Lines

Draw elegant quadratic Bézier curves using three points: start, control point (shapes the curve), and end. Perfect for flowing connectors, decorative elements, and organic shapes.

Multi-line Shapes

Create closed shapes from several straight edges by clicking corner points one-by-one. When closed, the shape can be filled with solid colour or gradients without leaking into the background.

Switching types: If you switch line types whilst a line is in progress, the current operation is automatically cancelled and the preview cleared. This prevents accidental misplacement.

Controls reference

Line Type Submenu

Appears next to the Line tool button when active. Click Straight, Curved, or Multi-line Shape to switch modes. The active mode is visually highlighted with a blue background.

Style Buttons

Solid — No dashes (default)
Dashed — 10px dash, 5px gap pattern
Dotted — Small dots with spacing
Dash-Dot — Alternating dashes and dots

Arrow Markers

None — Plain line (default)
Start — Arrowhead at beginning
End — Arrowhead at end
Both — Arrowheads at both ends

Stroke Width

Range: 0–100 pixels (default 3 px). Use the slider for quick adjustments or type a specific value in the number box. Both controls stay synchronised.

Colour

Lines use your currently selected drawing colour from the application colour picker. The preview automatically reflects the selected colour.

Cancellation

Press Esc at any time whilst placing a line or shape to cancel the operation and remove the preview. Works for straight, curved, and multi-line modes.

Style pattern details

Solid: Continuous line with no gaps. Uses stroke-dasharray: none. Best for general purpose drawing and primary elements.
Dashed: Pattern of 10px dashes with 5px gaps. Good for borders, dividers, and secondary elements that need visual separation.
Dotted: Small dots calculated based on stroke width (0.5× width) with 2.5× spacing. Ideal for subtle guidelines and construction lines.
Dash-Dot: Alternating pattern of dashes and dots with gaps. Pattern scales with stroke width. Useful for centre lines and dimension lines in technical drawings.

Adaptive patterns: Dotted and Dash-Dot patterns automatically adjust their spacing based on your stroke width, ensuring they look proportional at any thickness.

Keyboard shortcuts

Hold Shift whilst drawing straight lines to constrain them to perfect horizontal or vertical alignment (snaps to nearest 90°)
Esc cancels the current line operation before placement (straight, curved, and multi-line modes)
Enter closes a multi-line shape when at least three points have been placed
Tab navigates through all controls including submenu buttons, style buttons, arrow buttons, and stroke width controls
Arrow keys adjust the stroke width slider value when the slider has focus
Space or Enter activates button controls when focused (submenu, style, and arrow buttons)

Technical features

Non-scaling stroke: Line widths remain visually consistent regardless of zoom level. A 3px line always appears as 3px on screen.
Minimum line length: Very short lines (under 0.1 units) are automatically cancelled to prevent accidental dots or clicks from creating visible marks.
Context-aware markers: In straight and curved modes, arrow markers automatically use the current stroke colour for visual consistency, ensuring arrowheads match their line.
SVG marker definitions: Arrowheads are created as reusable SVG <marker> elements stored in the document's <defs> section for efficient rendering.
Live preview system: Preview elements update in real-time using dotted lines with animated dashes, showing exact placement before commitment.
Metadata tracking: Each line includes data-tool and data-timestamp attributes for version control and history management.
Closed-shape output: Multi-line mode creates a closed SVG polygon, allowing solid and gradient fills to stay contained inside the shape boundary.
Curve helper guides: Blue visual guides show control point position and tangent lines when drawing curved lines, with semi-transparent styling for clarity.

Accessibility features

WCAG 2.2 Level AA compliant: The Line tool provides comprehensive accessibility for users who rely on assistive technology, keyboard navigation, or alternative input methods.

Screen reader announcements: Clear status messages announce mode changes ("Straight line mode selected", "Multi-line shape mode selected"), style changes ("Line style: Dashed"), arrow changes ("Arrow type: End"), and placement instructions ("Click to place end point", "Click the first point to close shape").
ARIA labels and roles: All controls include proper ARIA attributes. Button groups use role="group", buttons have aria-pressed states, and inputs have descriptive aria-label attributes.
Keyboard navigation: Complete keyboard access to all features. Tab through controls, use arrow keys on sliders, and activate buttons with Space or Enter.
Focus indicators: Clear, high-contrast focus rings (3px solid outline with 2px offset) make keyboard navigation visible and easy to follow.
Synchronised controls: Slider and number input stay perfectly synchronised, ensuring consistent information regardless of which control is used or announced.
High contrast support: The interface adapts to high contrast mode preferences with increased border widths and enhanced visual separation.
Reduced motion support: Respects prefers-reduced-motion settings by disabling animations for users who find motion distracting or uncomfortable.

Pencil Tool

For freehand drawing with automatic smoothing. Features stroke width control (0–50 px), automatic quadratic curve smoothing, and the ability to create organic, flowing lines. Perfect for sketches, signatures, and annotations that complement precise line work.

Print Preview Tool

Select specific areas of your drawing for printing. Click and drag to define a rectangular print area with automatic validation for minimum size requirements. Useful for preparing precise sections of your work for output.

Tips for better results

Shift key for straight lines

When drawing straight lines, hold Shift before moving your pointer after the first click. This ensures the constraint is active throughout your movement. Release Shift if you need to adjust position freely.

Curved line control points

The control point determines the curve's shape. Place it closer to the start or end for sharp curves, or further away for gentle, flowing curves. Experiment with different positions to achieve the desired effect.

Closing multi-line shapes

In Multi-line Shape mode, place at least three points, then close by clicking near your first point (or pressing Enter). Once closed, use Fill or Gradient Fill to colour the inside cleanly.

Combining styles

Different line styles convey different meanings. Use solid lines for primary elements, dashed for secondary or hidden elements, and dotted for construction guides or temporary markers. This creates visual hierarchy in technical drawings.

Arrow directions

Arrow placement matters for flow diagrams. "Start" arrows point from the line start, "End" arrows point to the line end. Choose based on the direction of flow or relationship you're illustrating. Arrow markers are used in straight and curved modes.

Stroke width and zoom

Remember that stroke width doesn't scale with zoom level. If lines appear too thick when zoomed in, reduce the pixel value rather than adjusting zoom. This ensures consistent appearance across different viewing contexts.