ADSR Graphic Class for JavaScript

For generating a canvas object in a web page containing a graph representing four ADSR envelope values.
Each ADSR value needs to be the standard of between 0 and 127.

Example 1

• Attack: 80
• Sustain: 100
• Decay: 10
• Release: 60
• Canvas: 70px x 120px

Result:

Example 2

• Attack: 60
• Decay: 30
• Sustain: 90
• Release: 120
• Canvas: 100px x 150px

Result:

Example 3

• Attack: 120
• Decay: 10
• Sustain: 100
• Release: 60
• Canvas: 50px x 80px
• Axis Colour: green

Result:

Example 4

• Attack: 120
• Decay: 10
• Sustain: 100
• Release: 60
• Canvas: 50px x 80px
• Line Colour: orange
• Pixel Width: 2
• include Axis: false

Result:

Example HTML Code

<canvas id="canvas" height="70" width="120"></canvas>

<script src="js/canvasadsr.js"></script>

Example JavaScript Code

let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

let outputADSR1 = new CanvasADSR(ctx,{
  canvasHeight: 70,
  canvasWidth: 120,
  attack: 80,
  decay: 10,
  sustain: 100,
  release : 60,
  lineColour: '#000000',
  pixelWidth: 2,
  includeAxis: true
});