Skip to content

Documentation / @ripl/canvas / CanvasContext

Class: CanvasContext ​

Defined in: canvas/src/context.ts:25

Canvas 2D rendering context implementation, mapping the unified API to CanvasRenderingContext2D.

Extends ​

Constructors ​

Constructor ​

new CanvasContext(target, options?): CanvasContext

Defined in: canvas/src/context.ts:34

Parameters ​

ParameterType
targetstring | HTMLElement
options?ContextOptions<Record<string, unknown>>

Returns ​

CanvasContext

Overrides ​

canvas2DStateMixin(CanvasDOMBase).constructor

Properties ​

PropertyModifierTypeDefault valueDescriptionInherited fromDefined in
contextprotectedCanvasRenderingContext2Dundefined--canvas/src/context.ts:27
currentStateprotectedBaseStateundefined-canvas2DStateMixin(CanvasDOMBase).currentStatecore/src/context/context.ts:104
directionpublicDirectionundefinedThe current text direction.Canvas2DState.directioncanvas/src/mixins.ts:55
elementreadonlyHTMLCanvasElementundefinedThe underlying DOM element the context renders into.canvas2DStateMixin(CanvasDOMBase).elementcore/src/context/context.ts:111
fillpublicstringundefinedThe current fill style: a color or CSS gradient string. Assigning an empty value is ignored, because native canvas rejects it and the paint already in force stays in use.Canvas2DState.fillcanvas/src/mixins.ts:51
filterpublicstringundefinedThe current filter applied to drawing operations.Canvas2DState.filtercanvas/src/mixins.ts:53
fontpublicstringundefinedThe current font used for text rendering.Canvas2DState.fontcanvas/src/mixins.ts:57
fontKerningpublicFontKerningundefinedThe current font kerning mode.Canvas2DState.fontKerningcanvas/src/mixins.ts:59
globalCompositeOperationpublicunknownundefinedThe current compositing operation used when drawing.Canvas2DState.globalCompositeOperationcanvas/src/mixins.ts:63
heightpublicnumberundefinedCurrent height of the rendering surface, in logical pixels — CSS pixels, unaffected by the device pixel ratio.canvas2DStateMixin(CanvasDOMBase).heightcore/src/context/context.ts:124
hitTestHonorsTransformpublicbooleanfalseWhether this context's hit testing natively accounts for element and ancestor group transforms (as SVG does, via the DOM). When false (e.g. canvas), callers map the hit point into the element's local space before testing. See Element.getWorldTransform.canvas2DStateMixin(CanvasDOMBase).hitTestHonorsTransformcore/src/context/context.ts:120
lineCappublicLineCapundefinedThe current line cap style for stroke endpoints.Canvas2DState.lineCapcanvas/src/mixins.ts:65
lineDashpublicnumber[]undefinedThe current line dash pattern.Canvas2DState.lineDashcanvas/src/mixins.ts:67
lineDashOffsetpublicnumberundefinedThe current offset into the line dash pattern.Canvas2DState.lineDashOffsetcanvas/src/mixins.ts:69
lineJoinpublicLineJoinundefinedThe current line join style for stroke corners.Canvas2DState.lineJoincanvas/src/mixins.ts:71
lineWidthpublicnumberundefinedThe current stroke width, in pixels.Canvas2DState.lineWidthcanvas/src/mixins.ts:73
metareadonlyTMetaundefinedArbitrary metadata attached to the context.canvas2DStateMixin(CanvasDOMBase).metacore/src/context/context.ts:113
miterLimitpublicnumberundefinedThe current miter limit for stroke joins.Canvas2DState.miterLimitcanvas/src/mixins.ts:75
opacitypublicnumberundefinedThe current global opacity applied to drawing operations.Canvas2DState.opacitycanvas/src/mixins.ts:61
parent?publicEventBus<ContextEventMap>undefinedThe parent event bus that emitted events bubble up to, if any.canvas2DStateMixin(CanvasDOMBase).parentcore/src/core/event-bus.ts:107
renderDepthprotectednumber0-canvas2DStateMixin(CanvasDOMBase).renderDepthcore/src/context/context.ts:105
renderedElementspublicRenderElement[]undefinedElements rendered during the current pass, used for hit testing.canvas2DStateMixin(CanvasDOMBase).renderedElementscore/src/context/context.ts:132
renderElement?publicRenderElementundefinedThe element currently being rendered, if any.canvas2DStateMixin(CanvasDOMBase).renderElementcore/src/context/context.ts:130
rootreadonlyHTMLElementundefinedThe host DOM element that the context's rendering surface is mounted into.canvas2DStateMixin(CanvasDOMBase).rootdom/src/context.ts:48
saveDepthprotectednumber0-canvas2DStateMixin(CanvasDOMBase).saveDepthcore/src/context/context.ts:106
scaleXpublicScale<number, number>undefinedScale mapping logical x coordinates onto this backend's surface x coordinates. Drives drawing, not a conversion seam for callers — use Context.toSurfacePoint.canvas2DStateMixin(CanvasDOMBase).scaleXcore/src/context/context.ts:126
scaleYpublicScale<number, number>undefinedScale mapping logical y coordinates onto this backend's surface y coordinates. Drives drawing, not a conversion seam for callers — use Context.toSurfacePoint.canvas2DStateMixin(CanvasDOMBase).scaleYcore/src/context/context.ts:128
shadowBlurpublicnumberundefinedThe current shadow blur radius.Canvas2DState.shadowBlurcanvas/src/mixins.ts:77
shadowColorpublicstringundefinedThe current shadow color.Canvas2DState.shadowColorcanvas/src/mixins.ts:79
shadowOffsetXpublicnumberundefinedThe current horizontal shadow offset.Canvas2DState.shadowOffsetXcanvas/src/mixins.ts:81
shadowOffsetYpublicnumberundefinedThe current vertical shadow offset.Canvas2DState.shadowOffsetYcanvas/src/mixins.ts:83
statesprotectedBaseState[]undefined-canvas2DStateMixin(CanvasDOMBase).statescore/src/context/context.ts:103
strokepublicstringundefinedThe current stroke style: a color or CSS gradient string. Assigning an empty value is ignored, because native canvas rejects it and the paint already in force stays in use.Canvas2DState.strokecanvas/src/mixins.ts:85
textAlignpublicTextAlignmentundefinedThe current horizontal text alignment.Canvas2DState.textAligncanvas/src/mixins.ts:87
textBaselinepublicTextBaselineundefinedThe current vertical text baseline.Canvas2DState.textBaselinecanvas/src/mixins.ts:89
typereadonlystringundefinedThe context type identifier (e.g. canvas, svg).canvas2DStateMixin(CanvasDOMBase).typecore/src/context/context.ts:109
widthpublicnumberundefinedCurrent width of the rendering surface, in logical pixels — CSS pixels, unaffected by the device pixel ratio.canvas2DStateMixin(CanvasDOMBase).widthcore/src/context/context.ts:122
defaultKeyreadonlytypeof defaultKeyundefinedThe key under which resources are retained when no explicit key is provided.canvas2DStateMixin(CanvasDOMBase).defaultKeycore/src/core/disposer.ts:11

