ImageCanvas

Source: ImageCanvas.ts:7

Usefull class for working with JS canvas object.

Constructor

Parameters

• width (number, optional) — Canvas width. Default 256.
• height (number, optional) — Canvas height. Default 256.

Instance Methods

getCanvas(): HTMLCanvasElement

Returns canvas object.

Returns

• HTMLCanvasElement

getContext(): CanvasRenderingContext2D

Returns canvas context pointer.

Returns

• CanvasRenderingContext2D

fillEmpty()

Fills canvas RGBA with zeroes.

fill(color: string)

Fills canvas RGBA with color.

Parameters

• color (string) — CSS string color.

getData(): Uint8ClampedArray

Gets canvas pixels RGBA data.

Returns

• Uint8ClampedArray

fillColor(color: string)

Fill the canvas by color.

Parameters

• color (string) — CSS string color.

setData(data: Array.<number>)

Sets RGBA pixel data.

Parameters

• data (Array.<number>) — Array RGBA data.

resize(width: number, height: number)

Resize canvas.

Parameters

• width (number) — Width.
• height (number) — Height.

drawImage( img: Image, x?: number, y?: number, width?: number, height?: number, )

Draw an image on the canvas.

Parameters

• img (Image) — Draw image.
• x (number, optional) — Left top image corner X coordinate on the canvas.
• y (number, optional) — Left top image corner Y coordinate on the canvas.
• width (number, optional) — Image width slice. Image width is default.
• height (number, optional) — Image height slice. Image height is default.

getImage(): Image

Converts canvas to JS image object.

Returns

• Image

getTextWidth(text: string): number

Get measured text width.

Parameters

• text (string) — Measured text.

Returns

• number

drawText( text: string, x?: number, y?: number, font?: string, color?: string, )

Draw a text on the canvas.

Parameters

• text (string) — Text.
• x (number, optional, default: 0) — Canvas X - coordinate. 0 - default.
• y (number, optional, default: 14) — Canvas Y - coordinate. 0 - default.
• font (string, optional, default: "normal 14px Verdana") — Font style. 'normal 14px Verdana' - is default.
• color (string, optional, default: "black") — Css font color.

getWidth(): number

Gets canvas width.

Returns

• number

getHeight(): number

Gets canvas height.

Returns

• number

load(url: string, callback?: function)

Load image to canvas.

Parameters

• url (string) — Image url.
• callback (function, optional) — Image onload callback.

openImage()

Open canvas image in the new window.