Canvas Utils

IRect

| key | type | required | |--|--|--| | x | number | true | | y | number | true | | width | number | true | | height | number | true |

IDrawTextOptionsBase (extends IRect)

| key | type | required | |--|--|--| | fontSize | number | true | | fontSizeMin | number | false | | fontSizeMax | number | false | | textShrink | boolean | false | | textWrap | "up" "center" | false | | fillStyle | string | false | | fontFamily | string | false | | textStyle | string | false |

IDrawTextOptions (extends IDrawTextOptionsBase)

| key | type | required | |--|--|--| | alpha | number | false | | textAlign | "left" "center" "right" | false | | textJustify | "bottom" "center" "top" | false | | bold | boolean | false | | italic | boolean | false | | curve | boolean | false |

IDrawImageOptions (extends IRect)

| key | type | required | |--|--|--| | fit | "cover" "contain" "stretch" | true | | scale | number | false |

drawTextWrap

drawTextWrap(ctx: CanvasRenderingContext2D, lines: string[], x: number = 0, y: number = 0, height: number = ctx.canvas.height, lineHeight: number, direction: "up" | "center" | "down" = "down"): void

• draw text lines from the given position and dimensions. -- direction "up" will start at the bottom and push the new lines up -- direction "center" will start at the center and keep the text centered -- direction "down" will start at the top and push the new lines down

buildFontString

buildFontString(fontSize: number, textStyle = "", fontFamily = "sans-serif"): string

• returns a Canvas compatible font string

getLineHeight

getLineHeight(fontSize: number): number

• returns the default lineHeight for a font (factor 1.1)

wrap

wrap(ctx: CanvasRenderingContext2D, text: string, options: { fontSize: number, width: number, textStyle?: string, fontFamily?: string }): string[]

• calculates the text width and splits the full words to fit within the given options.width
• returns the wrapped text lines

widestWord

widestWord(ctx: CanvasRenderingContext2D, text: string, options: { fontSize: number, width: number, textStyle?: string, fontFamily?: string }): string

• returns widest word

fitToBounds

fitToBounds(ctx: CanvasRenderingContext2D, text: string, options: IDrawTextOptionsBase): { fontSize: number, lines: string[] }

• wraps the text and measures the required font size to fit all text within the given bounds
• return the resulted font size and text lines

getFittedText

getFittedText(ctx: CanvasRenderingContext2D, text: string, options: IDrawTextOptionsBase): { fontSize: number, lines: string[] }

• the same as fitToBounds but defaults the fontSizeMin, fontSizeMax and textStyle properties

drawTextLines

drawTextLines(ctx: CanvasRenderingContext2D, lines: string[], options: Omit<IDrawTextOptions, "fontSizeMin" | "fontSizeMax">): void

• draws text lines onto the canvas context with the given options

drawText

drawText(ctx: CanvasRenderingContext2D, text: string = "", options: IDrawTextOptions): void

• uses the getFittedText function and draws the results onto the canvas context with the drawTextLines function

getDrawableDimensions

getDrawableDimensions(drawable: HTMLImageElement | HTMLCanvasElement): { width: number, height: number }

• returns the width and height of the drawable (image natural)

scaleRect

scaleRect(rect: IRect, scale: number): IRect

• returns the scaled rectangle

drawImageStretch

drawImageStretch(ctx: CanvasRenderingContext2D, img: IDrawable, x: number = 0, y: number = 0, width: number = ctx.canvas.width, height: number = ctx.canvas.height, scale = 1): void

• draws the image stretched (fills the bounds, aspect ratio can change)

drawImageContain

drawImageContain(ctx: CanvasRenderingContext2D, img: IDrawable, x: number = 0, y: number = 0, width: number = ctx.canvas.width, height: number = ctx.canvas.height, scale = 1): void

• draws the image contained (fits within the bounds > <, aspect ratio will not change)

drawImageCover

drawImageCover(ctx: CanvasRenderingContext2D, img: IDrawable, x: number = 0, y: number = 0, width: number = ctx.canvas.width, height: number = ctx.canvas.height, scale = 1): void

• draws the image covered (fills the bounds < >, aspect ratio will not change)

drawImage

drawImageCover(ctx: CanvasRenderingContext2D, img: IDrawable, options: IDrawImageOptions): void

• draws the image with one of the drawImage functions (option.fit)

canvasPixelFilters

canvasPixelFilters((pixelFilters: ((pixels: Uint8ClampedArray): void)[]): (source: HTMLCanvasElement): void)

• creates a filter pipe with pixelFilter functions
• apply a canvas element on the filter pipe
• applies each filter function onto the pixels and applies the modified pixels onto the canvas

filterWhiteTransparent

filterWhiteTransparent(margin = 9): (pixels: Uint8ClampedArray): void

• loops through all pixels and sets the opacity to 255 or 0 when the whiteness level is within the margin of (JPEG) error