After updating the angle value, the line is quickly redrawn correctly but then disappears. It seems like the input value may be getting refreshed and set to undefined again. How can I ensure that the line retains the correct angle?
<script language="javascript" type="text/javascript">
//Global Variables
rad2deg = 180/(Math.PI);
var mouse = {
x: -1,
y: -1
};
function findAngle(e){
var ang = (Math.atan((720-mouse.y)/(e.pageX-mouse.x)))*rad2deg;
$("#angle").val(ang+"°");
}
function Draw(firstX, firstY, lastX){
cvs = $("canvas")[0].getContext("2d");
cvs.clearRect(0,0,1080,720);
cvs.beginPath();
cvs.moveTo(firstX, firstY);
cvs.lineTo(lastX, 720);
cvs.closePath();
cvs.lineWidth=5;
cvs.stroke();
};
function drawUserAngle(){
enter = 0;
mod = enter % 2;
alert($("#angle").val());
var angle = $("#angle").val()/rad2deg;
if($("#angle").val() !== 'undefined'){
var x = 540 - (180/(Math.tan(angle)));
Draw(x,540,540);
}
}
$(document).ready(function(){
$("canvas").click(function(e){
if(mouse.x != -1 && mouse.y != -1){
Draw(mouse.x, mouse.y, e.pageX);
findAngle(e);
mouse.x = -1;
mouse.y = -1;
}else{
mouse.x = e.pageX;
mouse.y = e.pageY;
}
});
});
</script>
<form>
Angle: <input type="text" id="angle">
<button onclick="drawUserAngle()">Enter</button>