Accessors ​

$events ​

Get Signature ​

get $events(): keyof ContextEventMap[]

Defined in: core/src/context/context.ts:135

The event types a context can emit. See EventBus.$events.

Returns ​

keyof ContextEventMap[]

Inherited from ​

canvas2DStateMixin(CanvasDOMBase).$events


currentRenderElement ​

Get Signature ​

get currentRenderElement(): RenderElement | undefined

Defined in: core/src/context/context.ts:153

The element currently being rendered; setting a non-abstract element also records it in Context.renderedElements.

Returns ​

RenderElement | undefined

Set Signature ​

set currentRenderElement(element): void

Defined in: core/src/context/context.ts:157

Parameters ​
ParameterType
elementRenderElement | undefined
Returns ​

void

Inherited from ​

canvas2DStateMixin(CanvasDOMBase).currentRenderElement


rotation ​

Get Signature ​

get rotation(): Rotation

Defined in: core/src/context/context.ts:391

Rotation applied to the element's transform, as radians or a deg/rad string.

Returns ​

Rotation

Set Signature ​

set rotation(value): void

Defined in: core/src/context/context.ts:395

Rotation applied to the element's transform, as radians or a deg/rad string.

Parameters ​
ParameterType
valueRotation
Returns ​

void

Inherited from ​

