Documentation / @ripl/3d / CanvasContext3D

Class: CanvasContext3D

Defined in: 3d/src/context.ts:213

Canvas 2D–backed 3D rendering context with face buffer and painter's algorithm sorting.

Extends

• Context3D

Constructors

Constructor

new CanvasContext3D(target, options?): CanvasContext3D

Defined in: 3d/src/context.ts:383

Parameters

Parameter	Type
target	string | HTMLElement
options?	Context3DOptions

Returns

CanvasContext3D

Overrides

Context3D.constructor

Properties

Property	Modifier	Type	Default value	Inherited from	Defined in
buffer	public	boolean	false	Context3D.buffer	core/src/context/context.ts:101
context	protected	CanvasRenderingContext2D	undefined	-	3d/src/context.ts:215
currentState	protected	BaseState	undefined	Context3D.currentState	core/src/context/context.ts:111
element	readonly	HTMLCanvasElement	undefined	Context3D.element	core/src/context/context.ts:98
faceBuffer	public	ProjectedFace3D[]	[]	Context3D.faceBuffer	3d/src/context.ts:97
far	protected	number	undefined	Context3D.far	3d/src/context.ts:101
fov	protected	number	undefined	Context3D.fov	3d/src/context.ts:99
height	public	number	undefined	Context3D.height	core/src/context/context.ts:103
lightDirection	public	Vector3	undefined	Context3D.lightDirection	3d/src/context.ts:95
lightMode	public	LightMode	undefined	Context3D.lightMode	3d/src/context.ts:96
meta	readonly	Context3DMeta	undefined	Context3D.meta	core/src/context/context.ts:99
near	protected	number	undefined	Context3D.near	3d/src/context.ts:100
parent?	public	EventBus<ContextEventMap>	undefined	Context3D.parent	core/src/core/event-bus.ts:79
projectionMatrix	public	Matrix4	undefined	Context3D.projectionMatrix	3d/src/context.ts:93
renderDepth	protected	number	0	Context3D.renderDepth	core/src/context/context.ts:112
renderedElements	public	RenderElement[]	undefined	Context3D.renderedElements	core/src/context/context.ts:108
renderElement?	public	RenderElement	undefined	Context3D.renderElement	core/src/context/context.ts:107
root	readonly	HTMLElement	undefined	Context3D.root	dom/src/context.ts:44
scaleDPR	public	Scale<number, number>	undefined	Context3D.scaleDPR	core/src/context/context.ts:106
scaleX	public	Scale<number, number>	undefined	Context3D.scaleX	core/src/context/context.ts:104
scaleY	public	Scale<number, number>	undefined	Context3D.scaleY	core/src/context/context.ts:105
states	protected	BaseState[]	undefined	Context3D.states	core/src/context/context.ts:110
type	readonly	string	undefined	Context3D.type	core/src/context/context.ts:97
viewMatrix	public	Matrix4	undefined	Context3D.viewMatrix	3d/src/context.ts:92
viewProjectionMatrix	public	Matrix4	undefined	Context3D.viewProjectionMatrix	3d/src/context.ts:94
width	public	number	undefined	Context3D.width	core/src/context/context.ts:102
defaultKey	readonly	typeof defaultKey	undefined	Context3D.defaultKey	core/src/core/disposer.ts:10

Accessors

currentRenderElement

Get Signature

get currentRenderElement(): RenderElement | undefined

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

Returns

RenderElement | undefined

Set Signature

set currentRenderElement(element): void

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

Parameters

Parameter	Type
element	RenderElement | undefined

Returns

void

Inherited from

Context3D.currentRenderElement

---

direction

Get Signature

get direction(): Direction

Defined in: 3d/src/context.ts:237

Returns

Direction

Set Signature

set direction(value): void

Defined in: 3d/src/context.ts:241

Parameters

Parameter	Type
value	Direction

Returns

void

Overrides

Context3D.direction

---

fill

Get Signature

get fill(): string

Defined in: 3d/src/context.ts:219

Returns

string

Set Signature

set fill(value): void

Defined in: 3d/src/context.ts:223

Parameters

Parameter	Type
value	string

Returns

void

Overrides

Context3D.fill

---

filter

Get Signature

get filter(): string

Defined in: 3d/src/context.ts:229

Returns

string

Set Signature

set filter(value): void

Defined in: 3d/src/context.ts:233

Parameters

Parameter	Type
value	string

Returns

void

Overrides

Context3D.filter

---

font

Get Signature

get font(): string

Defined in: 3d/src/context.ts:245

Returns

string

Set Signature

set font(value): void

