typography-canvas-renderer
Version:
A lightweight npm package for rendering typographic content (text and images) on HTML5 Canvas with full CSS styling support including borders, border-radius, multiple border styles, inline text rendering, auto height calculation, and image support
89 lines • 1.84 kB
TypeScript
/**
* Main input interface for the typography canvas renderer
*/
export interface Input {
canvas: {
width: number;
height: number;
background?: string;
format?: 'png' | 'jpeg';
quality?: number;
scaleFactor?: number;
};
texts: Array<{
text: string;
css: Record<string, string>;
}>;
images: Array<{
src: string;
css: Record<string, string>;
}>;
}
/**
* Canvas configuration interface
*/
export interface CanvasConfig {
width: number;
height: number;
background: string;
format: 'png' | 'jpeg';
quality: number;
scaleFactor: number;
}
/**
* Text element interface
*/
export interface TextElement {
text: string;
css: Record<string, string>;
}
/**
* Image element interface
*/
export interface ImageElement {
src: string;
css: Record<string, string>;
}
/**
* Unified element interface for rendering
*/
export interface RenderElement {
type: 'text' | 'image';
content: string;
css: Record<string, string>;
zIndex: number;
}
/**
* Parsed CSS properties interface
*/
export interface ParsedCSS {
position?: 'absolute';
left?: number;
top?: number;
width?: number;
height?: number;
fontSize?: number;
fontFamily?: string;
color?: string;
backgroundColor?: string;
opacity?: number;
textAlign?: 'left' | 'center' | 'right';
verticalAlign?: 'top' | 'middle' | 'center' | 'bottom';
lineHeight?: number;
padding?: number;
border?: {
width: number;
style: string;
color: string;
};
borderRadius?: number;
zIndex: number;
}
/**
* Image loading result interface
*/
export interface LoadedImage {
element: HTMLImageElement;
src: string;
}
//# sourceMappingURL=types.d.ts.map