JSFiddle - React, Tailwind, and code Playground

by piiantom

HTML

<div id="title">Sine Wave Experiment</div>
<div id="wave-wrapper">
  <canvas id="waves"></canvas>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Raleway:100,300);
body {
  
 
  background-size: 100%;
  font-family: 'Raleway', sans-serif;
  font-weight: 100;
  color: rgba(0, 0, 0, 0.5);
  height: 100vh;
  width: 100vw;
}

#wave-wrapper {
  margin: 20px auto;
  width: 294px;
  height: 78px;
}

JavaScript

/**
 * Generates multiple customizable animated sines waves
 * using a canvas element. Supports retina displays and
 * limited mobile support
 *
 * I've created a seperate library based on this pen. 
 * Check it out at https://github.com/isuttell/sine-waves
 */
function SineWaveGenerator(options) {
  $.extend(this, options || {});
  
  if(!this.el) { throw "No Canvas Selected"; }
  debugger;
  this.ctx = this.el.getContext('2d');
  
  if(!this.waves.length) { throw "No waves specified"; }
  
  // Internal
  this._resizeWidth();
  window.addEventListener('resize', this._resizeWidth.bind(this));
  // User
  this.resizeEvent();
  window.addEventListener('resize', this.resizeEvent.bind(this));
  
  if(typeof this.initialize === 'function') {
    this.initialize.call(this);
  }
  // Start the magic
  this.loop();
}

// Defaults
SineWaveGenerator.prototype.speed = 10;
SineWaveGenerator.prototype.amplitude = 50;
SineWaveGenerator.prototype.wavelength = 50;
SineWaveGenerator.prototype.segmentLength = 10;

SineWaveGenerator.prototype.lineWidth = 2;
SineWaveGenerator.prototype.strokeStyle  = 'rgba(0, 0, 0, 0.2)';

SineWaveGenerator.prototype.resizeEvent = function() {};

// fill the screen
SineWaveGenerator.prototype._resizeWidth = function() {
  this.dpr = window.devicePixelRatio || 1;
  
//	console.log('this');
	var elementWrapper = document.getElementById('wave-wrapper');
  console.log(elementWrapper.offsetWidth);
  this.width = this.el.width = elementWrapper.offsetWidth * this.dpr;
  this.height = this.el.height = elementWrapper.offsetHeight * this.dpr;
  this.el.style.width = elementWrapper.offsetWidth + 'px';
  this.el.style.height = elementWrapper.offsetHeight + 'px';
  
  this.waveWidth = this.width * 0.95;
  this.waveLeft = this.width * 0.025;
}

SineWaveGenerator.prototype.clear = function () {
  this.ctx.clearRect(0, 0, this.width, this.height);
}

SineWaveGenerator.prototype.time = 0;

SineWaveGenerator.prototype.update = function(time) {  
  this.time =...