Line Tool

Draw straight or curved lines with live previews, customisable styles, and arrowheads. 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 two options:

    • Straight — For direct point-to-point lines
    • Curved — For quadratic Bézier curves with a control point

    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
    • 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
  4. Live preview

    A dotted preview line follows your pointer whilst you position each point. The preview shows your selected style, arrows, stroke width, and current colour. When you complete the line, it's added to the drawing layer with vector-effect: non-scaling-stroke so the 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.

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 or Curved 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 to cancel the operation and remove the preview. Works for both straight and curved lines.

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 (works for both straight and curved lines) before placement
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: 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.
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"), style changes ("Line style: Dashed"), arrow changes ("Arrow type: End"), and placement instructions ("Click to place end point").
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.

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.

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.