Fill Styles

Control how shapes are filled with various patterns from solid colors to hand-drawn hachure lines, cross-hatching, dots, and more.

Available Fill Styles

Set the fill pattern using options.fillStyle:

Hachure

"hachure"

Solid

"solid"

Cross-Hatch

"cross-hatch"

Dots

"dots"

Zigzag

"zigzag"

Dashed

"dashed"

Fill Style Properties

Property	Type	Default	Description
`fillStyle`	string	"hachure"	Fill pattern type
`fill`	string	"transparent"	Fill color (hex)
`fillWeight`	number	0.5	Line thickness within pattern
`hachureGap`	number	4	Gap between pattern lines
`hachureAngle`	number	-41	Angle of hachure lines

Solid Fill (Clean Look)

Use "solid" for modern, clean diagrams:

{
  "type": "rectangle",
  "id": "clean-card",
  "x": 100, "y": 100, "w": 200, "h": 100,
  "options": {
    "fill": "#dbeafe",
    "stroke": "#3b82f6",
    "fillStyle": "solid",
    "roughness": 0.5
  }
}

Pro Tip: Combine with Low Roughness

For professional presentations, pair "fillStyle": "solid" with "roughness": 0.5 for a clean yet still hand-drawn appearance.

Hachure (Default)

The default hand-drawn fill with diagonal lines:

{
  "options": {
    "fill": "#fef3c7",
    "fillStyle": "hachure",
    "fillWeight": 1,       // Thicker lines
    "hachureGap": 6        // More spacing
  }
}

Cross-Hatch

Intersecting diagonal lines for a denser fill:

{
  "options": {
    "fill": "#dcfce7",
    "fillStyle": "cross-hatch",
    "hachureGap": 5
  }
}

Dots

Stippled dot pattern:

{
  "options": {
    "fill": "#e0e7ff",
    "fillStyle": "dots"
  }
}

Complete Example

{
  "elements": [
    {
      "type": "rectangle",
      "id": "box-solid",
      "x": 50, "y": 50, "w": 120, "h": 80,
      "options": { "fill": "#dbeafe", "fillStyle": "solid" }
    },
    {
      "type": "rectangle",
      "id": "box-hachure",
      "x": 200, "y": 50, "w": 120, "h": 80,
      "options": { "fill": "#fef3c7", "fillStyle": "hachure" }
    },
    {
      "type": "rectangle",
      "id": "box-crosshatch",
      "x": 350, "y": 50, "w": 120, "h": 80,
      "options": { "fill": "#dcfce7", "fillStyle": "cross-hatch" }
    }
  ]
}