canvas2DStateMixin(CanvasDOMBase).rotation


supportsPathCaching ​

Get Signature ​

get supportsPathCaching(): boolean

Defined in: canvas/src/context.ts:30

Canvas path creation is a side-effect-free new CanvasPath(), so cached paths may be reused across render cycles.

Returns ​

boolean

Overrides ​

canvas2DStateMixin(CanvasDOMBase).supportsPathCaching


transformOriginX ​

Get Signature ​

get transformOriginX(): TransformOrigin

Defined in: core/src/context/context.ts:400

Horizontal origin about which rotation and scaling are applied.

Returns ​

TransformOrigin

Set Signature ​

set transformOriginX(value): void

Defined in: core/src/context/context.ts:404

Horizontal origin about which rotation and scaling are applied.

Parameters ​
ParameterType
valueTransformOrigin
Returns ​

void

Inherited from ​

canvas2DStateMixin(CanvasDOMBase).transformOriginX


transformOriginY ​

Get Signature ​

get transformOriginY(): TransformOrigin

Defined in: core/src/context/context.ts:409

Vertical origin about which rotation and scaling are applied.

Returns ​

TransformOrigin

Set Signature ​

set transformOriginY(value): void

Defined in: core/src/context/context.ts:413

Vertical origin about which rotation and scaling are applied.

Parameters ​
ParameterType
valueTransformOrigin
Returns ​

void

Inherited from ​

canvas2DStateMixin(CanvasDOMBase).transformOriginY


transformScaleX ​

Get Signature ​

get transformScaleX(): number

Defined in: core/src/context/context.ts:373

Horizontal scale factor applied to the element's transform.

Returns ​

number

Set Signature ​

set transformScaleX(value): void

Defined in: core/src/context/context.ts:377

Horizontal scale factor applied to the element's transform.

Parameters ​
ParameterType
valuenumber
Returns ​

void

Inherited from ​

canvas2DStateMixin(CanvasDOMBase).transformScaleX


transformScaleY ​

Get Signature ​

get transformScaleY(): number

Defined in: core/src/context/context.ts:382

Vertical scale factor applied to the element's transform.

Returns ​

number

Set Signature ​

set transformScaleY(value): void

Defined in: core/src/context/context.ts:386

Vertical scale factor applied to the element's transform.

Parameters ​
ParameterType
valuenumber
Returns ​

void

Inherited from ​

canvas2DStateMixin(CanvasDOMBase).transformScaleY


translateX ​

Get Signature ​

get translateX(): number

Defined in: core/src/context/context.ts:355

Horizontal translation, in pixels, applied to the element's transform.

Returns ​

number

Set Signature ​

set translateX(value): void

Defined in: core/src/context/context.ts:359

Horizontal translation, in pixels, applied to the element's transform.

Parameters ​
ParameterType
valuenumber
Returns ​

void

Inherited from ​

canvas2DStateMixin(CanvasDOMBase).translateX


translateY ​

Get Signature ​

get translateY(): number

Defined in: core/src/context/context.ts:364

Vertical translation, in pixels, applied to the element's transform.

Returns ​

number

Set Signature ​

set translateY(value): void

Defined in: core/src/context/context.ts:368

Vertical translation, in pixels, applied to the element's transform.

Parameters ​
ParameterType
valuenumber
Returns ​

void

Inherited from ​

canvas2DStateMixin(CanvasDOMBase).translateY


zIndex ​

Get Signature ​

get zIndex(): number

