Class Canvas<C, S, M>

A class for managing an HTML5 Canvas element and its 2D context.

Documentation

Type Parameters

Hierarchy (View Summary)

Constructors

Accessors

  • get canRender(): boolean

    Checks if the canvas is ready to render.

    Returns boolean

  • get canvas(): HTMLCanvasElement

    The canvas element instance.

    Returns HTMLCanvasElement

  • get ctx(): CanvasRenderingContext2D

    Returns the 2D rendering context

    Returns CanvasRenderingContext2D

  • get dpr(): number

    Current device pixel ratio.

    Returns number

  • get height(): number

    Canvas height (DPR applied).

    Returns number

  • get isDestroyed(): boolean

    Indicates whether the instance has been destroyed.

    After destruction, destroy is a no-op.

    Returns boolean

  • get name(): string

    The name of the module, derived from the class name

    Returns string

  • get offsetHeight(): number

    Height without DPR scaling.

    Returns number

  • get offsetWidth(): number

    Width without DPR scaling.

    Returns number

  • get prefix(): string

    Optional prefix for classnames used by the module

    Returns string

  • get width(): number

    Canvas width (DPR applied).

    Returns number

Methods

  • Adds prefixed classes to an element and removes them on destroy.

    Skips classes that are already present on the element.

    Parameters

    • element: Element

      Target DOM element.

    • ...classes: string[]

      Unprefixed class name segments.

    Returns void

  • Builds one or more prefixed class names.

    Parameters

    • ...classes: string[]

      Unprefixed class name segments.

    Returns string

    Space-separated prefixed class string.

  • Destroys the canvas.

    Returns void

  • Emits a callback event with a fixed payload.

    Type Parameters

    • E extends string | number | symbol

    Parameters

    • event: E
    • arg: C[E]

    Returns void

  • Set default mutable props

    Returns TRequiredProps<M>

  • Get default static props

    Returns TRequiredProps<S>

  • Handle property mutations

    Parameters

    • props: Partial<M>

    Returns void

  • Destroys the instance and runs all registered cleanup actions.

    Safe to call multiple times; subsequent calls are ignored.

    Execution order:

    1. _destroy
    2. all onDestroy callbacks, in registration order
    3. isDestroyed is set to true

    Returns void

  • Adds a custom callback to the module.

    Type Parameters

    • T extends string | number | symbol

    Parameters

    • target: T

      The event type to listen for (e.g., 'props', 'destroy').

    • listener: TCallbacksAction<C[T], Canvas<C, S, M>>

      The function to execute when the event is triggered.

    • settings: ICallbacksSettings = {}

      Additional settings for the callback.

    Returns () => void

  • Registers a function to run when the instance is destroyed.

    If the instance is already destroyed, action runs immediately.

    Parameters

    • action: () => void

      Cleanup function (for example remove listeners or DOM classes).

    Returns void

  • Renders content on the canvas if it's ready.

    Parameters

    • render: TCanvasRender

      A function that performs the actual rendering on the canvas.

    Returns void

  • Triggers a canvas resize based on container or viewport dimensions.

    Returns void

  • Change module's mutable properties

    Parameters

    • props: Partial<M>

    Returns void