Home Reference Source
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

Member Summary

Public Members
public

Canvas 2d context attributes

public

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

public

Unique identifier for this entry

public

progress: HTMLCanvasElement

The (optional) progress wave node

public

The (optional) progress wave canvas rendering context

public

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

public

wave: HTMLCanvasElement

The wave node

public

The wave canvas rendering context

Method Summary

Public Methods
public

Set the canvas transforms for wave and progress

public

Clear the wave and progress rendering contexts

public

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

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, progressColor: 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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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 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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
element HTMLCanvasElement

The progress wave canvas element.

public initWave(element: HTMLCanvasElement) source

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

Params:

NameTypeAttributeDescription
element HTMLCanvasElement

The wave canvas element.

public setFillStyles(waveColor: string, progressColor: string) source

Set the fill styles for wave and progress

Params:

NameTypeAttributeDescription
waveColor string

Fill color for the wave canvas

progressColor string
  • nullable: true

Fill color for the progress canvas

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

Update the dimensions

Params:

NameTypeAttributeDescription
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