var my_canvas=$('#my_canvas').get(0)
var gctx = my_canvas.getContext("2d");
var my_canvas1=$('#my_canvas').get(0)
var gctx = my_canvas.getContext("2d");
var gctx1 = my_canvas1.getContext("2d");
gctx.beginPath();
my_start=function my_start(){	
/////////// Grid ///////
var gap=10;

for (var ver = 0; ver <=my_canvas.width; ver+=gap){
gctx.moveTo(ver,0)
gctx.lineTo(ver,my_canvas.height);
}
for (var ver = 0; ver <=my_canvas.height; ver+=gap){
gctx.moveTo(0,ver)
gctx.lineTo(my_canvas.width,ver);
}
gctx.strokeStyle= '#f0f040';
gctx.stroke();

////////// Grid end ////////

/////// Axis //////
gctx.beginPath();
gctx.lineWidth=3;
gctx.shadowColor = '#ffffff';
gctx.strokeStyle= '#0060c0';
gctx.moveTo(0, my_canvas.height/2); 
// Horizontal X Axis 
gctx.lineTo(my_canvas.width,my_canvas.height/2); 
gctx.moveTo(10, 2);
gctx.lineTo(10,my_canvas.height);  // Vertical Y Axis
gctx.stroke(); 
////////Axis end///
}

var angle=0;
var speed=5;
gctx.lineWidth=2;

gctx1.lineWidth=2;


var x_old=10;
var y_old=my_canvas.height/2
var x1_old=10;
var y1_old=10;
my_function=function my_function(){	
gctx.beginPath();
gctx.strokeStyle= '#f00000';
var y =my_canvas.height/2-140*(Math.sin(( Math.PI/180 )*angle))
var x=10 + angle;
$('#t1').html("Angle : " + angle);
gctx.moveTo(x_old,y_old);
gctx.lineTo(x,y);
x_old=x;
y_old=y;
gctx.stroke();

gctx1.beginPath();
gctx1.strokeStyle= '#00ff00';
var y1 =my_canvas.height/2-140*( Math.cos(( Math.PI/180 )*angle))
var x1=10 + angle;
//$('#t1').html("Angle : " + angle);
gctx1.moveTo(x1_old,y1_old);
gctx1.lineTo(x1,y1);
x1_old=x1;
y1_old=y1;
gctx1.shadowColor = '#303040';
gctx1.shadowOffsetX=2;
gctx1.shadowOffsetY=2;
gctx1.shadowBlur = 2;
gctx1.stroke();

my_function2();
}

my_function2=function my_function2(){
if(angle <=my_canvas.width -11){	
angle=angle+1;
my_time=setTimeout('my_function()',speed)
}else{angle=0;
gctx.moveTo(10, my_canvas.height/2);
gctx1.moveTo(10, my_canvas.height/2);
clearTimeout(mytime)
}
}
////////////
my_function2();
/////////////////
$('#b1').click(function(){
gctx.clearRect(0,0,my_canvas.width,my_canvas.height);
gctx1.beginPath();
gctx.beginPath();

 angle=0;
gctx.lineWidth=2;
gctx1.lineWidth=2;
 x_old=10;
 y_old=my_canvas.height/2
 x1_old=10;
 y1_old=10;
my_start()
my_function2();
})
///////////
my_start()