Defined in: 3d/src/context.ts:249

Parameters

Parameter	Type
value	string

Returns

void

Overrides

Context3D.font

---

fontKerning

Get Signature

get fontKerning(): FontKerning

Defined in: 3d/src/context.ts:253

Returns

FontKerning

Set Signature

set fontKerning(value): void

Defined in: 3d/src/context.ts:257

Parameters

Parameter	Type
value	FontKerning

Returns

void

Overrides

Context3D.fontKerning

---

globalCompositeOperation

Get Signature

get globalCompositeOperation(): unknown

Defined in: 3d/src/context.ts:269

Returns

unknown

Set Signature

set globalCompositeOperation(value): void

Defined in: 3d/src/context.ts:273

Parameters

Parameter	Type
value	unknown

Returns

void

Overrides

Context3D.globalCompositeOperation

---

lineCap

Get Signature

get lineCap(): LineCap

Defined in: 3d/src/context.ts:277

Returns

LineCap

Set Signature

set lineCap(value): void

Defined in: 3d/src/context.ts:281

Parameters

Parameter	Type
value	LineCap

Returns

void

Overrides

Context3D.lineCap

---

lineDash

Get Signature

get lineDash(): number[]

Defined in: 3d/src/context.ts:285

Returns

number[]

Set Signature

set lineDash(value): void

Defined in: 3d/src/context.ts:289

Parameters

Parameter	Type
value	number[]

Returns

void

Overrides

Context3D.lineDash

---

lineDashOffset

Get Signature

get lineDashOffset(): number

Defined in: 3d/src/context.ts:293

Returns

number

Set Signature

set lineDashOffset(value): void

Defined in: 3d/src/context.ts:297

Parameters

Parameter	Type
value	number

Returns

void

Overrides

Context3D.lineDashOffset

---

lineJoin

Get Signature

get lineJoin(): LineJoin

Defined in: 3d/src/context.ts:301

Returns

LineJoin

Set Signature

set lineJoin(value): void

Defined in: 3d/src/context.ts:305

Parameters

Parameter	Type
value	LineJoin

Returns

void

Overrides

Context3D.lineJoin

---

lineWidth

Get Signature

get lineWidth(): number

Defined in: 3d/src/context.ts:309

Returns

number

Set Signature

set lineWidth(value): void

Defined in: 3d/src/context.ts:313

Parameters

Parameter	Type
value	number

Returns

void

Overrides

Context3D.lineWidth

---

miterLimit

Get Signature

get miterLimit(): number

Defined in: 3d/src/context.ts:317

Returns

number

Set Signature

set miterLimit(value): void

Defined in: 3d/src/context.ts:321

Parameters

Parameter	Type
value	number

Returns

void

Overrides

Context3D.miterLimit

---

opacity

Get Signature

get opacity(): number

Defined in: 3d/src/context.ts:261

Returns

number

Set Signature

set opacity(value): void

Defined in: 3d/src/context.ts:265

Parameters

Parameter	Type
value	number

Returns

void

Overrides

Context3D.opacity

---

renderStrategy

Get Signature

get renderStrategy(): RenderStrategy

Defined in: 3d/src/context.ts:103

Returns

RenderStrategy

Inherited from

Context3D.renderStrategy

---

rotation

Get Signature

get rotation(): Rotation

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

Returns

Rotation

Set Signature

set rotation(value): void

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

Parameters

Parameter	Type
value	Rotation

Returns

void

Inherited from

Context3D.rotation

---

shadowBlur

Get Signature

get shadowBlur(): number

Defined in: 3d/src/context.ts:325

Returns

number

Set Signature

set shadowBlur(value): void

Defined in: 3d/src/context.ts:329

Parameters

Parameter	Type
value	number

Returns

void

Overrides

Context3D.shadowBlur

---

shadowColor

Get Signature

get shadowColor(): string

Defined in: 3d/src/context.ts:333

Returns

string

Set Signature

set shadowColor(value): void

Defined in: 3d/src/context.ts:337

Parameters

Parameter	Type
value	string

Returns

void

Overrides

Context3D.shadowColor

---

shadowOffsetX

Get Signature

get shadowOffsetX(): number

Defined in: 3d/src/context.ts:341

Returns

number

Set Signature

set shadowOffsetX(value): void

Defined in: 3d/src/context.ts:345

Parameters

Parameter	Type
value	number

Returns

void

Overrides

Context3D.shadowOffsetX

---

shadowOffsetY

Get Signature

get shadowOffsetY(): number

Defined in: 3d/src/context.ts:349

Returns

number

Set Signature

