sine cos clean

by rao b

HTML

<canvas id="myCanvas" width="360" height="360" style="border:1px solid #d3d3d3;">

JavaScript

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

for(i=0; i<360; i+= 10){
     ctx.moveTo(i+5,180);
    ctx.lineTo(i,180);

}
for(i=0; i<360; i+= 10){
 ctx.moveTo(180, i+5);
    ctx.lineTo(180,i);

}

ctx.stroke();

var iSin = 0, counterSin = 0, xSin=180,ySin=0;
var iCos = 0, counterCos = 0, xCos=0,yCos=180;
var iCircle = 0, counterCircle = 0, xCircle=180,yCircle=0;
var increase = 90/180*Math.PI / 9;
drawSineWave();
drawCosineWave();
drawCircle();

function drawSineWave(){
     ctx.beginPath();
     ctx.strokeStyle = ("#0C620B");
     ctx.moveTo(xSin, ySin);     
     xSin = 180 + Math.sin(counterSin)* 180;
     ySin=  iSin;
     counterSin += increase;  
     ctx.lineTo(xSin,ySin);
     ctx.stroke();
     iSin += 10;
     if(iSin<=360){        
        setTimeout(drawSineWave, 100); 
     }
}


function drawCosineWave(){
     ctx.beginPath();
     ctx.strokeStyle = ("#BE1616");
     ctx.moveTo(xCos,yCos);   
     xCos = iCos;
     yCos =  180 - Math.cos(counterCos)* 180;
     counterCos += increase;  
     ctx.lineTo(xCos,yCos);
     ctx.stroke();
     iCos += 10;
     if(iCos<=360){        
          setTimeout(drawCosineWave, 100); 
    }
}

function drawCircle(){
     ctx.beginPath();
     ctx.strokeStyle = ("#021A02");
     ctx.moveTo(xCircle,yCircle);   
     xCircle = 180 + Math.sin(counterCircle)* 180;
     yCircle =  180 - Math.cos(counterCircle)* 180;
     counterCircle += increase;  
     ctx.lineTo(xCircle,yCircle);
     ctx.stroke();
     iCircle += 10;
     if(iCircle<=360){        
        setTimeout(drawCircle, 100); 
     }
}