Defined in: core/src/context/context.ts:346

Stacking order used to sort elements during rendering; higher values draw on top.

Returns ​

number

Set Signature ​

set zIndex(value): void

Defined in: core/src/context/context.ts:350

Stacking order used to sort elements during rendering; higher values draw on top.

Parameters ​
ParameterType
valuenumber
Returns ​

void

Inherited from ​

canvas2DStateMixin(CanvasDOMBase).zIndex

Methods ​

applyClip() ​

Call Signature ​

applyClip(path, fillRule?): void

Defined in: canvas/src/mixins.ts:129

Clips subsequent drawing operations to the given path.

Parameters ​
ParameterType
pathCanvasPath
fillRule?FillRule
Returns ​

void

Inherited from ​

Canvas2DState.applyClip

Call Signature ​

applyClip(path, fillRule?): void

Defined in: core/src/context/context.ts:753

Clips subsequent drawing operations to the given path.

Parameters ​
ParameterType
pathContextPath
fillRule?FillRule
Returns ​

void

Inherited from ​

Canvas2DState.applyClip


applyFill() ​

Call Signature ​

applyFill(element, fillRule?): void

Defined in: canvas/src/mixins.ts:133

Fills the given path or text element using the current fill style.

Parameters ​
ParameterType
elementContextText | CanvasPath
fillRule?FillRule
Returns ​

void

Inherited from ​

Canvas2DState.applyFill

Call Signature ​

applyFill(path, fillRule?): void

Defined in: core/src/context/context.ts:758

Fills the given path or text element using the current fill style.

Parameters ​
ParameterType
pathContextElement
fillRule?FillRule
Returns ​

void

Inherited from ​

Canvas2DState.applyFill


applyGroupPaint() ​

protected applyGroupPaint(group): void

Defined in: core/src/context/context.ts:603

Applies a group's own inherited paint (fill, stroke, opacity, font, line, shadow, text) to the context so descendants pick it up from the copied state. Transforms are applied separately, so they are skipped here.

Two boundary semantics are fixed here and every backend must honour them:

  • Opacity composites multiplicatively. CONTEXT_OPERATIONS multiplies rather than assigns, so nested groups compound and a leaf's own alpha stacks under its ancestors' instead of replacing it.
  • A group's gradient or pattern resolves against the group's own box. The group is the Context.currentRenderElement for the duration of the boundary, so a paint that bakes geometry at set time (canvas) and one that resolves it per leaf (SVG) agree on the same reference box: group.getBoundingBox(true), never a sibling's and never the surface.

Parameters ​

ParameterType
groupElement

Returns ​

void

Inherited from ​

canvas2DStateMixin(CanvasDOMBase).applyGroupPaint


applyStroke() ​

Call Signature ​

applyStroke(element): void

Defined in: canvas/src/mixins.ts:135

Strokes the given path or text element using the current stroke style.

Parameters ​
ParameterType
elementContextText | CanvasPath
Returns ​

void

Inherited from ​

Canvas2DState.applyStroke

Call Signature ​

applyStroke(path): void

Defined in: core/src/context/context.ts:763

Strokes the given path or text element using the current stroke style.

Parameters ​
ParameterType
pathContextElement
Returns ​

void

Inherited from ​

Canvas2DState.applyStroke


batch() ​

batch<TResult>(body): TResult

Defined in: core/src/context/context.ts:534

Clears the rendering surface and brackets the callback in markRenderStart/markRenderEnd, returning the callback's result. On exit the state stack is unwound to the depth captured on entry, giving the scene root the same guarantee Context.popGroup gives a group: a root-level clip: true shape deliberately skips its own restore() so the clip persists to later siblings, and with no enclosing group to absorb it that save would otherwise leak one state per frame, unbounded.

The surface is only cleared at render depth 0: a pass entered while an outer one is open continues it (matching Context.markRenderStart) rather than wiping what it drew.

Type Parameters ​

Type ParameterDefault type
TResultvoid

Parameters ​

ParameterType
body() => TResult

