Class Ctx2DPrerender<StaticProps, ChangeableProps, CallbacksTypes>

The Ctx2DPrerender class allows pre-rendering of media (such as images or video) onto a canvas. This can be useful for reducing payloads by preparing the media for further use in a more optimized form.

Link

See examples https://antonbobrov.github.io/vevet-demo/ctx2d-prerender/

Link

See docs https://antonbobrov.github.io/vevet/classes/Ctx2DPrerender.html

Type Parameters

Hierarchy

  • Ctx2D<StaticProps, ChangeableProps, CallbacksTypes>
    • Ctx2DPrerender

Constructors

constructor

Accessors

callbacks canRender canvas clientHeight clientWidth container ctx dpr height isDestroyed isInitialized name prefix props width

Methods

addCallback addEventListener addPlugin addResponsiveProps addViewportCallback changeProps destroy init render resize

Constructors

constructor

Accessors

callbacks

canRender

  • get canRender(): boolean

  • Checks if the canvas is ready to be rendered

    Returns boolean

canvas

  • get canvas(): HTMLCanvasElement

  • Returns the current canvas element

    Returns HTMLCanvasElement

clientHeight

  • get clientHeight(): number

  • Returns the height of the canvas without the device pixel ratio (DPR)

    Returns number

clientWidth

  • get clientWidth(): number

  • Returns the width of the canvas without the device pixel ratio (DPR)

    Returns number

container

  • get container(): false | Element

  • The parent element of the canvas used to calculate size

    Returns false | Element

ctx

  • get ctx(): CanvasRenderingContext2D

  • Returns the 2D rendering context

    Returns CanvasRenderingContext2D

dpr

height

  • get height(): number

  • Returns the current height of the canvas (with DPR applied)

    Returns number

isDestroyed

  • get isDestroyed(): boolean

  • Checks if the module has been destroyed.

    Returns boolean

isInitialized

  • get isInitialized(): boolean

  • Checks if the module has been initialized.

    Returns boolean

name

  • get name(): string

  • The name of the module, derived from the class name

    Returns string

prefix

  • get prefix(): string

  • Optional prefix for class names used by the module

    Returns string

props

  • get props(): TRequiredModuleProp<StaticProps & ChangeableProps>

  • The current properties of the module, which include both static and changeable properties. These can be retrieved dynamically during the module's lifecycle.

    Returns TRequiredModuleProp<StaticProps & ChangeableProps>

width

  • get width(): number

  • Returns the current width of the canvas (with DPR applied)

    Returns number

Methods

addCallback

  • 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., 'propsChange', 'destroy').

    • action: TAction<CallbacksTypes[T]>

      The function to execute when the event is triggered.

    • settings: ISettings = {}

      Additional settings for the callback.

    Returns IAddedCallback

addEventListener

  • Adds a DOM event listener that will be automatically removed when the module is destroyed.

    Type Parameters

    • Target extends keyof HTMLElementEventMap

    • Listener extends ((event) => void)

    Parameters

    • element: Document | Element | Window

      The target element for the event listener.

    • target: Target

      The event type to listen for (e.g., 'click', 'resize').

    • callback: Listener

      The callback function to execute when the event is triggered.

    • Optional options: boolean | AddEventListenerOptions

      Additional options for the event listener.

    Returns (() => void)

      • (): void

      • Returns void

addPlugin

  • Adds a plugin to the component. The plugin is initialized upon being added, and the plugin's component property is set to the current component instance.

    Type Parameters

    • T extends Plugin<any, any, any, any>

    Parameters

    • plugin: T

      An instance of the Plugin class to be added.

    Returns void

addResponsiveProps

addViewportCallback

  • Adds a viewport callback that will be automatically removed when the module is destroyed.

    Parameters

    • target: keyof IViewportCallbackTypes

      The viewport target (e.g., width or height).

    • action: (() => void)

      The callback function to execute when the viewport target changes.

        • (): void

        • Returns void

    • data: undefined | ISettings = {}

      Additional data for the callback.

    Returns void

changeProps

  • Updates the changeable properties of the module.

    Parameters

    • props: Partial<ChangeableProps>

      The properties to be updated.

    Returns void

destroy

init

  • Initializes the module. Calls the internal _init method and marks the module as initialized.

    Returns void

render

resize

Settings

Member Visibility

Theme

On This Page