Skip to main content

Abstract Class: RenderContext

Defined in: render/render-context.ts:151

The full rendering context passed to every scene-graph node when it draws itself. Combines shape drawing (Render2DContext), text measurement (MeasureScope), and higher-level scoping operations (transforms, masks, clips, camera, boolean ops, backdrop effects).

begin(id) / end() bracket each node's draw call so the context can track which node is active and look up per-node state (space rects, etc.). The concrete implementations (CanvasKitRenderContext, SvgRenderContext, …) translate these abstract calls into renderer-specific drawing commands.

Extends​

Implements​

Constructors​

Constructor​

new RenderContext(): RenderContext

Returns​

RenderContext

Inherited from​

Render2DContext.constructor

Methods​

applyMask()​

abstract applyMask(): Render2DPaintContext

Defined in: render/render-context.ts:229

Returns​

Render2DPaintContext

begin()​

begin(id, rects?): void

Defined in: render/render-context.ts:306

Open a node draw scope. Must be paired with end(). Pushes id onto the node stack and records the optional rects for gradient-space resolution.

Parameters​

id​

string

Stable node identifier (used for layer caching, etc.).

rects?​

SpaceRects

Parent / viewport rects in this node's local space.

Returns​

void

beginBackdropSkSL()​

beginBackdropSkSL(_effect, _width, _height): void

Defined in: render/render-context.ts:272

Open a custom SkSL backdrop layer. The shader receives uniform shader u_backdrop (a snapshot of the canvas beneath the node) and can produce distortion, ripple, refraction, etc., clipped to the active silhouette clip. No-op by default.

Parameters​

_effect​

SkSLEffect

_width​

number

_height​

number

Returns​

void

beginBackgroundBlur()​

beginBackgroundBlur(_radius): void

Defined in: render/render-context.ts:255

Open a backdrop-blur layer. The already-painted canvas beneath the node is blurred by radius and composited back, clipped to the active silhouette clip. No-op by default.

Parameters​

_radius​

number

Returns​

void

beginBackgroundDistortion()​

beginBackgroundDistortion(_effect, _width, _height): void

Defined in: render/render-context.ts:263

Open a backdrop-distortion (bulge/pinch or zoom) layer. The backdrop is warped by a lens centred on the node (width × height), clipped to the active silhouette clip. No-op by default.

Parameters​

_effect​

BulgePinchEffect | ZoomEffect

_width​

number

_height​

number

Returns​

void

beginBoolean()​

abstract beginBoolean(op): void

Defined in: render/render-context.ts:199

Open a boolean-path collection scope. Shapes drawn until endBoolean() are gathered (fills/strokes suppressed) and combined with op. The merged path is returned as a Render2DPaintContext so callers can style the combined result with .fill() / .stroke() / .shadow().

Parameters​

op​

BooleanOperation

Returns​

void

beginCamera()​

abstract beginCamera(viewport, centerOn, zoom, heading): void

Defined in: render/render-context.ts:286

Push a camera viewport. Clips to viewport (canvas-space, centred coords) and applies the inverse camera transform so children render as seen through the lens. heading rotates the world counter to the camera angle. Paired with endCamera().

Parameters​

viewport​

Bounding rect of the camera node in canvas space.

height​

number

width​

number

x​

number

y​

number

centerOn​

Vector2

World-space point the camera looks at.

zoom​

number

Uniform scale applied around centerOn.

heading​

number

Camera rotation in degrees.

Returns​

void

beginClipEllipse()​

abstract beginClipEllipse(state): void

Defined in: render/render-context.ts:238

Push an elliptical clip region. Paired with endClip().

Parameters​

state​

Partial<EllipseState>

Returns​

void

beginClipRect()​

abstract beginClipRect(state): void

Defined in: render/render-context.ts:236

Push a rectangular clip region so children are confined to the node's rect boundary. Paired with endClip().

Parameters​

state​

Partial<RectState>

Returns​

void

beginClipShape()​

beginClipShape(_shape): void

Defined in: render/render-context.ts:248

Push a silhouette clip built from shape's outline — used by backdrop effects to confine the effect to the node's exact boundary regardless of shape type. Paired with endClip(). No-op by default; renderers that don't support it can leave this unimplemented.

Parameters​

_shape​

ClipShape

Returns​

void

beginMask()​

abstract beginMask(options?): void

Defined in: render/render-context.ts:228

Parameters​

options?​

MaskOptions

Returns​

void

dispose()​

dispose(): void

Defined in: render/render-context.ts:174

Returns​

void

ellipse()​

abstract ellipse(state): Render2DPaintContext

Defined in: render/render-context.ts:80

Declare an ellipse (circle when width === height).

Parameters​

state​

Partial<EllipseState>

Returns​

Render2DPaintContext

Inherited from​

Render2DContext.ellipse

end()​

end(): void

Defined in: render/render-context.ts:312

Close the innermost node draw scope opened by begin().

Returns​

void

endBackdropSkSL()​

