Skip to content
blotter

class · blotter.ts

RenderScope

Per-text output: the canvas for one text, and the place to set uniforms for that text alone.

extends Emitter<RenderScopeEvents> 

import { RenderScope } from "blotter.ts";

You never construct a scope. A Blotter makes one for each of its texts, and you fetch it with blotter.forText(text). Its domElement is a high-DPI canvas that copies the text’s rectangle out of the shared back buffer every frame; put it wherever the text should appear.

Its material carries a copy of the material’s uniforms scoped to this one text, which is how several texts can share a shader and still behave differently. Those per-text uniforms exist after the first build, so read them after await blotter.ready.

const scope = blotter.forText(text);
if (scope) {
  scope.appendTo(document.querySelector("#title"));
  scope.on("mouseenter", () => { scope.material.uniforms.uOffset.value = 0.1; });
  scope.on("mouseleave", () => { scope.material.uniforms.uOffset.value = 0.02; });
}

Members #

constructor constructor

new RenderScope ( text: Text , blotter: Blotter )

Internal. Scopes are created by the Blotter that owns them.

text property

readonly renderScope. text : Text

The Text this scope draws.

domElement property

readonly renderScope. domElement : HTMLCanvasElement

The output canvas, with a 2D context holding the latest frame. Append it directly, or use appendTo.

material property

readonly renderScope. material : { mainImage: string; uniforms: UniformInterfaceMap }

The per-text view of the material: material.uniforms holds copies of every uniform that apply to this text only. Set a value here to change one text without touching its siblings.

playing property

renderScope. playing : boolean

Whether the scope copies a new frame each tick. Starts as the owning instance’s autoplay.

timeDelta property

renderScope. timeDelta : number

Seconds since this scope’s previous frame.

frameCount property

renderScope. frameCount : number

How many frames this scope has drawn.

play method

renderScope. play ( ): void

Resumes drawing this text. The rest of the instance is unaffected.

pause method

renderScope. pause ( ): void

Stops drawing this text while the instance keeps rendering. The canvas keeps its last frame.

appendTo method

renderScope. appendTo ( element: Element ): this

Appends domElement to an element and returns the scope for chaining. Pointer events are wired up only when the canvas is appended this way.

Inherited #

on method inherited from Emitter

renderScope. on <K>( event: K , listener: Listener<RenderScopeEvents[K]> ): () => void

Subscribes to an event and returns an unsubscribe function. ready and update mirror the instance’s events for this text; render receives the frame count; the pointer events receive the position normalised to the canvas as { x, y } from 0 to 1, with y growing downwards as in the DOM.

See also RenderScopeEvents

off method inherited from Emitter

renderScope. off <K>( event: K , listener: Listener<RenderScopeEvents[K]> ): void

Removes a handler added with on.