surfacePaintAt

Returns the fill and opacity a heatmap or contour draws at position t, 0 to 1, of its value range, blending across a !cue.to colour change.

@internote/canvas-sdkFunction
On this page
import { surfacePaintAt } from '@internote/canvas-sdk';

The one call a stroked or filled surface mark needs. It answers in both dimensions at once because which of the two carries the range depends on the colour, and a cue can move it from one to the other: a hue or a list of stops varies colour at full strength, while a lone literal has no range to show in colour and varies opacity instead.

A transition is resolved by resampling rather than by pairing stops: each side is asked what it paints at this same t and the two answers are mixed, so a three-stop hue cued to a five-stop list needs no pairing.

#Signature

(
    resolved: unknown,
    transition: TrackTransition | null | undefined,
    t: number,
    fallback: string,
): {
    fill: string;
    opacity: number;
}

#Parameters

resolved
The colour attribute's value at this moment, as ctx.animation resolves it.
transition
The attribute's transition from ctx.animation.attrTransition, or null when it carries no track.
t
The position along the value range.
fallback
The fill to use when the value is not a colour.

#Example

const transition = ctx.animation.attrTransition(node, 'colour');
const { fill, opacity } = surfacePaintAt(attrs.colour, transition, (value - min) / (max - min), 'var(--grey-6)');

Declared in packages/canvas-sdk/src/paint/index.ts:278.

Last updated