JSFiddle - React, Tailwind, and code Playground

by johnhoffman

JavaScript

var data = [0.5, -0.4, 0.6, -0.2, 0.7, 0.4, 0.1, -0.5];

var c = document.createElement('canvas');
document.body.appendChild(c);

c.width = 400;
c.height = 200;
ctx = c.getContext('2d');

c.addEventListener('mousedown', function(e) {
  remakeSpectrum();
  ctx.moveTo(e.offsetX, 0);
  ctx.fillStyle = 'rgb(100, 2, 42)';
  ctx.lineTo(e.offsetX, 200);
  ctx.stroke();
}, false);

function remakeSpectrum() {
ctx.fillStyle = 'rgb(200, 0, 0)';
ctx.fillRect(0, 0, 400, 200);
ctx.beginPath();
ctx.moveTo(0, 100);
ctx.strokeStyle = 'rgb(0, 200, 0)';
ctx.lineTo(400, 100);
var offset = 0;
ctx.strokeStyle = 'rgb(0, 0, 200)';
for (var i = 0; i < data.length; i++) {
  ctx.moveTo(i, 100);
  ctx.lineTo(i, 100 - data[i] * 100);
}
ctx.stroke();
}
remakeSpectrum();