Skip to main content

Custom Renderer

Feel free to create your own renderer. A renderer must implement the IRenderer interface:


export interface IRenderer {

isInitialized: boolean

getContainerWidth(): number

/**
- Called once before the first render. Use this to subscribe to interaction
- events and perform any one-time setup.
*/
init(scoreStorm: ScoreStorm): void

createPage(parameters: PageParameters): void

postRender(): void

clear(): void

destroy(): void

setColor(color: string): void

getColor(): string

drawRect(x: number, y: number, width: number, height: number): void

drawCircle(x: number, y: number, radius: number): void

drawGlyph(glyph: string | number, x: number, y: number): void

renderInGroup(object: object, renderCallback: () => void): void

}

Example:

class CustomRenderer {
// implement IRenderer methods...
}

const scoreStorm = new ScoreStorm()

scoreStorm.setRenderer(new CustomRenderer(/** args **/))
scoreStorm.render()