Returns ​

TResult

Inherited from ​

canvas2DStateMixin(CanvasDOMBase).batch


clear() ​

clear(): void

Defined in: canvas/src/mixins.ts:95

Clears the entire canvas surface.

Returns ​

void

Inherited from ​

Canvas2DState.clear


createPath() ​

Call Signature ​

createPath(id?): CanvasPath

Defined in: canvas/src/mixins.ts:127

Creates a new CanvasPath, optionally reusing an id for diffing efficiency.

Parameters ​
ParameterType
id?string
Returns ​

CanvasPath

Inherited from ​

Canvas2DState.createPath

Call Signature ​

createPath(id?): ContextPath

Defined in: core/src/context/context.ts:738

Creates a new path element, optionally reusing an id for SVG diffing efficiency.

Parameters ​
ParameterType
id?string
Returns ​

ContextPath

Inherited from ​

Canvas2DState.createPath


createText() ​

createText(options): ContextText

Defined in: core/src/context/context.ts:743

Creates a new text element from the given options.

Parameters ​

ParameterType
optionsTextOptions

Returns ​

ContextText

Inherited from ​

canvas2DStateMixin(CanvasDOMBase).createText


destroy() ​

destroy(): void

Defined in: canvas/src/context.ts:78

Destroys the context, releasing its cached paint and the canvas backing store on top of the base teardown.

Returns ​

void

Overrides ​

canvas2DStateMixin(CanvasDOMBase).destroy


disableInteraction() ​

disableInteraction(): void

Defined in: dom/src/context.ts:388

Disables DOM interaction events, unwinding any hover with a final mouseleave per element.

Returns ​

void

Inherited from ​

canvas2DStateMixin(CanvasDOMBase).disableInteraction


dispose() ​

protected dispose(key?): void

Defined in: core/src/core/disposer.ts:25

Disposes all resources under the given key, or all resources if no key is provided.

Parameters ​

ParameterType
key?PropertyKey

Returns ​

void

Inherited from ​

canvas2DStateMixin(CanvasDOMBase).dispose


drawImage() ​

drawImage(image, x, y, width?, height?): void

Defined in: canvas/src/mixins.ts:131

Draws an image onto the canvas at the given position, sized to the given width and height; a dimension given on its own is taken with the image's intrinsic size for the other.

Parameters ​

ParameterType
imageCanvasImageSource
xnumber
ynumber
width?number
height?number

Returns ​

void

Inherited from ​

Canvas2DState.drawImage


emit() ​

Call Signature ​

emit<TEvent>(event): TEvent

Defined in: core/src/core/event-bus.ts:185

Emits an event, invoking all matching handlers and bubbling to the parent if applicable. Handlers for the event's own type run first, then EVENT_WILDCARD subscriptions.

Type Parameters ​
Type ParameterDefault type
TEvent extends Event<undefined>Event<undefined>
Parameters ​
ParameterType
eventTEvent
Returns ​

TEvent

Inherited from ​

canvas2DStateMixin(CanvasDOMBase).emit

Call Signature ​

emit<TEvent>(type, data): Event<ContextEventMap[TEvent]>

Defined in: core/src/core/event-bus.ts:186

Emits an event, invoking all matching handlers and bubbling to the parent if applicable. Handlers for the event's own type run first, then EVENT_WILDCARD subscriptions.

Type Parameters ​
Type Parameter
TEvent extends keyof ContextEventMap
Parameters ​
ParameterType
typeTEvent
dataContextEventMap[TEvent]
Returns ​

Event<ContextEventMap[TEvent]>

Inherited from ​

canvas2DStateMixin(CanvasDOMBase).emit


enableInteraction() ​

enableInteraction(): void

Defined in: dom/src/context.ts:344

Enables DOM interaction events (mouse enter, leave, move, down, up, click, drag) with element hit testing.

Returns ​

void

Inherited from ​

canvas2DStateMixin(CanvasDOMBase).enableInteraction


export() ​

export(): ContextExport

