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 = [];
        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();
        $(window).on("blur focus", function(e) {
        	 console.log("blur")
        });
      /*  ...