endBackdropSkSL(): void

Defined in: render/render-context.ts:273

Returns​

void

endBackgroundBlur()​

endBackgroundBlur(): void

Defined in: render/render-context.ts:256

Returns​

void

endBackgroundDistortion()​

endBackgroundDistortion(): void

Defined in: render/render-context.ts:264

Returns​

void

endBoolean()​

abstract endBoolean(): Render2DPaintContext

Defined in: render/render-context.ts:200

Returns​

Render2DPaintContext

endCamera()​

abstract endCamera(): void

Defined in: render/render-context.ts:287

Returns​

void

endClip()​

abstract endClip(): void

Defined in: render/render-context.ts:240

Pop the most-recently pushed clip region.

Returns​

void

endMask()​

abstract endMask(): void

Defined in: render/render-context.ts:230

Returns​

void

image()​

abstract image(state): Render2DPaintContext

Defined in: render/render-context.ts:90

Declare a raster image.

Parameters​

state​

Partial<ImageState>

Returns​

Render2DPaintContext

Inherited from​

Render2DContext.image

isDisposed()​

isDisposed(): boolean

Defined in: render/render-context.ts:171

true after dispose() — the context must not be used after this point.

Returns​

boolean

line()​

abstract line(state): Render2DPaintContext

Defined in: render/render-context.ts:88

Declare a straight line segment.

Parameters​

state​

Partial<LineState>

Returns​

Render2DPaintContext

Inherited from​

Render2DContext.line

mask()​

abstract mask(options?): Render2DPaintContext

Defined in: render/render-context.ts:227

Parameters​

options?​

MaskOptions

Returns​

Render2DPaintContext

measureText()​

abstract measureText(text, fontSize, fontFamily, fontWeight?, letterSpacing?, fontStyle?): number

Defined in: render/render-context.ts:152

Returns the advance width (in pixels) of text rendered at the given fontSize with the specified font properties.

Parameters​

text​

string

The string to measure.

fontSize​

number

Size in pixels.

fontFamily​

string

CSS-style family name (e.g. "Inter").

fontWeight?​

number

Numeric weight (100–900). Defaults to 400 when omitted.

letterSpacing?​

number

Extra inter-glyph spacing in pixels. Defaults to 0.

fontStyle?​

FontStyle

Italic / oblique variant. Defaults to normal.

Returns​

number

Advance width in pixels.

Implementation of​

MeasureScope.measureText

path()​

abstract path(state): Render2DPaintContext

Defined in: render/render-context.ts:86

Declare a vector path, either from a PathState or a PathBuilder.

Parameters​

state​

Partial<PathState> | PathBuilder

Returns​

Render2DPaintContext

Inherited from​

Render2DContext.path

polygon()​

abstract polygon(state): Render2DPaintContext

Defined in: render/render-context.ts:92

Declare a regular polygon (triangle, pentagon, …).

Parameters​

state​

Partial<PolygonState>

Returns​

Render2DPaintContext

Inherited from​

Render2DContext.polygon

polygram()​

abstract polygram(state): Render2DPaintContext

Defined in: render/render-context.ts:94

Declare a star / polygram.

Parameters​

state​

Partial<PolygramState>

Returns​

Render2DPaintContext

Inherited from​

Render2DContext.polygram

rect()​

abstract rect(state): Render2DPaintContext

Defined in: render/render-context.ts:78

Declare an axis-aligned rectangle.

Parameters​

state​

Partial<RectState>

Returns​

Render2DPaintContext

Inherited from​

Render2DContext.rect

render()​

abstract render(callback): void

Defined in: render/render-context.ts:182

Execute callback, which issues shape/paint calls, and flush the result to the underlying render target (canvas, SVG document, etc.).

Parameters​

callback​

() => void

Returns​

void

richText()​

abstract richText(state): Render2DPaintContext

Defined in: render/render-context.ts:84

Declare a multi-span rich-text block.

Parameters​

state​

Partial<RichTextState>

Returns​

Render2DPaintContext

Inherited from​

Render2DContext.richText

screenshot()​

abstract screenshot(): string | undefined

Defined in: render/render-context.ts:184

Capture the current frame as a base-64 PNG data URL, or undefined if unsupported.

Returns​

string | undefined

text()​

abstract text(state): Render2DPaintContext

Defined in: render/render-context.ts:82

Declare a single-style text run.

Parameters​

state​

Partial<TextState>

Returns​

Render2DPaintContext

Inherited from​

Render2DContext.text

transform()​

abstract transform(state): RenderContext

Defined in: render/render-context.ts:191

Push a transform (position, rotation, scale, opacity, …) and return this so subsequent draw calls are issued in the transformed space. The transform is popped when end() is called for the node that pushed it.

Parameters​

state​

Partial<TransformState>

Returns​

RenderContext

unmount()​

abstract unmount(): void

Defined in: render/render-context.ts:167

Remove all renderer-side resources for the current node (called on unmount).

Returns​

void