Defined in: canvas/src/context.ts:73

Captures a snapshot of the canvas and returns format-specific exporters (see ContextExport).

Returns ​

ContextExport

Overrides ​

canvas2DStateMixin(CanvasDOMBase).export


getDefaultState() ​

protected getDefaultState(): BaseState

Defined in: core/src/context/context.ts:446

Returns ​

BaseState

Inherited from ​

canvas2DStateMixin(CanvasDOMBase).getDefaultState


has() ​

has(type): boolean

Defined in: core/src/core/event-bus.ts:123

Returns whether there are any listeners registered for the given event type. Wildcard subscriptions (EVENT_WILDCARD) are not listeners for any concrete type, so a bus observed only through the wildcard still reports false here.

Parameters ​

ParameterType
typekeyof ContextEventMap

Returns ​

boolean

Inherited from ​

canvas2DStateMixin(CanvasDOMBase).has


hitTest() ​

protected hitTest(events, x, y): RenderElement[]

Defined in: core/src/context/context.ts:808

Tests which rendered elements intersect the given point for the given event types, returning them topmost-first — the exact reverse of the order they were painted in.

The point is in logical space — the space pointer event payloads report — so a handler passes the coordinates it was given straight through.

Paint order is the sole key. Context.renderedElements already records the resolved stacking order (groups paint as contiguous stacking contexts), whereas RenderElement.zIndex is additive across the parent chain and so says nothing about two descendants of different groups; sorting by it discarded correct information.

Parameters ​

ParameterType
eventsstring[]
xnumber
ynumber

Returns ​

RenderElement[]

Inherited from ​

canvas2DStateMixin(CanvasDOMBase).hitTest


init() ​

protected init(): void

Defined in: dom/src/context.ts:85

Returns ​

void

Inherited from ​

canvas2DStateMixin(CanvasDOMBase).init


invalidateTrackedElements() ​

invalidateTrackedElements(event?): void

Defined in: core/src/context/context.ts:496

Clears the cached list of tracked elements for interaction, forcing a rebuild on the next hit test.

Parameters ​

ParameterType
event?string

Returns ​

void

Inherited from ​

canvas2DStateMixin(CanvasDOMBase).invalidateTrackedElements


isPointInPath() ​

isPointInPath(path, x, y, fillRule?): boolean

Defined in: canvas/src/mixins.ts:137

Tests whether a point lies inside the filled region of a path.

Parameters ​

ParameterType
pathContextPath
xnumber
ynumber
fillRule?FillRule

Returns ​

boolean

Inherited from ​

Canvas2DState.isPointInPath


isPointInStroke() ​

isPointInStroke(path, x, y): boolean

Defined in: canvas/src/mixins.ts:139

Tests whether a point lies on the stroked outline of a path.

Parameters ​

ParameterType
pathContextPath
xnumber
ynumber

Returns ​

boolean

Inherited from ​

Canvas2DState.isPointInStroke


layer() ​

layer<TResult>(body): TResult

Defined in: core/src/context/context.ts:472

Executes a callback within a save/restore pair, returning the callback's result.

Type Parameters ​

Type ParameterDefault type
TResultvoid

Parameters ​

ParameterType
body() => TResult

Returns ​

TResult

Inherited from ​

canvas2DStateMixin(CanvasDOMBase).layer


markRenderEnd() ​

markRenderEnd(): void

Defined in: core/src/context/context.ts:519

Signals the end of a render pass. Clamped at zero, so an unbalanced call cannot drive the depth negative and make backends that gate their flush on depth 0 fire mid-frame.

Returns ​

void

Inherited from ​

canvas2DStateMixin(CanvasDOMBase).markRenderEnd


markRenderStart() ​

markRenderStart(): void

Defined in: core/src/context/context.ts:510

Signals the start of a render pass; resets the rendered-elements list at depth 0.

Returns ​

void

Inherited from ​

canvas2DStateMixin(CanvasDOMBase).markRenderStart


measureText() ​

measureText(text, font?): TextMetrics

