Class Ctx2D<StaticProps, ChangeableProps, CallbacksTypes>

A class that simplifies working with an HTML5 Canvas element and its 2D context. It can handle automatic resizing and provides helper methods for rendering and managing canvas properties.

Hierarchy

Component<StaticProps, ChangeableProps, CallbacksTypes>
- Ctx2D
  - Ctx2DPrerender

Index

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

new Ctx2D<StaticProps, ChangeableProps, CallbacksTypes>(initialProps?, canInit?): Ctx2D<StaticProps, ChangeableProps, CallbacksTypes>
Constructor for the Ctx2D class.
Type Parameters
- StaticProps extends NCtx2D.IStaticProps = NCtx2D.IStaticProps
- ChangeableProps extends NCtx2D.IChangeableProps = NCtx2D.IChangeableProps
- CallbacksTypes extends NCtx2D.ICallbacksTypes = NCtx2D.ICallbacksTypes
Parameters
- Optional initialProps: StaticProps & ChangeableProps
- canInit: boolean = true
Returns Ctx2D<StaticProps, ChangeableProps, CallbacksTypes>
Overrides Component.constructor
- Defined in src/components/Ctx2D/index.ts:100

Accessors

callbacks

get callbacks(): Callbacks<CallbacksTypes>
Retrieves the module's registered callbacks.

Returns Callbacks<CallbacksTypes>
Inherited from ComponentClass.callbacks
- Defined in src/base/Module/index.ts:79

canRender

get canRender(): boolean
Checks if the canvas is ready to be rendered

Returns boolean
- Defined in src/components/Ctx2D/index.ts:93

canvas

get canvas(): HTMLCanvasElement
Returns the current canvas element

Returns HTMLCanvasElement
- Defined in src/components/Ctx2D/index.ts:46

clientHeight

get clientHeight(): number
Returns the height of the canvas without the device pixel ratio (DPR)

Returns number
- Defined in src/components/Ctx2D/index.ts:80

clientWidth

get clientWidth(): number
Returns the width of the canvas without the device pixel ratio (DPR)

Returns number
- Defined in src/components/Ctx2D/index.ts:67

container

get container(): false | Element
The parent element of the canvas used to calculate size

Returns false | Element
- Defined in src/components/Ctx2D/index.ts:38

ctx

get ctx(): CanvasRenderingContext2D
Returns the 2D rendering context

Returns CanvasRenderingContext2D
- Defined in src/components/Ctx2D/index.ts:54

dpr

get dpr(): number
Returns the current device pixel ratio (DPR)

Returns number
- Defined in src/components/Ctx2D/index.ts:88

height

get height(): number
Returns the current height of the canvas (with DPR applied)

Returns number
- Defined in src/components/Ctx2D/index.ts:75

isDestroyed

get isDestroyed(): boolean
Checks if the module has been destroyed.

Returns boolean
Inherited from ComponentClass.isDestroyed
- Defined in src/base/Module/index.ts:118

isInitialized

get isInitialized(): boolean
Checks if the module has been initialized.

Returns boolean
Inherited from ComponentClass.isInitialized
- Defined in src/base/Module/index.ts:108

name

get name(): string
The name of the module, derived from the class name

Returns string
Inherited from ComponentClass.name
- Defined in src/base/Module/index.ts:93

prefix

get prefix(): string
Optional prefix for class names used by the module

Returns string
Inherited from ComponentClass.prefix
- Defined in src/base/Module/index.ts:98

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>
Inherited from ComponentClass.props
- Defined in src/base/Module/index.ts:64

width

get width(): number
Returns the current width of the canvas (with DPR applied)

Returns number
- Defined in src/components/Ctx2D/index.ts:62

Methods

addCallback

addCallback<T>(target, action, settings?): IAddedCallback
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
Inherited from Component.addCallback
- Defined in src/base/Module/index.ts:245

addEventListener

