meo-canvas - v9.0.2
    Preparing search index...

    Type Alias Mask

    Mask:
        | string
        | { shape: MaskShape }
        | { fillRule?: "nonzero" | "evenodd"; path: string }
        | { gradient: Gradient }

    What of a node is drawn, and how much of it.

    A mask covers everything the node renders — background, border, content and children alike — the way CSS mask does, rather than only its contents. It comes in two kinds, and they cost different amounts:

    • A shape or path clips. Hard edges, nothing else allocated, and cheap enough to put on every node in a list.
    • A gradient composites, so the node is drawn into an offscreen canvas the size of its box and then multiplied by the gradient's alpha. Soft edges, at the cost of that canvas.

    Applied within the node's own box: content pushed outside by transform is not masked back in.

    Type Declaration

    • string

      SVG path data, in the node's own coordinates. Shorthand for { path }.

    • { shape: MaskShape }
      • shape: MaskShape

        A shape inscribed in the node's box.

    • { fillRule?: "nonzero" | "evenodd"; path: string }
      • OptionalfillRule?: "nonzero" | "evenodd"

        How the path's interior is decided where it crosses itself.

      • path: string

        SVG path data, in the node's own coordinates.

    • { gradient: Gradient }

      Only the alpha of each colour matters: opaque keeps a pixel, transparent removes it.

      • gradient: Gradient

        The gradient whose alpha the node is multiplied by.

    Box({ mask: { shape: 'circle' }, children: [avatar] })
    Box({ mask: 'M 0 0 L 100 0 L 50 100 Z' })
    Box({ mask: { gradient: { type: 'linear', direction: 'to-bottom', colors: ['#000', 'transparent'] } } })

    Settings
    Member Visibility