Defined in: canvas/src/mixins.ts:125

Measures text dimensions using the canvas context's current font, text alignment, and baseline, or an optional font override.

Parameters ​

ParameterType
textstring
font?string

Returns ​

TextMetrics

Inherited from ​

Canvas2DState.measureText


off() ​

off<TEvent>(type, handler): void

Defined in: core/src/core/event-bus.ts:144

Removes a previously registered handler for the given event type.

Type Parameters ​

Type Parameter
TEvent extends keyof ContextEventMap

Parameters ​

ParameterType
typeTEvent
handlerEventHandler<ContextEventMap[TEvent]>

Returns ​

void

Inherited from ​

canvas2DStateMixin(CanvasDOMBase).off


on() ​

on<TEvent>(type, handler, options?): Disposable

Defined in: core/src/core/event-bus.ts:131

Subscribes a handler to the given event type and returns a disposable for cleanup. Pass EVENT_WILDCARD to receive every event emitted on the bus regardless of type.

Type Parameters ​

Type Parameter
TEvent extends keyof ContextEventMap

Parameters ​

ParameterType
typeTEvent
handlerEventHandler<ContextEventMap[TEvent]>
options?EventSubscriptionOptions

Returns ​

Disposable

Inherited from ​

canvas2DStateMixin(CanvasDOMBase).on


once() ​

once<TEvent>(type, handler, options?): Disposable

Defined in: core/src/core/event-bus.ts:159

Subscribes a handler that is automatically removed after it fires once.

Type Parameters ​

Type Parameter
TEvent extends keyof ContextEventMap

Parameters ​

ParameterType
typeTEvent
handlerEventHandler<ContextEventMap[TEvent]>
options?EventSubscriptionOptions

Returns ​

Disposable

Inherited from ​

canvas2DStateMixin(CanvasDOMBase).once


popGroup() ​

popGroup(): void

Defined in: core/src/context/context.ts:620

Closes the most recently opened group boundary, unwinding the state stack back to the depth captured at Context.pushGroup and restoring the render element that was current before it. This absorbs any dangling save() left by a group-scoped clip (which deliberately skips its own restore so the clip persists to later siblings), confining the clip to the group rather than leaking it to the scene.

Returns ​

void

Inherited from ​

canvas2DStateMixin(CanvasDOMBase).popGroup


pushGroup() ​

pushGroup(group): void

Defined in: core/src/context/context.ts:573

Opens a group boundary: saves the current drawing state and applies the group's own transform and inherited paint (see applyGroupPaint for the opacity and gradient-bounds semantics every backend must honour), so that descendant elements render within the group's coordinate system, inherit its paint through the copied state (the render-tree cascade), and composite under its opacity. Any group-scoped clip is confined to the group. Every Context.pushGroup must be balanced by a matching Context.popGroup. Backends that render hierarchy structurally (such as SVG) override this to nest descendants under a group node.

Parameters ​

ParameterTypeDescription
groupElementThe group element whose boundary is being entered.

Returns ​

void

Inherited from ​

canvas2DStateMixin(CanvasDOMBase).pushGroup


requestRender() ​

requestRender(): void

Defined in: core/src/context/context.ts:505

Requests that the bound scene repaint on the next frame, for context-level changes (e.g. a 3D camera move) that mutate no element and so would otherwise be skipped by the renderer's dirty check.

Returns ​

void

Inherited from ​

canvas2DStateMixin(CanvasDOMBase).requestRender


rescale() ​

protected rescale(width, height): void

Defined in: canvas/src/context.ts:53

Parameters ​

ParameterType
widthnumber
heightnumber

Returns ​

void

Overrides ​

canvas2DStateMixin(CanvasDOMBase).rescale


reset() ​

reset(): void

Defined in: canvas/src/mixins.ts:97

Resets the context to its default state, dropping the saved-state stack and re-installing the device-pixel-ratio transform the surface is drawn through.

Returns ​

void

Inherited from ​

Canvas2DState.reset


restore() ​

restore(): void

