Class: Graphics

Defined in: render/graphics.ts:110

A renderer-agnostic, chainable shape/paint builder.

Graphics records a sequence of shape declarations and paint/compositing operations without touching any renderer. A built Graphics is handed to a RenderContext via ctx.draw(graphics), which replays the recorded ops against its concrete drawing backend.

const g = new Graphics() .ellipse({ width: 100, height: 100 }) .rect({ width: 40, height: 40, rotation: 30 }) // per-shape: tilts this rect only .fill(Fills.color("red")) .stroke({ weight: 2, fill: "black" }) .rotation(15) // graphics-level: turns the whole union .effects(FX.blur(6)); // graphics-level: blurs the whole drawn union ctx.draw(g);

Multiple shapes chained before a paint call are combined into a single surface and painted together (one gradient maps across all of them). cut() uses the most-recently declared shape as a cutter against the shapes before it. The mask()/applyMask()/endMask() ops support an inline mask scope within a single draw().

Transforms come in two flavours. A per-shape rotation/scale is passed inside a shape's params (e.g. .rect({ ..., rotation: 30, scale: 1.2 })): it's baked into that shape's geometry before it joins the union. The graphics-level .rotation(value, center?) / .scale(value, center?) modifiers instead transform the whole union of shapes about a pivot (default: the union's bounding-box centre) — turning or growing the entire drawn silhouette as one.

opacity() is graphics-level: it composites the entire drawn result (all shapes together) into one layer at the given alpha, exactly like a node-level transform — so a trailing .opacity(0.4) dims the whole union.

effects() scopes like fill(): it applies to the shapes and paints accumulated since the previous effects() call (or the start), then closes that group off — shapes declared after it start a fresh, unaffected group, as if a new Graphics had begun. So .ellipse().ellipse().fill().effects(FX.blur(8)) blurs those two ellipses as one union, and a following .rect().fill() renders crisp. Chaining a second .effects() later filters only that later group.

Constructors

Constructor

new Graphics(): Graphics

Returns

Graphics

Methods

_withOps()

_withOps(ops): Graphics

Defined in: render/graphics.ts:321

Internal

Parameters

ops

GraphicsOp[]

Returns

Graphics

applyMask()

applyMask(): this

Defined in: render/graphics.ts:200

Returns

this

cut()

cut(): this

Defined in: render/graphics.ts:185

Use the last-declared shape as a cutter: union the shapes before it and subtract that last shape, leaving the result as the current surface so subsequent shapes and paint calls treat everything as one.

Returns

this

effects()

effects(effects): this

Defined in: render/graphics.ts:235

Apply image effects to the current shape group, scoped like fill: the shapes and paints recorded since the previous effects() call (or the start of this Graphics) are composited through the composed filter as one layer, so the effect reads that group's union silhouette (a blur bleeds across the group's combined edges, not each shape's). Calling effects() closes the group — shapes declared afterwards start a fresh, unfiltered group, as if a new Graphics had begun. Accepts an Effect — a single effect, an array, or an FX/EffectChain builder result — normalised to a SceneEffect[].

Parameters

effects

Effect

Returns

this

ellipse()

ellipse(state): this

Defined in: render/graphics.ts:124

Parameters

state

Partial<EllipseState> & ShapeAnchorInput

Returns

this

endMask()

endMask(): this

Defined in: render/graphics.ts:205

Returns

this

fill()

fill(fills): this

Defined in: render/graphics.ts:163

Parameters

fills

Fill

Returns

this

groupOpacity()

groupOpacity(): number

Defined in: render/graphics.ts:274

Graphics-level opacity (0–1) for the whole group. Default 1.

Returns

number

groupTransform()

groupTransform(): GraphicsTransform | null

Defined in: render/graphics.ts:293

The union-level rotate/scale set by rotation / scale, or null when both are identity. The renderer applies this as a canvas transform about center (default: the union's bbox centre) wrapping the whole drawn union.

Returns

GraphicsTransform | null

isPaintOnly()

isPaintOnly(): boolean

Defined in: render/graphics.ts:301

True when this Graphics has no shape ops (only paint/compositing) — used by renderers to paint an externally-prepared surface (e.g. a boolean result) without resetting their shape accumulator.

Returns

boolean

line()

line(state): this

Defined in: render/graphics.ts:136

Parameters

state

Partial<LineState>

Returns

this

mask()

mask(options?): this

Defined in: render/graphics.ts:195

Open an inline mask scope. Shapes declared after this (until applyMask()) are the mask; shapes after applyMask() are the content. Close with endMask().

Parameters

options?

MaskOptions

Returns

this

needsGroupLayer()

needsGroupLayer(): boolean

Defined in: render/graphics.ts:283

True when the whole graphics needs a composited layer (opacity < 1). Effects no longer force a whole-graphics layer — each effects op scopes its own layer to its shape group during replay (see effects).

Returns

boolean

opacity()

opacity(opacity): this

Defined in: render/graphics.ts:219

Set the opacity of the whole graphics group (0–1). The entire drawn result is composited into one layer at this alpha, so overlapping shapes don't double up. Applies to everything in the list, not just the last shape.

Parameters

opacity

number

Returns

this

ops()

ops(): readonly GraphicsOp[]

Defined in: render/graphics.ts:269

The recorded ops, in order. Consumed by RenderContext.draw().

Returns

readonly GraphicsOp[]

path()

path(state): this

rotation(rotation, center?): this

Defined in: render/graphics.ts:248

Rotate the whole union of shapes (degrees) about center — either an explicit Vector2 in local space or a named anchor ('topRight', 'bottomCenter', …) resolved against the union's bounding box (default: the box's centre). Unlike a per-shape rotation passed inside a shape's params, this mutates the combined silhouette — every shape turns together as one figure.

Parameters

rotation

number

center?

Anchor

Returns

this

scale()

scale(scale, center?): this

Defined in: render/graphics.ts:260

Scale the whole union of shapes about center — an explicit Vector2 or a named anchor resolved against the union's bounding box (default: the box's centre). Like rotation, this transforms the combined silhouette rather than a single shape.

Parameters

scale

number

center?

Anchor

Returns

this

shadow()

shadow(shadows): this

Defined in: render/graphics.ts:173

Parameters

shadows

Shadow

Returns

this

stroke()

stroke(strokes): this

Defined in: render/graphics.ts:168

Parameters

strokes

Stroke

Returns

this

text()

text(state): this

Defined in: render/graphics.ts:151

Parameters

state

Partial<TextState> & ShapeAnchorInput

Returns

this