meo-canvas - v8.0.0
    Preparing search index...

    Interface ImageProps

    Defines the source and rendering properties for an ImageNode. It extends BoxProps, so it can use all Box layout and style properties.

    interface ImageProps {
        alignContent?: Align;
        alignItems?: Align;
        alignSelf?: Align;
        alt?: string;
        aspectRatio?: number;
        backgroundColor?: string;
        border?:
            | number
            | Partial<
                Record<
                    | "Top"
                    | "Bottom"
                    | "Left"
                    | "Right"
                    | "Start"
                    | "End"
                    | "Horizontal"
                    | "Vertical"
                    | "All",
                    number,
                >,
            >;
        borderColor?: string
        | EdgeColors;
        borderRadius?: number | CornerRadii;
        borderStyle?: Solid | Dashed | Dotted;
        boxShadow?: BoxShadowProps | BoxShadowProps[];
        boxSizing?: BoxSizing;
        color?: string;
        direction?: Direction;
        display?: Display;
        dither?: boolean;
        dropShadow?: DropShadowProps;
        flexBasis?: number | "auto" | `${number}%`;
        flexDirection?: FlexDirection;
        flexGrow?: number;
        flexShrink?: number;
        flexWrap?: Wrap;
        fontFamily?: string;
        fontSize?: number;
        fontStyle?: "normal" | "italic";
        fontVariant?: FontVariantSetting;
        fontWeight?:
            | number
            | "bold"
            | "normal"
            | "100"
            | "200"
            | "300"
            | "400"
            | "500"
            | "600"
            | "700"
            | "800"
            | "900";
        frame?: number;
        gap?: | number
        | `${number}%`
        | Partial<Record<"All" | "Column" | "Row", number | `${number}%`>>;
        gradient?: Gradient;
        height?: number | `${number}%`;
        httpOptions?: RequestInit;
        justifyContent?: Justify;
        key?: string;
        letterSpacing?: number | "normal" | `${number}px` | `${number}em`;
        lineGap?: number;
        lineHeight?: number;
        loop?: boolean;
        margin?:
            | number
            | "auto"
            | `${number}%`
            | Partial<
                Record<
                    | "Top"
                    | "Bottom"
                    | "Left"
                    | "Right"
                    | "Start"
                    | "End"
                    | "Horizontal"
                    | "Vertical"
                    | "All",
                    number
                    | "auto"
                    | `${number}%`,
                >,
            >;
        mask?: Mask;
        maxHeight?: number | `${number}%`;
        maxWidth?: number | `${number}%`;
        minHeight?: number | `${number}%`;
        minWidth?: number | `${number}%`;
        name?: string;
        objectFit?: "fill" | "none" | "contain" | "cover" | "scale-down";
        objectPosition?: Partial<
            Record<"Top" | "Bottom" | "Left" | "Right", number | `${number}%`>,
        >;
        onError?: (error: Error) => void;
        onLoad?: () => void;
        opacity?: number;
        overflow?: Overflow;
        padding?:
            | number
            | `${number}%`
            | Partial<
                Record<
                    | "Top"
                    | "Bottom"
                    | "Left"
                    | "Right"
                    | "Start"
                    | "End"
                    | "Horizontal"
                    | "Vertical"
                    | "All",
                    number
                    | `${number}%`,
                >,
            >;
        position?:
            | number
            | `${number}%`
            | Partial<
                Record<
                    | "Top"
                    | "Bottom"
                    | "Left"
                    | "Right"
                    | "Start"
                    | "End"
                    | "Horizontal"
                    | "Vertical"
                    | "All",
                    number
                    | `${number}%`,
                >,
            >;
        positionType?: PositionType;
        saturate?: number;
        src: string | Buffer<ArrayBufferLike>;
        textAlign?: "center" | "end" | "left" | "right" | "start" | "justify";
        textDecoration?:
            | "none"
            | string & {}
            | "underline"
            | "overline"
            | "line-through";
        transform?: TransformProps;
        verticalAlign?: "bottom"
        | "middle"
        | "top";
        width?: number | `${number}%`;
        wordSpacing?: number | "normal" | `${number}px` | `${number}em`;
        zIndex?: number;
    }

    Hierarchy

    Index
    alignContent? alignItems? alignSelf? alt? aspectRatio? backgroundColor? border? borderColor? borderRadius? borderStyle? boxShadow? boxSizing? color? direction? display? dither? dropShadow? flexBasis? flexDirection? flexGrow? flexShrink? flexWrap? fontFamily? fontSize? fontStyle? fontVariant? fontWeight? frame? gap? gradient? height? httpOptions? justifyContent? key? letterSpacing? lineGap? lineHeight? loop? margin? mask? maxHeight? maxWidth? minHeight? minWidth? name? objectFit? objectPosition? onError? onLoad? opacity? overflow? padding? position? positionType? saturate? src textAlign? textDecoration? transform? verticalAlign? width? wordSpacing? zIndex?
    alignContent?: Align

    Defines how lines are distributed along the cross axis when flexWrap is WRAP or WRAP_REVERSE. Has no effect when there is only one line of flex items.

    Yoga default (FLEX_START)

    alignItems?: Align

    Defines how flex items are aligned along the cross axis of the container.

    Yoga default (STRETCH)

    alignSelf?: Align

    Allows overriding the parent's alignItems value for a specific flex item.

    Yoga default (AUTO) - Inherits from alignItems.

    alt?: string

    Alternative text description of the image (used for accessibility or if the image fails to load). Currently not rendered visually, but good practice to include.

    aspectRatio?: number

    Locks the aspect ratio (width / height) of the node. If set, Yoga might adjust the height based on the calculated width or vice versa.

    Ratio (e.g., 16 / 9).

    Yoga default (undefined)

    https://yogalayout.dev/docs/styling/aspect-ratio

    backgroundColor?: string

    Sets the background color of the node. Drawn beneath the content and padding, extending to the border edge. Accepts standard CSS color strings.

    undefined (transparent)
    border?:
        | number
        | Partial<
            Record<
                | "Top"
                | "Bottom"
                | "Left"
                | "Right"
                | "Start"
                | "End"
                | "Horizontal"
                | "Vertical"
                | "All",
                number,
            >,
        >

    Sets the width of the node's border. Can be a single number for all edges or an object specifying individual edges.

    Pixels.

    Yoga default (0 for each edge)

    https://yogalayout.dev/docs/styling/margin-padding-border

    borderColor?: string | EdgeColors

    Colour of the node's border — one colour for every edge, or a colour per edge.

    Accepts standard CSS colour strings ('red', '#FF0000', 'rgba(255,0,0,0.5)'). Given an object, an edge left out falls back to black. Where two edges of different colours meet at a rounded corner the arc is split between them, as CSS joins them.

    'black' (set in BoxNode constructor)

    Box({ border: 2, borderColor: '#cbd5e1' })
    Box({ border: { Left: 4 }, borderColor: { Left: '#2563eb' } })
    borderRadius?: number | CornerRadii

    Sets the radius of the node's corners, creating rounded effects. Can be a single number for all corners or an object specifying individual corners (TopLeft, TopRight, BottomLeft, BottomRight).

    Pixels.

    undefined (no rounding)
    borderStyle?: Solid | Dashed | Dotted

    Sets the style of the node's border.

    • Style.Border.Solid (0)
    • Style.Border.Dashed (1)
    • Style.Border.Dotted (2)
    Style.Border.Solid (set in BoxNode constructor)
    boxShadow?: BoxShadowProps | BoxShadowProps[]

    Applies one or more box-shadow effects to the node. Can be a single shadow object or an array of shadow objects. Shadows are drawn in the order specified.

    BoxShadowProps

    undefined (no shadow)
    boxSizing?: BoxSizing

    Defines how the width and height properties are interpreted regarding padding and border. CONTENT_BOX: Width/height apply only to the content area. Padding and border are added outside. BORDER_BOX: Width/height include content, padding, and border.

    Style.BoxSizing (CONTENT_BOX, BORDER_BOX)

    Style.BOX_SIZING_BORDER_BOX (set in setLayout)

    color?: string

    Text color. Accepts standard CSS color strings.

    'black'
    direction?: Direction

    Sets the primary text and layout direction (Left-to-Right or Right-to-Left). Affects the meaning of Start and End edges for properties like position, margin, padding, border. INHERIT: Uses the direction of the parent node.

    Style.DIRECTION_LTR (set in setLayout)

    display?: Display

    Controls whether the node and its children are included in the layout calculation and rendering. FLEX: The node participates in a flex layout. NONE: The node and its subtree are ignored by layout and rendering.

    Yoga default (FLEX)

    dither?: boolean

    Dither this node's drawing, trading a little noise for the banding an eight-bit surface shows across a long, subtle gradient.

    Costs nothing where nothing bands: a flat fill, text and a blurred shadow encode to identical bytes either way, because a dither only perturbs a pixel whose colour falls between two the surface can hold. On a gradient reckon on about a third again the PNG bytes, and near nothing for WebP or JPEG, whose quantizers absorb the noise.

    Inherited by descendants, so setting it on Root covers the page and a node overrides it for its own subtree without touching its siblings. Pointless under a float colorType, which has the precision to draw the ramp outright.

    false

    Root({ width: 800, dither: true, children: [
      Box({ height: 400, gradient: { type: 'linear', direction: 'to-bottom', colors: ['#0b1220', '#1e2b4a'] } }),
      Box({ dither: false, children: [Text({ children: 'left alone' })] }),
    ] })
    dropShadow?: DropShadowProps

    Applies a drop-shadow effect based on the image's alpha channel, similar to the CSS filter: drop-shadow(...).

    DropShadowProps

    undefined (no drop shadow)
    flexBasis?: number | "auto" | `${number}%`

    Defines the default size of a flex item along the main axis before the remaining space is distributed.

    Pixels.

    Yoga default (AUTO)

    https://yogalayout.dev/docs//styling/flex-basis-grow-shrink

    flexDirection?: FlexDirection

    Defines the direction of the main axis for flex items within this container.

    Yoga default (COLUMN)

    flexGrow?: number

    Defines the ability of a flex item to grow if necessary, relative to other items. A non-negative number indicating the proportion of available space the item should take.

    Yoga default (0) - Item does not grow.

    https://yogalayout.dev/docs/styling/flex-basis-grow-shrink

    flexShrink?: number

    Defines the ability of a flex item to shrink if necessary, relative to other items. A non-negative number indicating the proportion of overflow space the item should lose.

    Yoga default (1 for non-root nodes, 0 for root) - Item can shrink.

    https://yogalayout.dev/docs/styling/flex-basis-grow-shrink

    flexWrap?: Wrap

    Controls whether flex items are forced onto a single line or can wrap onto multiple lines.

    Yoga default (NO_WRAP)

    fontFamily?: string

    Font family (e.g., 'Arial', 'Helvetica', 'sans-serif'). Ensure the font is available in the rendering environment.

    'sans-serif'
    fontSize?: number

    Font size.

    Pixels.

    16
    fontStyle?: "normal" | "italic"

    Font style.

    'normal'
    fontVariant?: FontVariantSetting

    Specifies font variation settings. Provides fine control over font variation axis. Accepts string in CSS font-variation-settings format.

    "normal" | "historical-forms" | "small-caps" | "all-small-caps" | "petite-caps" | "all-petite-caps" | "unicase" | "titling-caps" | "lining-nums" | "oldstyle-nums" | "proportional-nums" | ...

    undefined
    fontWeight?:
        | number
        | "bold"
        | "normal"
        | "100"
        | "200"
        | "300"
        | "400"
        | "500"
        | "600"
        | "700"
        | "800"
        | "900"

    Font weight (e.g., 'normal', 'bold', 400, 700).

    'normal'
    frame?: number

    Frame to draw from an animated source, instead of playing it.

    An animated gif, apng, webp or avif plays by itself in a paged render, advancing at the source's own rate. Naming a frame pins it to that one — a poster, a thumbnail, or a sequence driven by hand. Negative counts from the end, and a frame the source does not have is refused.

    Image({ src: 'spinner.gif', frame: 0 })   // first frame, however long the animation is
    Image({ src: 'spinner.gif', frame: -1 })  // last frame

    undefined (plays in a paged render, first frame in a still one)
    gap?:
        | number
        | `${number}%`
        | Partial<Record<"All" | "Column" | "Row", number | `${number}%`>>

    Defines the space between flex items along the main axis.

    Pixels.

    Yoga default (0)

    https://yogalayout.dev/docs/styling/gap

    gradient?: Gradient

    Sets a linear gradient as the background. Overrides backgroundColor if provided. colors: Array of CSS color strings for the gradient stops. direction: Array of four numbers [x0, y0, x1, y1] defining the start and end points of the gradient line, relative to the node's top-left corner.

    undefined
    height?: number | `${number}%`

    Sets the height of the node.

    Pixels if it's number, percentage of the parent's height if it's string.

    Yoga default (typically 'auto')

    https://yogalayout.dev/docs/styling/width-height

    httpOptions?: RequestInit

    Request options forwarded to fetch when src is a remote (http/https) URL. Accepts the standard Web RequestInit shape — headers, method, body, credentials, redirect, signal, etc.

    Ignored when src is a local file path or a Buffer (no request is made).

    When set, the options are also folded into the image cache key, so the same URL fetched with different headers/method/body is cached separately.

    { headers: { Authorization: 'Bearer <token>' } }

    undefined
    justifyContent?: Justify

    Defines how flex items are distributed along the main axis of the container.

    Yoga default (FLEX_START)

    key?: string

    Optional key identifier for component reconciliation.

    letterSpacing?: number | "normal" | `${number}px` | `${number}em`

    Sets the spacing between letters (tracking). Accepts CSS units like 'normal', '2px', '0.1em'.

    'normal' (relies on canvas default)

    https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/letterSpacing

    lineGap?: number

    Additional vertical spacing between lines of text.

    Pixels.

    0
    lineHeight?: number

    Height of each line box.

    Left unset, a line is the face's own height — its ascent plus its descent — which is what line-height: normal means in CSS and is a little over 1.3em for most text faces. Set smaller than that and the lines overlap rather than the box quietly growing, again as CSS does.

    Pixels.

    undefined (the face's own height)
    loop?: boolean

    Whether an animated source restarts once it reaches its last frame.

    false holds the last frame instead, which is what a one-shot animation wants when the render outlasts it. Ignored when ImageProps.frame pins a frame.

    true
    margin?:
        | number
        | "auto"
        | `${number}%`
        | Partial<
            Record<
                | "Top"
                | "Bottom"
                | "Left"
                | "Right"
                | "Start"
                | "End"
                | "Horizontal"
                | "Vertical"
                | "All",
                number
                | "auto"
                | `${number}%`,
            >,
        >

    Sets the margin space on the outside of the node's border. Can be a single number for all edges or an object specifying individual edges.

    Pixels.

    Yoga default (0 for each edge)

    https://yogalayout.dev/docs/styling/margin-padding-border

    mask?: Mask

    Limits what of this node is drawn — see Mask.

    Covers everything the node renders, its background, border, content and children alike. A shape or path clips; a gradient fades. Inherited by every component, so Text, Image, Chart and Grid take it too.

    undefined (nothing masked)

    Image({ src: avatar, width: 96, height: 96, mask: { shape: 'circle' } })
    Box({ mask: { gradient: { type: 'linear', direction: 'to-bottom', colors: ['#000', 'transparent'] } } })
    maxHeight?: number | `${number}%`

    Sets the maximum height of the node.

    Pixels if it's number, percentage of the parent's height if it's string.

    Yoga default (undefined / infinity)

    https://yogalayout.dev/docs/styling/min-max-width-height

    maxWidth?: number | `${number}%`

    Sets the maximum width of the node.

    Pixels if it's number, percentage of the parent's width if it's string.

    Yoga default (undefined / infinity)

    https://yogalayout.dev/docs/styling/min-max-width-height

    minHeight?: number | `${number}%`

    Sets the minimum height of the node.

    Pixels if it's number, percentage of the parent's height if it's string.

    Yoga default (0)

    https://yogalayout.dev/docs/styling/min-max-width-height

    minWidth?: number | `${number}%`

    Sets the minimum width of the node.

    Pixels if it's number, percentage of the parent's width if it's string.

    Yoga default (0)

    https://yogalayout.dev/docs/styling/min-max-width-height

    name?: string

    Optional display name for debugging purposes.

    objectFit?: "fill" | "none" | "contain" | "cover" | "scale-down"

    Specifies how the image should be resized to fit its container.

    • fill: Stretches the image to fill the container, ignoring an aspect ratio. (Default)
    • contain: Scales the image to fit within the container while preserving an aspect ratio.
    • cover: Scales the image to maintain an aspect ratio while filling the container. The image will be clipped if necessary.
    • none: The image is not resized. It will be centered unless dimensions exceed the container, then clipped.
    • scale-down: Compares contain and none, picking the smaller concrete object size.
    'fill'
    objectPosition?: Partial<
        Record<"Top" | "Bottom" | "Left" | "Right", number | `${number}%`>,
    >

    Specifies the alignment of the image's content within its box using an object. Provide values for Left or Right (for horizontal) and Top or Bottom (for vertical). Values can be numbers (pixels) or percentage strings ('50%').

    • Horizontal: Left takes precedence over Right. Defaults to '50%' if neither is provided.
    • Vertical: Top takes precedence over Bottom. Defaults to '50%' if neither is provided. Affects rendering when objectFit is contain, cover, none, or scale-down.
    { Left: '10%', Top: 20 } // 10% from left, 20px from top

    { Right: '0%', Bottom: '0%' } // Align to bottom-right

    { Left: '50%', Top: '50%' } // Center center
    onError?: (error: Error) => void

    Callback function that executes when the image fails to load.

    Type Declaration

      • (error: Error): void

      • Parameters

        • error: Error

          The error that occurred during loading.

        Returns void

    onLoad?: () => void

    Callback function that executes when the image loads successfully.

    opacity?: number

    Sets the opacity of the node and its children when drawing. A value between 0 (fully transparent) and 1 (fully opaque).

    The node's whole drawing — background, border, content and children — is composited once and then faded, as CSS does. Two overlapping children inside a half-transparent parent are exactly as dark as one of them, rather than compounding into a darker patch where they meet.

    Nesting multiplies: a child at 0.5 inside a parent at 0.5 draws at 0.25 against the page.

    1
    overflow?: Overflow

    Defines how content that overflows the node's bounds is handled. VISIBLE: Content is not clipped and may render outside the node's box. HIDDEN: Content is clipped and the rest is invisible. SCROLL: Yoga lays the node out as a scroll container, but nothing is clipped — a scroll container is a box a reader moves, and nothing here is interactive. It draws as VISIBLE.

    Yoga default (VISIBLE)

    padding?:
        | number
        | `${number}%`
        | Partial<
            Record<
                | "Top"
                | "Bottom"
                | "Left"
                | "Right"
                | "Start"
                | "End"
                | "Horizontal"
                | "Vertical"
                | "All",
                number
                | `${number}%`,
            >,
        >

    Sets the padding space on the inside of the node's border, around the content. Can be a single number for all edges or an object specifying individual edges.

    Pixels.

    Yoga default (0 for each edge)

    https://yogalayout.dev/docs/styling/margin-padding-border

    position?:
        | number
        | `${number}%`
        | Partial<
            Record<
                | "Top"
                | "Bottom"
                | "Left"
                | "Right"
                | "Start"
                | "End"
                | "Horizontal"
                | "Vertical"
                | "All",
                number
                | `${number}%`,
            >,
        >

    Specifies the offset distances for positioned elements (positionType: 'ABSOLUTE' or RELATIVE). Can be a single number for all edges or an object specifying individual edges (Top, Right, Bottom, Left, Start, End). Start and End are affected by direction (LTR/RTL).

    Pixels.

    Yoga default (undefined for each edge)

    https://yogalayout.dev/docs/styling/position

    positionType?: PositionType

    Specifies the positioning method used for the node. RELATIVE: Positioned according to the normal flow, then offset relative to that position. ABSOLUTE: Taken out of the flow and positioned against its immediate parent.

    That last part is where this differs from CSS, and the difference is Yoga's rather than this library's. CSS resolves an absolute node against the nearest positioned ancestor, skipping every static box in between; Yoga always uses the parent, whether or not it is positioned. A layout ported from the browser that relies on skipping an intermediate box will land somewhere else — give the node's own parent the offsets instead.

    Yoga default (RELATIVE)

    saturate?: number

    Adjusts the saturation level of the image. A value of 1 means the image is unchanged. A value of 0 makes the image completely unsaturated (grayscale). Values greater than 1 increase saturation.

    1
    src: string | Buffer<ArrayBufferLike>

    The source URL or file path of the image.

    textAlign?: "center" | "end" | "left" | "right" | "start" | "justify"

    Horizontal text alignment within the node's bounds.

    'left'
    textDecoration?:
        | "none"
        | string & {}
        | "underline"
        | "overline"
        | "line-through"

    Lines drawn on the text, in the notation CSS text-decoration uses.

    A line keyword on its own is the common case; a style, a colour and a thickness may follow in any order, and two line keywords may be combined. Anything that does not parse draws nothing rather than throwing. Inherited, so a heading and its nested spans are decorated together.

    undefined (no lines)

    Text('Sold out', { textDecoration: 'line-through' })
    Text('Heading', { textDecoration: 'underline 3px #2563eb' })
    Text('Misspelt', { textDecoration: 'underline wavy #dc2626' })
    Text('Both', { textDecoration: 'underline line-through' })
    transform?: TransformProps

    Defines the 2D transformations (translate, rotate, scale) applied to the node after layout.

    TransformProps

    undefined (no transformation)
    verticalAlign?: "bottom" | "middle" | "top"

    Vertical text alignment within the node's bounds. Note: Simple implementation aligns based on the first line.

    'top'
    width?: number | `${number}%`

    Sets the width of the node.

    Pixels if it's number, percentage of the parent's width if it's string.

    Yoga default (typically 'auto')

    https://yogalayout.dev/docs/styling/width-height

    wordSpacing?: number | "normal" | `${number}px` | `${number}em`

    Sets the spacing between words. Accepts CSS units like 'normal', '10px', '0.5em'. This space is added to the intrinsic width of the space character.

    'normal' (relies on canvas default)

    https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/wordSpacing

    zIndex?: number

    Specifies the stack order of an element. Only applies to nodes with positionType: 'absolute'. Elements with a larger zIndex cover elements with a smaller one. If elements share the same zIndex, their stacking order is based on their original order in the children array. Elements without a defined zIndex or not absolutely positioned are treated as if they have zIndex: 0 for stacking relative to positioned siblings, but are rendered in their normal flow order relative to other non-positioned elements.

    Settings
    Member Visibility

    On This Page
    Properties