Defined in: canvas/src/mixins.ts:93

Restores the most recently saved drawing state from the stack; a no-op when the stack is empty.

Returns ​

void

Inherited from ​

Canvas2DState.restore


retain() ​

protected retain(value, key?): void

Defined in: core/src/core/disposer.ts:14

Registers a disposable resource under an optional key for later cleanup.

Parameters ​

ParameterTypeDefault value
valueDisposableundefined
keyPropertyKeyDisposer.defaultKey

Returns ​

void

Inherited from ​

canvas2DStateMixin(CanvasDOMBase).retain


rotate() ​

rotate(angle): void

Defined in: canvas/src/mixins.ts:99

Applies a rotation transformation, in radians.

Parameters ​

ParameterType
anglenumber

Returns ​

void

Inherited from ​

Canvas2DState.rotate


save() ​

save(): void

Defined in: canvas/src/mixins.ts:91

Saves the current drawing state, including the resolved Canvas2DState.fill and Canvas2DState.stroke strings, onto the state stack.

Returns ​

void

Inherited from ​

Canvas2DState.save


scale() ​

scale(x, y): void

Defined in: canvas/src/mixins.ts:101

Applies a scale transformation.

Parameters ​

ParameterType
xnumber
ynumber

Returns ​

void

Inherited from ​

Canvas2DState.scale


setTransform() ​

setTransform(a, b, c, d, e, f): void

Defined in: canvas/src/mixins.ts:113

Replaces the current transformation matrix with [a, b, c, d, e, f].

Parameters ​

ParameterTypeDescription
anumberHorizontal scaling.
bnumberVertical skewing.
cnumberHorizontal skewing.
dnumberVertical scaling.
enumberHorizontal translation.
fnumberVertical translation.

Returns ​

void

Inherited from ​

Canvas2DState.setTransform


toLogicalPoint() ​

toLogicalPoint(x, y): [number, number]

Defined in: core/src/context/context.ts:697

Maps a point from surface space — this backend's own drawing coordinates, as produced by Context.scaleX and Context.scaleY — into the logical space elements are authored in and every public coordinate is expressed in.

Backends disagree on what surface space is: canvas maps logical coordinates onto device pixels while SVG leaves them identity, so a backend has to invert what this context actually does rather than assume the device pixel ratio.

This is a seam for backend implementors, not for consumers — nothing crossing the public API is in surface space, so a caller holding a pointer coordinate already has a logical one.

Parameters ​

ParameterTypeDescription
xnumberX coordinate in surface space.
ynumberY coordinate in surface space.

Returns ​

[number, number]

The [x, y] pair in logical space.

Inherited from ​

canvas2DStateMixin(CanvasDOMBase).toLogicalPoint


toSurfacePoint() ​

toSurfacePoint(x, y): [number, number]

Defined in: core/src/context/context.ts:710

Maps a point from the logical space elements are authored in into this backend's own drawing coordinates. The inverse of Context.toLogicalPoint, and likewise a seam for backend implementors rather than consumers.

Parameters ​

ParameterTypeDescription
xnumberX coordinate in logical space.
ynumberY coordinate in logical space.

Returns ​

[number, number]

The [x, y] pair in surface space.

Inherited from ​

canvas2DStateMixin(CanvasDOMBase).toSurfacePoint


transform() ​

transform(a, b, c, d, e, f): void

Defined in: canvas/src/mixins.ts:123

Multiplies the current transformation matrix by [a, b, c, d, e, f].

Parameters ​

ParameterTypeDescription
anumberHorizontal scaling.
bnumberVertical skewing.
cnumberHorizontal skewing.
dnumberVertical scaling.
enumberHorizontal translation.
fnumberVertical translation.

Returns ​

void

Inherited from ​

Canvas2DState.transform


translate() ​

translate(x, y): void

Defined in: canvas/src/mixins.ts:103

Applies a translation transformation.

Parameters ​

ParameterType
xnumber
ynumber

Returns ​

void

Inherited from ​

Canvas2DState.translate