meo-canvas
    Preparing search index...

    Type Alias Mask

    Mask:
        | string
        | { shape: MaskShape }
        | { fillRule?: FillRule; path: string }
        | { gradient: Gradient }

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

    Two kinds, and they cost differently. A shape or path clips: hard edges, nothing allocated, 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 multiplied by the gradient's alpha: soft edges, at the cost of that canvas.

    A bare string is path data, which is v1's shorthand for { path }.

    Type Declaration

    • string
    • { shape: MaskShape }
      • Readonlyshape: MaskShape

        A circle or ellipse inscribed in the node's box. Clips, so the edge is hard.

    • { fillRule?: FillRule; path: string }
      • Optional ReadonlyfillRule?: FillRule

        Which side of a winding counts as inside. Absent is nonzero.

      • Readonlypath: string

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

    • { gradient: Gradient }
      • Readonlygradient: Gradient

        A gradient read as alpha rather than as colour, so the node fades rather than being cut. This is the costly arm: it needs a layer to composite through, where the clipping arms do not.