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

    Checks if the module has been destroyed.

    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 a class name on an element, and keeps track of it for removal when the module is destroyed.

    Parameters

    • element: Element

      The target DOM element.

    • className: string

      The class name to toggle.

    Returns void

  • Helper function to generate classnames with the module's prefix.

    Parameters

    • ...classNames: string[]

      The class names to generate.

    Returns string

    A string of class names with the module's prefix applied.

  • Destroys the canvas.

    Returns void

  • Get default mutable properties

    Returns TRequiredProps<M>

  • Get default static properties

    Returns TRequiredProps<S>

  • Handle property mutations

    Parameters

    • props: Partial<M>

    Returns void

  • Set events

    Returns void

  • Destroys the module, cleaning up resources, callbacks, and event listeners.

    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

  • Adds a callback on the module's destruction.

    Parameters

    • action: () => void

      The function to execute during destruction.

    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