TLHighlightShapeProps

Properties for a highlight shape. Highlight shapes represent highlighting strokes made with a highlighting tool, typically used to emphasize or mark up content.

interface TLHighlightShapeProps {}

Example

const highlightProps: TLHighlightShapeProps = {
  color: 'yellow',
  size: 'm',
  segments: [{ type: 'straight', points: [{ x: 0, y: 0, z: 0.5 }] }],
  isComplete: true,
  isPen: false,
  scale: 1,
}

Properties

The color style of the highlight stroke

color: TLDefaultColorStyle

Whether the highlight stroke has been completed by the user

isComplete: boolean

Whether the highlight was drawn with a pen/stylus (affects rendering style)

isPen: boolean

Scale factor applied to the highlight shape for display

scale: number

Array of segments that make up the highlight stroke path

segments: TLDrawShapeSegment[]

The size style determining the thickness of the highlight stroke

size: TLDefaultSizeStyle