JSFiddle - React, Tailwind, and code Playground

by Casufi

HTML

<a href="#" class="button" id="btn-download" target="_blank">Download</a>
<canvas id = "canv" width=820 height=400></canvas>

CSS

canvas {
  border: 1px solid #7e7e7e;
  display: block;
}

JavaScript

var arr1 = [], arr2 = [];
var canvas = document.getElementById("canv");
var ctx = canvas.getContext("2d");
ctx.fillStyle = 'green';
ctx.lineWidth = 1;

function draw(coordx1, coordx2) {
  var n1 = canvas.height / 2 + (coordx1/2);
  var n2 = canvas.height / 2 + (coordx2/2);
  var lenght = arr1.unshift(n1);
  arr2.unshift(n2);
  if (lenght > 800) arr1.pop();
  if (lenght > 800) arr2.pop();
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  ctx.beginPath();
  ctx.arc(800, n1, 5, 0, 2 * Math.PI, false);
  ctx.fill();
  ctx.moveTo(800, n1);
  ctx.strokeStyle="green";
  for (var i = 1; i < arr1.length; i++) {
    ctx.lineTo(800 - 2 * i, arr1[i]);
  }
  ctx.stroke();

  ctx.beginPath();
  ctx.arc(800, n2, 5, 0, 2 * Math.PI, false);
  ctx.fill();
  ctx.moveTo(800, n2);
  ctx.strokeStyle="red";
  for (var i = 1; i < arr2.length; i++) {
    ctx.lineTo(800 - 2 * i, arr2[i]);
  }
  ctx.stroke();

}

function BrowserEventsService() {
  var self = this;

  self.wheelEvent = function() {
    if ('onwheel' in document) return 'wheel';
    if ('onmousewheel' in document) return 'mousewheel';
    return 'MozMousePixelScroll';
  }

  self.placeListeners = function() {
    document.body.addEventListener(self.wheelEvent(), self.mouseWheelHandler);
  }

  self.onMouseWheel = function(e) {

    if (self.cleanWheelTimeout) window.clearTimeout(self.cleanWheelTimeout);
    
    var value = e.wheelDelta || -e.deltaY || -e.detail;

    if (self.prevwheel && self.prevwheel.length > 0 && self.prevwheel.length < 5) {
      var diff = Math.abs(value) - self.prevwheel[0];
      
      console.log({
        "diff": diff,
        "val": value
      })
      
      draw(diff, value);      
    }else{
    	draw(0, 0); 
    }
    
    if (!self.prevwheel) self.prevwheel = [];
    
    self.prevwheel.push(Math.abs(value));
    
    if (self.prevwheel.length > 5) self.prevwheel.shift();
    
    self.cleanWheelTimeout = window.setTimeout(function(){self.prevwheel = []}, 200);
  }

  var...