set shadowOffsetY(value): void

Defined in: 3d/src/context.ts:353

Parameters

Parameter	Type
value	number

Returns

void

Overrides

Context3D.shadowOffsetY

---

stroke

Get Signature

get stroke(): string

Defined in: 3d/src/context.ts:357

Returns

string

Set Signature

set stroke(value): void

Defined in: 3d/src/context.ts:361

Parameters

Parameter	Type
value	string

Returns

void

Overrides

Context3D.stroke

---

textAlign

Get Signature

get textAlign(): TextAlignment

Defined in: 3d/src/context.ts:367

Returns

TextAlignment

Set Signature

set textAlign(value): void

Defined in: 3d/src/context.ts:371

Parameters

Parameter	Type
value	TextAlignment

Returns

void

Overrides

Context3D.textAlign

---

textBaseline

Get Signature

get textBaseline(): TextBaseline

Defined in: 3d/src/context.ts:375

Returns

TextBaseline

Set Signature

set textBaseline(value): void

Defined in: 3d/src/context.ts:379

Parameters

Parameter	Type
value	TextBaseline

Returns

void

Overrides

Context3D.textBaseline

---

transformOriginX

Get Signature

get transformOriginX(): TransformOrigin

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

Returns

TransformOrigin

Set Signature

set transformOriginX(value): void

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

Parameters

Parameter	Type
value	TransformOrigin

Returns

void

Inherited from

Context3D.transformOriginX

---

transformOriginY

Get Signature

get transformOriginY(): TransformOrigin

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

Returns

TransformOrigin

Set Signature

set transformOriginY(value): void

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

Parameters

Parameter	Type
value	TransformOrigin

Returns

void

Inherited from

Context3D.transformOriginY

---

transformScaleX

Get Signature

get transformScaleX(): number

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

Returns

number

Set Signature

set transformScaleX(value): void

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

Parameters

Parameter	Type
value	number

Returns

void

Inherited from

Context3D.transformScaleX

---

transformScaleY

Get Signature

get transformScaleY(): number

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

Returns

number

Set Signature

set transformScaleY(value): void

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

Parameters

Parameter	Type
value	number

Returns

void

Inherited from

Context3D.transformScaleY

---

translateX

Get Signature

get translateX(): number

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

Returns

number

Set Signature

set translateX(value): void

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

Parameters

Parameter	Type
value	number

Returns

void

Inherited from

Context3D.translateX

---

translateY

Get Signature

get translateY(): number

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

Returns

number

Set Signature

set translateY(value): void

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

Parameters

Parameter	Type
value	number

Returns

void

Inherited from

Context3D.translateY

---

zIndex

Get Signature

get zIndex(): number

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

Returns

number

Set Signature

set zIndex(value): void

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

Parameters

Parameter	Type
value	number

Returns

void

Inherited from

Context3D.zIndex

Methods

applyClip()

applyClip(path, fillRule?): void

Defined in: 3d/src/context.ts:461

Clips subsequent drawing operations to the given path.

Parameters

Parameter	Type
path	CanvasPath
fillRule?	FillRule

Returns

void

Overrides

Context3D.applyClip

---

applyFill()

applyFill(element, fillRule?): void

Defined in: 3d/src/context.ts:469

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

Parameters

Parameter	Type
element	ContextText | CanvasPath
fillRule?	FillRule

Returns

void

Overrides

Context3D.applyFill

---

applyStroke()

applyStroke(element): void

Defined in: 3d/src/context.ts:473

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

Parameters

Parameter	Type
element	ContextText | CanvasPath

Returns

void

Overrides

Context3D.applyStroke

---

batch()

batch<TResult>(body): TResult

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

Clears the rendering surface and brackets the callback in markRenderStart/markRenderEnd, returning the callback's result.

Type Parameters

Type Parameter	Default type
TResult	void

Parameters

Parameter	Type
body	() => TResult

Returns

TResult

Inherited from

Context3D.batch

---

clear()

clear(): void

Defined in: 3d/src/context.ts:423

Clears the entire rendering surface.

Returns

void

Overrides

Context3D.clear

---

createPath()

createPath(id?): CanvasPath

Defined in: 3d/src/context.ts:457

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

Parameters

Parameter	Type
id?	string

Returns

CanvasPath

Overrides

Context3D.createPath

---

createText()

createText(options): ContextText

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

Creates a new text element from the given options.

Parameters

Parameter	Type
options	TextOptions

Returns

ContextText

Inherited from

Context3D.createText

---

destroy()

destroy(): void

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

Destroys the context, removing the DOM element and disposing all resources.

