import CanvasEntry from 'wavesurfer.js/src/drawer.canvasentry.js'

public class | source

CanvasEntry

The CanvasEntry class represents an element consisting of a wave canvas and an (optional) progress wave canvas.

The MultiCanvas renderer uses one or more CanvasEntry instances to render a waveform, depending on the zoom level.

Constructor Summary

Public Constructor
public	constructor()

Member Summary

Public Members
public	canvasContextAttributes: object Canvas 2d context attributes
public	end: number End of the area the canvas should render, between 0 and 1
public	id: string Unique identifier for this entry
public	progress: HTMLCanvasElement The (optional) progress wave node
public	progressCtx: CanvasRenderingContext2D The (optional) progress wave canvas rendering context
public	start: number Start of the area the canvas should render, between 0 and 1
public	wave: HTMLCanvasElement The wave node
public	waveCtx: CanvasRenderingContext2D The wave canvas rendering context

Method Summary

Public Methods
public	applyCanvasTransforms(vertical: boolean) Set the canvas transforms for wave and progress
public	clearWave() Clear the wave and progress rendering contexts
public	destroy() Destroys this entry
public	drawLineToContext(ctx: CanvasRenderingContext2D, peaks: number[], absmax: number, halfH: number, offsetY: number, start: number, end: number) Render the actual waveform line on a `canvas` element
public	drawLines(peaks: number[], absmax: number, halfH: number, offsetY: number, start: number, end: number) Render the actual wave and progress lines
public	drawRoundedRect(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, radius: number): void Draw a rounded rectangle on Canvas
public	fillRectToContext(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, radius: number) Draw the actual rectangle on a `canvas` element
public	fillRects(x: number, y: number, width: number, height: number, radius: number) Draw a rectangle for wave and progress
public	getFillStyle(ctx: CanvasRenderingContext2D, color: string \| string[] \| CanvasGradient): string \| CanvasGradient Utility function to handle wave color arguments	since 6.0.0
public	getImage(format: string, quality: number, type: string): string \| Promise Return image data of the wave `canvas` element
public	initProgress(element: HTMLCanvasElement) Store the progress wave canvas element and create the 2D rendering context
public	initWave(element: HTMLCanvasElement) Store the wave canvas element and create the 2D rendering context
public	setFillStyles(waveColor: string \| string[], progressColor: string \| string[]) Set the fill styles for wave and progress
public	updateDimensions(elementWidth: number, totalWidth: number, width: number, height: number) Update the dimensions

Public Constructors

public constructor() source

Public Members

public canvasContextAttributes: object source

Canvas 2d context attributes

public end: number source

End of the area the canvas should render, between 0 and 1

public id: string source

Unique identifier for this entry

public progress: HTMLCanvasElement source

The (optional) progress wave node

public progressCtx: CanvasRenderingContext2D source

The (optional) progress wave canvas rendering context

public start: number source

Start of the area the canvas should render, between 0 and 1

public wave: HTMLCanvasElement source

The wave node

public waveCtx: CanvasRenderingContext2D source

The wave canvas rendering context

Public Methods

public applyCanvasTransforms(vertical: boolean) source

Set the canvas transforms for wave and progress

Params:

Name	Type	Attribute	Description
vertical	boolean		Whether to render vertically

public clearWave() source

Clear the wave and progress rendering contexts

public destroy() source

Destroys this entry

public drawLineToContext(ctx: CanvasRenderingContext2D, peaks: number[], absmax: number, halfH: number, offsetY: number, start: number, end: number) source

Render the actual waveform line on a canvas element

Params:

Name	Type	Attribute	Description
ctx	CanvasRenderingContext2D		Rendering context of target canvas
peaks	number[]		Array with peaks data
absmax	number		Maximum peak value (absolute)
halfH	number		Half the height of the waveform
offsetY	number		Offset to the top
start	number		The x-offset of the beginning of the area that should be rendered
end	number		The x-offset of the end of the area that should be rendered

