Sashiko Pattern Designer

Drawing Tools

• Line Tool - Draw straight lines between two points
• Circle Tool - Draw circles from center to radius
• Box Tool - Draw rectangles by defining corners
• Curve Tool - Draw smooth curves with control points
• Pen Tool - Draw freehand paths with automatic smoothing
• Filled Circle - Draw circles filled with cross-hatch stitch pattern
• Filled Box - Draw rectangles filled with cross-hatch stitch pattern
• Filled Triangle - Draw triangles filled with cross-hatch pattern (3 clicks to define vertices)

Edit Mode

• Select Mode (V) - Click any stitch to select it
• Drag Control Points - Move yellow circles to adjust shape
• Color Editing - Change stitch color picker to update selected stitch
• Delete (Del) - Remove selected stitch
• Deselect (Esc) - Clear selection

Path Point Editing

When a path is selected, click on individual points to edit:

• Delete Key - Delete selected point (minimum 3 points required)
• M Key - Merge selected point with next point
• Drag Points - Move individual path points

Camera Navigation

• Mouse Wheel - Zoom in/out (centered on cursor position)
• Spacebar + Drag - Pan the canvas to explore large designs
• + or = - Zoom in
• - or _ - Zoom out
• 0 (zero) - Reset view to default zoom and position

Keyboard Shortcuts

• V - Switch to Select Mode
• Ctrl+Z / Cmd+Z - Undo last action
• Delete / Backspace - Delete selected stitch
• Escape - Deselect current selection
• Selected Point + Delete - Delete selected path point
• Selected Point + M - Merge selected path point with next

Settings

• Authentic Sashiko Mode - Enable traditional Japanese sashiko stitch parameters:
  • 3:2 front/back stitch ratio (front stitches 1.5× longer than back)
  • Configurable front stitch length: 3-5mm (3.5mm typical)
  • Gap ratio locked to 1/3 of stitch length (traditional standard)
  • Stitch density: 2-3 stitches per centimeter
  • Precise mm to pixel conversion (1mm = 3.78px at 96 DPI)
• Lock to Grid - Enable to snap points to grid intersections (20px grid). When unchecked, freehand mode is active for organic shapes
• Stitch Gap Ratio - Control gap between stitches: 1/3 (tight), 1/2 (balanced), or custom ratio. Note: Overridden to 1/3 when Authentic Sashiko Mode is enabled
• Toggle Grid - Show/hide grid overlay
• Stitch Color - Choose the color for new stitches

Note: Grid size (20px) and default stitch length (10px) are fixed for consistent zoom/pan behavior, unless Authentic Sashiko Mode is enabled.

Actions

• Undo - Revert last action (up to 50 actions)
• Clear Canvas - Remove all stitches from canvas
• Save Pattern - Download current pattern as PNG image

Configure traditional Japanese sashiko stitch measurements. All parameters follow authentic ratios for historically accurate embroidery.

Front Stitch Length

Standard range: 3-5mm (3.5mm is traditional typical)

The visible stitch length on the front side of the fabric. This is the primary aesthetic element.

Stitch Density

Traditional: 2-3 stitches per centimeter

Controls the spacing and rhythm of the stitching pattern. Higher density = tighter stitches.

Automatic Calculations

The following parameters are calculated automatically to maintain authentic ratios:

• Back Stitch: 2/3 of front length (3:2 ratio) Traditional Japanese ratio for structural integrity
• Gap: 1/3 of front stitch length Standard spacing between consecutive stitches
• Conversion: 1mm = 3.78px (96 DPI) Precise screen-to-fabric measurement

Mathematical Verification

With default 3.5mm front stitch:

• Front: 3.5mm × 3.78 = 13.23 pixels
• Back: 13.23 × (2/3) = 8.82 pixels (2.33mm)
• Gap: 13.23 × (1/3) = 4.41 pixels (1.17mm)
• Ratio: 13.23 ÷ 8.82 = 1.500 (exactly 3:2) ✓