Returns

void

Inherited from

Context3D.destroy

---

disableInteraction()

disableInteraction(): void

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

Disables DOM interaction events and clears the active element set.

Returns

void

Inherited from

Context3D.disableInteraction

---

dispose()

protected dispose(key?): void

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

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

Parameters

Parameter	Type
key?	PropertyKey

Returns

void

Inherited from

Context3D.dispose

---

drawImage()

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

Defined in: 3d/src/context.ts:465

Draws an image onto the rendering surface at the given position and optional size.

Parameters

Parameter	Type
image	CanvasImageSource
x	number
y	number
width?	number
height?	number

Returns

void

Overrides

Context3D.drawImage

---

emit()

Call Signature

emit<TEvent>(event): TEvent

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

Emits an event, invoking all matching handlers and bubbling to the parent if applicable.

Type Parameters

Type Parameter	Default type
TEvent extends Event<undefined>	Event<undefined>

Parameters

Parameter	Type
event	TEvent

Returns

TEvent

Inherited from

Context3D.emit

Call Signature

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

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

Emits an event, invoking all matching handlers and bubbling to the parent if applicable.

Type Parameters

Type Parameter
TEvent extends keyof ContextEventMap

Parameters

Parameter	Type
type	TEvent
data	ContextEventMap[TEvent]

Returns

Event<ContextEventMap[TEvent]>

Inherited from

Context3D.emit

---

enableInteraction()

enableInteraction(): void

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

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

Returns

void

Inherited from

Context3D.enableInteraction

---

getDefaultState()

protected getDefaultState(): BaseState

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

Returns

BaseState

Inherited from

Context3D.getDefaultState

---

getLightDirectionForRender()

getLightDirectionForRender(): Vector3

Defined in: 3d/src/context.ts:185

Returns the effective light direction for the current render, accounting for the light mode.

Returns

Vector3

Inherited from

Context3D.getLightDirectionForRender

---

has()

has(type): boolean

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

Returns whether there are any listeners registered for the given event type.

Parameters

Parameter	Type
type	keyof ContextEventMap

Returns

boolean

Inherited from

Context3D.has

---

hitTest()

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

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

Tests which rendered elements intersect the given point for the given event types.

Parameters

Parameter	Type
events	string[]
x	number
y	number

Returns

RenderElement[]

Inherited from

Context3D.hitTest

---

init()

protected init(): void

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

Returns

void

Inherited from

Context3D.init

---

invalidateTrackedElements()

invalidateTrackedElements(event?): void

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

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

Parameters

Parameter	Type
event?	string

Returns

void

Inherited from

Context3D.invalidateTrackedElements

---

isPointInPath()

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

Defined in: 3d/src/context.ts:477

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

Parameters

Parameter	Type
path	ContextPath
x	number
y	number
fillRule?	FillRule

Returns

boolean

Overrides

Context3D.isPointInPath

---

isPointInStroke()

isPointInStroke(path, x, y): boolean

Defined in: 3d/src/context.ts:485

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

Parameters

Parameter	Type
path	ContextPath
x	number
y	number

Returns

boolean

Overrides

Context3D.isPointInStroke

---

layer()

layer<TResult>(body): TResult

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

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

Type Parameters

Type Parameter	Default type
TResult	void

Parameters

Parameter	Type
body	() => TResult

Returns

TResult

Inherited from

Context3D.layer

---

markRenderEnd()

markRenderEnd(): void

Defined in: 3d/src/context.ts:501

Signals the end of a render pass.

Returns

void

Overrides

Context3D.markRenderEnd

---

markRenderStart()

markRenderStart(): void

Defined in: 3d/src/context.ts:493

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

Returns

void

Overrides

Context3D.markRenderStart

---

measureText()

measureText(text, font?): TextMetrics

Defined in: 3d/src/context.ts:453

Measures text dimensions using the context's current font or an optional override.

Parameters

Parameter	Type
text	string
font?	string

Returns

TextMetrics

Overrides

Context3D.measureText

---

off()

off<TEvent>(type, handler): void

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

Removes a previously registered handler for the given event type.

Type Parameters

Type Parameter
TEvent extends keyof ContextEventMap

Parameters

Parameter	Type
type	TEvent
handler	EventHandler<ContextEventMap[TEvent]>

Returns

void

Inherited from

Context3D.off

---

on()

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

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

Subscribes a handler to the given event type and returns a disposable for cleanup.

Type Parameters

Type Parameter
TEvent extends keyof ContextEventMap

Parameters

Parameter	Type
type	TEvent
handler	EventHandler<ContextEventMap[TEvent]>
options?	EventSubscriptionOptions