addEventListener<Target, Listener>(element, target, callback, options?): (() => void)
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
Inherited from Component.addEventListener
- Defined in src/base/Module/index.ts:261

addPlugin

addPlugin<T>(plugin): void
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
Inherited from Component.addPlugin
- Defined in src/base/Component/index.ts:30

addResponsiveProps

addResponsiveProps(rules): void
Adds responsive property rules to the module. This must be done before initialization.
Parameters
- rules: IResponsive<ChangeableProps>
  
  The responsive property rules to be added.
Returns void
Inherited from Component.addResponsiveProps
- Defined in src/base/Module/index.ts:159

addViewportCallback

addViewportCallback(target, action, data?): void
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
Inherited from Component.addViewportCallback
- Defined in src/base/Module/index.ts:225

changeProps

changeProps(props): void
Updates the changeable properties of the module.
Parameters
- props: Partial<ChangeableProps>
  
  The properties to be updated.
Returns void
Inherited from Component.changeProps
- Defined in src/base/Module/index.ts:174

destroy

destroy(): void
Destroys the module, cleaning up resources, callbacks, and event listeners.

Returns void
Inherited from Component.destroy
- Defined in src/base/Module/index.ts:310

init

init(): void
Initializes the module. Calls the internal _init method and marks the module as initialized.

Returns void
Inherited from Component.init
- Defined in src/base/Module/index.ts:194

render

render(renderProp): void
Renders content on the canvas if it is ready.
Parameters
- renderProp: TRender
  
  A function that performs the actual rendering on the canvas.
Returns void
- Defined in src/components/Ctx2D/index.ts:229

resize

resize(): void
Resizes the canvas based on the container or viewport size and applies the device pixel ratio (DPR).

Returns void
- Defined in src/components/Ctx2D/index.ts:172

Class Ctx2D<StaticProps, ChangeableProps, CallbacksTypes>

Link

Link

Type Parameters

StaticProps extends NCtx2D.IStaticProps = NCtx2D.IStaticProps

ChangeableProps extends NCtx2D.IChangeableProps = NCtx2D.IChangeableProps

CallbacksTypes extends NCtx2D.ICallbacksTypes = NCtx2D.ICallbacksTypes

Hierarchy

Index

Constructors

Accessors

Methods

Constructors

constructor

Type Parameters

StaticProps extends NCtx2D.IStaticProps = NCtx2D.IStaticProps

ChangeableProps extends NCtx2D.IChangeableProps = NCtx2D.IChangeableProps

CallbacksTypes extends NCtx2D.ICallbacksTypes = NCtx2D.ICallbacksTypes

Parameters

Optional initialProps: StaticProps & ChangeableProps

canInit: boolean = true

Returns Ctx2D<StaticProps, ChangeableProps, CallbacksTypes>

Accessors

callbacks

Returns Callbacks<CallbacksTypes>

canRender

Returns boolean

canvas

Returns HTMLCanvasElement

clientHeight

Returns number

clientWidth

Returns number

container

Returns false | Element

ctx

Returns CanvasRenderingContext2D

dpr

Returns number

height

Returns number

isDestroyed

Returns boolean

isInitialized

Returns boolean

name

Returns string

prefix

Returns string

props

Returns TRequiredModuleProp<StaticProps & ChangeableProps>

width

Returns number

Methods

addCallback

Type Parameters

T extends string | number | symbol

Parameters

target: T

action: TAction<CallbacksTypes[T]>

settings: ISettings = {}

Returns IAddedCallback

addEventListener

Type Parameters

Target extends keyof HTMLElementEventMap

Listener extends ((event) => void)

Parameters

element: Document | Element | Window

target: Target

callback: Listener

Optional options: boolean | AddEventListenerOptions

Returns (() => void)

Returns void

addPlugin

Type Parameters

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

Parameters

plugin: T

Returns void

addResponsiveProps

`Optional` initialProps: StaticProps & ChangeableProps

`Optional` options: boolean | AddEventListenerOptions