CODEWITHSUNDEEP
canvashtml5-canvas
user2028943
user2028943

Reputation: 141

An extra unwanted line using the arc() method in Canvas

<html>
<head>
<script>
  function draw() {
    var canvas = document.getElementById('draw');
    if (canvas.getContext) {
      var ctx = canvas.getContext('2d');
      var ang=prompt("Degree?")
      var sin=Math.sin(ang * Math.PI/180);var cos=Math.cos(ang * Math.PI/180);var tan=Math.tan(ang * Math.PI/180);
      if (ang == 45) {tan = 1}
      ctx.beginPath()
      ctx.font = "18px Calibri";
      ctx.fillStyle = "Black";
      ctx.fillText("k", 5, 150);
      ctx.moveTo(20,20)
      ctx.lineTo(20,220)
      ctx.lineTo(20+(200*tan),220);
      ctx.closePath()
      ctx.stroke() 
      ctx.beginPath()
      ctx.moveTo(20,210)
      if (ang <= 20){
      ctx.lineTo(20+(30*tan),210)
      ctx.lineTo(20+(30*tan),220)}
      else if(ang <= 45){
      ctx.lineTo(20+(10*tan),210)
      ctx.lineTo(20+(10*tan),220)}
      else {ctx.lineTo(30,210)
      ctx.lineTo(30,220)}
      ctx.arc(20,20,30,Math.PI/2,Math.PI/2-(ang*Math.PI/180),true)
      ctx.stroke() 
      ctx.fillText(tan+"k", 47, 240);
      if (ang <= 20) {ctx.fillText(Math.sqrt(tan*tan+1)+"k",30, Math.sqrt(tan*tan+1)/2+60);}
      else if (ang <= 55) {ctx.fillText(Math.sqrt(tan*tan+1)+"k",100, Math.sqrt(tan*tan+1)/2+60)}
      else if (ang <= 77) {ctx.fillText(Math.sqrt(tan*tan+1)+"k",150, Math.sqrt(tan*tan+1)/2+40)}
      else {ctx.fillText(Math.sqrt(tan*tan+1)+"k",100, Math.sqrt(tan*tan+1)/2+20)}
      ctx.font = "14px Calibri";
  ctx.fillText(ang+"\u00B0", 10, 10);
  ctx.font = "25px Calibri";
  ctx.fillText("sin"+ang+"\u00B0 : "+sin, 20, 280);
  ctx.fillText("cos"+ang+"\u00B0 : "+cos, 20, 310);
  ctx.fillText("tan"+ang+"\u00B0 : "+tan, 20, 340);
  ctx.fillText("cosec"+ang+"\u00B0 : "+1/sin, 20, 370);
  ctx.fillText("sec"+ang+"\u00B0 : "+1/cos, 20, 400);
  ctx.fillText("cot"+ang+"\u00B0 : "+1/tan, 20, 430);
    } else {
      document.write("Hey idiot, whhich iidiot brrowserr you are using? No IE clan here!");
    }
  }
</script> 
</head>
<body onload="draw();"> 
<canvas id="draw" width="600" height="600"></canvas>
</body></html>

1) Why an extra line [near the k line, the unstraight line, with the endpoints near the angles] is appearing? I'm pretty sure this due to the arc() method I employ to display the angle? How do I eliminate that in the easiest way?

2) First of all can anyone confirm that the triangle being made is correct. And secondly I have problems with some like 45degree which displays 0.999999... not 1. How to fix?

Upvotes: 3

Views: 1079

Answers (1)

Cerbrus
Cerbrus

Reputation: 72927

  1. To fix the extra line, add:

    ctx.moveTo(20,50);

    Before:

    ctx.arc(20,20,30,Math.PI/2,Math.PI/2-(ang*Math.PI/180),true);

    Working example
    (You were drawing a line from the end of the "Right angle" symbol, to the start of the arc)

  2. The Triangle seems to be constructed correctly, a 45 degree angle returns a triangle that's as high as it is wide, like it should. I'm not seeing the 0.9999999 you mention.

Upvotes: 2

Related Questions