JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<button id="stop">Stop</button>
<br>
<canvas id="canvas" width=1200 height=400></canvas>

CSS

body {
    background-color: black;
}
#canvas {
    border:1px solid red;
}

JavaScript

(function() {
    var lastTime = 0;
    window.requestAnimationFrame = function(callback, element) {
      var currTime = new Date().getTime();
      var timeToCall = Math.max(0, 16 - (currTime - lastTime));
      var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
                                 timeToCall);
      lastTime = currTime + timeToCall;
      return id;
    };
  }());
  var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        // capture incoming socket data in an array
        var data = [], test, test2;
        var btn = document.getElementById('stop');
        // TESTING: fill data with some test values
     		 var cutArr = [];
        // var t ;
        sinewave();
        setInterval(function () {
        //	console.log("value "+d1)
       //   t = d1;
          data = data.slice(0, d1);
        //  console.log(data)
        	//	ctx.clearRect(0, 0, canvas.width, canvas.height);
        	 continueAnimation = true ;
           //d1 = 0;
           sinewave();
            //sinewave1();
            //sinewave2();
        }, 20000);
        function sinewave() {
        			//data = [] ;
       			 //continueAnimation = true ;
            var sineValue = Math.random() *  (90 - 30) + 61;
            console.log(sineValue);  
            continueAnimation = true ;
            for (var i = 0; i < 1320; i++) {
           // if(continueAnimation == false ){
            	//break;
            //}
                //continue;
                data.push(-Math.sin(i / 30) * sineValue + 180);
                var blueValue = sineValue;
            }
           // console.log(data)
            $("#blueValue").html(blueValue);
        }
       
        var x = 0, d1 = 0;
        var panAtX = 600;
        var continueAnimation = true;
         animate();
        
      /*   document.getElementById('start').addEventListener('click', function() {
										//	data = [];
                     ...