oj-canvas-utils

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