oj-canvas-utils v6.0.1

Canvas Utils

IRect

IDrawTextOptionsBase (extends IRect)

IDrawTextOptions (extends IDrawTextOptionsBase)

IDrawImageOptions (extends IRect)

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