Returns

Disposable

Inherited from

Context3D.on

---

once()

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

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

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

Type Parameters

Type Parameter
TEvent extends keyof ContextEventMap

Parameters

Parameter	Type
type	TEvent
handler	EventHandler<ContextEventMap[TEvent]>
options?	EventSubscriptionOptions

Returns

Disposable

Inherited from

Context3D.once

---

project()

project(point): ProjectedPoint

Defined in: 3d/src/context.ts:194

Projects a 3D world-space point to 2D screen coordinates.

Parameters

Parameter	Type
point	Vector3

Returns

ProjectedPoint

Inherited from

Context3D.project

---

rescale()

protected rescale(width, height): void

Defined in: 3d/src/context.ts:398

Parameters

Parameter	Type
width	number
height	number

Returns

void

Overrides

Context3D.rescale

---

reset()

reset(): void

Defined in: 3d/src/context.ts:427

Resets the context to its initial state.

Returns

void

Overrides

Context3D.reset

---

restore()

restore(): void

Defined in: 3d/src/context.ts:419

Restores the most recently saved state from the stack.

Returns

void

Overrides

Context3D.restore

---

retain()

protected retain(value, key?): void

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

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

Parameters

Parameter	Type	Default value
value	Disposable	undefined
key	PropertyKey	Disposer.defaultKey

Returns

void

Inherited from

Context3D.retain

---

rotate()

rotate(angle): void

Defined in: 3d/src/context.ts:431

Applies a rotation transformation.

Parameters

Parameter	Type
angle	number

Returns

void

Overrides

Context3D.rotate

---

save()

save(): void

Defined in: 3d/src/context.ts:415

Pushes the current state onto the stack and resets to defaults.

Returns

void

Overrides

Context3D.save

---

scale()

scale(x, y): void

Defined in: 3d/src/context.ts:435

Applies a scale transformation.

Parameters

Parameter	Type
x	number
y	number

Returns

void

Overrides

Context3D.scale

---

setCamera()

setCamera(eye, target, up): void

Defined in: 3d/src/context.ts:158

Sets the view matrix from an eye position, look-at target, and up direction.

Parameters

Parameter	Type
eye	Vector3
target	Vector3
up	Vector3

Returns

void

Inherited from

Context3D.setCamera

---

setOrthographic()

setOrthographic(left, right, bottom, top, near, far): void

Defined in: 3d/src/context.ts:172

Sets an orthographic projection with explicit frustum bounds.

Parameters

Parameter	Type
left	number
right	number
bottom	number
top	number
near	number
far	number

Returns

void

Inherited from

Context3D.setOrthographic

---

setPerspective()

setPerspective(fov, near, far): void

Defined in: 3d/src/context.ts:164

Updates the perspective projection with the given field of view, near, and far planes.

Parameters

Parameter	Type
fov	number
near	number
far	number

Returns

void

Inherited from

Context3D.setPerspective

---

setTransform()

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

Defined in: 3d/src/context.ts:444

Parameters

Parameter	Type
a	number
b	number
c	number
d	number
e	number
f	number

Returns

void

Overrides

Context3D.setTransform

---

sortByZIndex()

protected sortByZIndex(elements): RenderElement[]

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

Sorts render elements by z-index (highest first) for hit testing priority.

Parameters

Parameter	Type
elements	RenderElement[]

Returns

RenderElement[]

Inherited from

Context3D.sortByZIndex

---

submitMesh()

submitMesh(submission): void

Defined in: 3d/src/context.ts:206

Submits a mesh for rendering this frame. Noop in the base class; overridden by GPU-backed contexts.

Parameters

Parameter	Type
submission	MeshSubmission

Returns

void

Inherited from

Context3D.submitMesh

---

transform()

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

Defined in: 3d/src/context.ts:449

Parameters

Parameter	Type
a	number
b	number
c	number
d	number
e	number
f	number

Returns

void

Overrides

Context3D.transform

---

translate()

translate(x, y): void

Defined in: 3d/src/context.ts:439

Applies a translation transformation.

Parameters

Parameter	Type
x	number
y	number

Returns

void

Overrides

Context3D.translate

---

updateProjectionMatrix()

protected updateProjectionMatrix(): void

Defined in: 3d/src/context.ts:145

Returns

void

Inherited from

Context3D.updateProjectionMatrix

---

updateViewProjectionMatrix()

protected updateViewProjectionMatrix(): void

Defined in: 3d/src/context.ts:141

Returns

void

Inherited from

Context3D.updateViewProjectionMatrix