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