Class: CanvasUtils

CanvasUtils()

new CanvasUtils()

CanvasUtils provides several method to manipulate basic geometries in canvas

This class doesn't need to be instantiated, as all its methods are static in order to make those utils methods available with constraints. Refer to each method for their associated documentation.
Since:
  • 2020
Author:
  • Arthur Beaulieu
Source:

Methods

(static) drawBeatCount(canvas, options)

Draw in canvas the beat count and the bar count of current playback.
Parameters:
Name Type Description
canvas object

The canvas to draw hotcue in
options object

Peak meter options

Properties
Name Type Description
x number

The hotcue x origin
y number

The hotcue y origin
label string

The bar count label
Since:
  • 2020
Author:
  • Arthur Beaulieu
Source:

(static) drawCircle(canvas, options)

Draw a circle in given canvas.
Parameters:
Name Type Description
canvas object

The canvas to draw circle in
options object

Circle options

Properties
Name Type Description
centerX number

The circle x origin in canvas dimension
centerY number

The circle y origin in canvas dimension
radius number

The circle radius
radStart number

The rotation start angle in rad
radEnd number

The rotation end angle in rad
width number

The circle line width in N
color string

The circle color in Hex/RGB/HSL
Since:
  • 2020
Author:
  • Arthur Beaulieu
Source:

(static) drawCircleGlow(canvas, options)

Draw a circle with glow effect made with radial gradients in inner and outer circle.
Parameters:
Name Type Description
canvas object

The canvas to draw circle glow in
options object

Circle glow options

Properties
Name Type Description
centerX number

The circle x origin in canvas dimension
centerY number

The circle y origin in canvas dimension
radius number

The circle radius
radStart number

The rotation start angle in rad
radEnd number

The rotation end angle in rad
width number

The circle line width in N
colors Array.<object>

the glow color, must be objects with color (in Hex/RGB/HSL) and index (in Float[0,1], 0.5 being the circle line) properties
Since:
  • 2020
Author:
  • Arthur Beaulieu
Source:

(static) drawDisc(canvas, options)

Draw a disc in given canvas.
Parameters:
Name Type Description
canvas object

The canvas to draw disc in
options object

Disc options

Properties
Name Type Description
centerX number

The circle x origin in canvas dimension
centerY number

The circle y origin in canvas dimension
radius number

The circle radius
radStart number

The rotation start angle in rad
radEnd number

The rotation end angle in rad
color string

The circle color in Hex/RGB/HSL
Since:
  • 2020
Author:
  • Arthur Beaulieu
Source:

(static) drawHotCue(canvas, options)

Draw a hotcue in given canvas. HotCue is a square with a label in it.
Parameters:
Name Type Description
canvas object

The canvas to draw hotcue in
options object

Hot cue options

Properties
Name Type Attributes Description
x number

The hotcue x origin
y number

The hotcue y origin
size number

The hotcue dimension (height/width)
color string <optional>

The hotcue color in Hex or css color
label number

The hotcue label
Since:
  • 2020
Author:
  • Arthur Beaulieu
Source:

(static) drawOscilloscope(canvas, options)

Draw an oscilloscope of frequencies in given canvas.
Parameters:
Name Type Description
canvas object

The canvas to draw disc in
options object

Oscilloscope options

Properties
Name Type Description
samples number

The x origin in canvas dimension
timeDomain number

The height of the frequency bin in canvas dimension
color string | array

the oscilloscope color in Hex/RGB/HSL or rainbow
Since:
  • 2020
Author:
  • Arthur Beaulieu
Source:

(static) drawPeakMeter(canvas, options)

Draw a peakmeter in given canvas.
Parameters:
Name Type Description
canvas object

The canvas to draw disc in
options object

Peak meter options

Properties
Name Type Description
orientation string

The peak meter orientation, either horizontal or vertical
amplitude number

The sample amplitude value
peak number

The peak value
colors Array.<object>

The peak meter gradient colors, must be objects with color and index (in Float[0,1]) properties
Since:
  • 2020
Author:
  • Arthur Beaulieu
Source:

(static) drawPointsOscilloscope(canvas, options)

Draw an oscilloscope as points only in given canvas.
Parameters:
Name Type Description
canvas object

The canvas to draw disc in
options object

Oscilloscope options

Properties
Name Type Description
length number

the oscilloscope length (half FFT)
times number

The time domain bins
color string

The point color in Hex/RGB/HSL
Since:
  • 2020
Author:
  • Arthur Beaulieu
Source:

(static) drawRadialBar(canvas, options)

Draw a radial bar with its height and color being computed from the frequency intensity.
Parameters:
Name Type Description
canvas object

The canvas to draw radial bar in
options object

Radial bar options

Properties
Name Type Description
frequencyValue object

The frequency value in Int[0,255]
x0 number

The x origin in canvas dimension
y0 number

The y origin in canvas dimension
x1 number

The x endpoint in canvas dimension
y1 number

The y endpoint in canvas dimension
width number

The bar line width in N
color string

The bar base color (will be lighten/darken according to frequency value) in Hex/RGB/HSL
Since:
  • 2020
Author:
  • Arthur Beaulieu
Source:

(static) drawRadialOscilloscope(canvas, options)

Draw a radial oscilloscope as points only in given canvas.
Parameters:
Name Type Description
canvas object

The canvas to draw disc in
options object

Oscilloscope options

Properties
Name Type Description
centerX number

the x center position
centerY number

the y center position
rotation number

the rotation offset
length number

the oscilloscope length (half FFT)
times Array.<number>

The time domain bins
points Array.<number>

The oscilloscope radial points objects
color string

The point color in Hex/RGB/HSL
Since:
  • 2020
Author:
  • Arthur Beaulieu
Source:

(static) drawTriangle(canvas, options)

Draw a triangle in given canvas.
Parameters:
Name Type Description
canvas object

The canvas to draw disc in
options object

Peak meter options

Properties
Name Type Description
x number

The triangle x origin
y number

The triangle y origin
radius number

The triangle base
top number

The triangle top position
Since:
  • 2020
Author:
  • Arthur Beaulieu
Source:

(static) drawVerticalBar(canvas, options)

Draw a disc vertical bar in given canvas with given gradient.
Parameters:
Name Type Description
canvas object

The canvas to draw disc in
options object

Vertical bar options

Properties
Name Type Description
originX number

The x origin in canvas dimension
height number

The height of the frequency bin in canvas dimension
width number

The width of the frequency bin in canvas dimension
colors Array.<object>

the gradient colors, must be objects with color and index (in Float[0,1]) properties
Since:
  • 2020
Author:
  • Arthur Beaulieu
Source:

(static) precisionRound(value, precision) → {number}

Round a floating number with a given precision after coma.
Parameters:
Name Type Description
value number

The floating value to round
precision number

the amount of number we want to have after floating point
Since:
  • 2020
Author:
  • Arthur Beaulieu
Source:
Returns:
  • The rounded value
Type
number