JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="unitcanvas"  width="280" height="260" ></canvas>

<canvas id="canvas"  width="430" height="260" ></canvas>

JavaScript

function DrawCurve(){
	       var canvas=document.getElementById('canvas');
	       var ctx=canvas.getContext('2d');
		   var unitcanvas=document.getElementById('unitcanvas');
	       var unitctx=unitcanvas.getContext('2d');
		   ctx.clearRect(0,0,504,348);
			unitctx.beginPath();
			unitctx.moveTo(140,0);
			unitctx.lineTo(140,260);
			unitctx.lineWidth=1.5;
			unitctx.stroke();
			unitctx.beginPath();
			unitctx.moveTo(10,130);
			unitctx.lineTo(270,130);
			unitctx.stroke();  
	  	    unitctx.closePath();
			ctx.beginPath();
			ctx.moveTo(50,0);
			ctx.lineTo(50,260);
			ctx.stroke();
			ctx.beginPath();
			ctx.moveTo(50,130);
			ctx.lineTo(420,130);
			ctx.stroke();  
	  	    ctx.closePath();
			unitctx.font="bold 12px Arial";
			for(i=0;i<7;i++)
			    {
				if(i==3){
				unitctx.beginPath();
				unitctx.fillText((1.5-(i/2)),145,150);
				        }
				if(i!=3){
				unitctx.beginPath();
				unitctx.moveTo(140,10+(i*40));
				unitctx.lineTo(133,10+(i*40));
				if(i%2==0)
				    {
				unitctx.fillText((1.5-(i/2)),(1.5-(i/2))<0?110:113,10+(i*40)+3);
				    }
				else
                    {
				unitctx.fillText((1.5-(i/2)),(1.5-(i/2))<0?122:125,10+(i*40)+3);
                    }					 
				unitctx.stroke();
				unitctx.beginPath();
				unitctx.moveTo(20+(i*40),130);
				unitctx.lineTo(20+(i*40),137);
				if(i%2==0)
				    {
				      unitctx.fillText(((i/2)-1.5),((i/2)-1.5)>0?(i*40)+12:(i*40)+7,150);
				    }
			    else
				    {
				      unitctx.fillText(((i/2)-1.5),((i/2)-1.5)>0?(i*40)+16:(i*40)+12,150);
					}
				unitctx.stroke();
				       }
				}
				
			unitctx.beginPath();
            unitctx.lineWidth=1.5;			
			unitctx.arc(140,130,80,0,Math.PI*2);
            unitctx.strokeStyle="red";			
			unitctx.stroke();	
			
            var Wave=[];
            for(i=0;i<6.28;i+=0.03)
                    {
				Wave.push([(i*(350/6.28)),130-(Math.sin(i)*80)]);
                    }	
          ctx.beginPath();					
		  ctx.moveTo(50+Wave[0][0],Wave[0][1])
		 ...