public drawLines(peaks: number[], absmax: number, halfH: number, offsetY: number, start: number, end: number) source

Render the actual wave and progress lines

Params:

Name	Type	Attribute	Description
peaks	number[]		Array with peaks data
absmax	number		Maximum peak value (absolute)
halfH	number		Half the height of the waveform
offsetY	number		Offset to the top
start	number		The x-offset of the beginning of the area that should be rendered
end	number		The x-offset of the end of the area that should be rendered

public drawRoundedRect(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, radius: number): void source

Draw a rounded rectangle on Canvas

Params:

Name	Type	Attribute	Description
ctx	CanvasRenderingContext2D		Canvas context
x	number		X-position of the rectangle
y	number		Y-position of the rectangle
width	number		Width of the rectangle
height	number		Height of the rectangle
radius	number		Radius of the rectangle

Return:

void

Example:

drawRoundedRect(ctx, 50, 50, 5, 10, 3)

public fillRectToContext(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, radius: number) source

Draw the actual rectangle on a canvas element

Params:

Name	Type	Attribute	Description
ctx	CanvasRenderingContext2D		Rendering context of target canvas
x	number		X start position
y	number		Y start position
width	number		Width of the rectangle
height	number		Height of the rectangle
radius	number		Radius of the rectangle

public fillRects(x: number, y: number, width: number, height: number, radius: number) source

Draw a rectangle for wave and progress

Params:

Name	Type	Attribute	Description
x	number		X start position
y	number		Y start position
width	number		Width of the rectangle
height	number		Height of the rectangle
radius	number		Radius of the rectangle

public getFillStyle(ctx: CanvasRenderingContext2D, color: string | string[] | CanvasGradient): string | CanvasGradient since 6.0.0 source

Utility function to handle wave color arguments

When the color argument type is a string or CanvasGradient instance, it will be returned as is. Otherwise, it will be treated as an array, and a new CanvasGradient will be returned

Params:

Name	Type	Attribute	Description
ctx	CanvasRenderingContext2D		Rendering context of target canvas
color	string \| string[] \| CanvasGradient		Either a single fill color for the wave canvas, an existing CanvasGradient instance, or an array of colors to apply as a gradient

Return:

string | CanvasGradient

Returns a string fillstyle value, or a canvas gradient

public getImage(format: string, quality: number, type: string): string | Promise source

Return image data of the wave canvas element

When using a type of 'blob', this will return a Promise that resolves with a Blob instance.

Params:

Name	Type	Attribute	Description
format	string	default: 'image/png'	An optional value of a format type.
quality	number	default: 0.92	An optional value between 0 and 1.
type	string	default: 'dataURL'	Either 'dataURL' or 'blob'.

Return:

string | Promise

When using the default 'dataURL' type this returns a data URL. When using the 'blob' type this returns a Promise that resolves with a Blob instance.

public initProgress(element: HTMLCanvasElement) source

Store the progress wave canvas element and create the 2D rendering context

Params:

Name	Type	Attribute	Description
element	HTMLCanvasElement		The progress wave `canvas` element.

public initWave(element: HTMLCanvasElement) source

Store the wave canvas element and create the 2D rendering context

Params:

Name	Type	Attribute	Description
element	HTMLCanvasElement		The wave `canvas` element.

public setFillStyles(waveColor: string | string[], progressColor: string | string[]) source

Set the fill styles for wave and progress

Params:

Name	Type	Attribute	Description
waveColor	string \| string[]		Fill color for the wave canvas, or an array of colors to apply as a gradient
progressColor	string \| string[]	nullable: true	Fill color for the progress canvas, or an array of colors to apply as a gradient

public updateDimensions(elementWidth: number, totalWidth: number, width: number, height: number) source

Update the dimensions

Params:

Name	Type	Attribute	Description
elementWidth	number		Width of the entry
totalWidth	number		Total width of the multi canvas renderer
width	number		The new width of the element
height	number		The new height of the element