0

To cut a long story short - I needed some JS code to draw a vertical line on a webpage I'm developing. So I hunted around for some lightweight code (no frameworks or canvas) and found this:

HTML line drawing without canvas (just JS)

I dropped it into my page and it worked. Sort of. Even though I'd given it the co-ordinates to draw a vertical line, it decided that the line must be horizontal. The code in question appears to be this:

  var calc=Math.atan((ay-by)/(bx-ax));
  calc=calc*180/Math.PI;

If I force the angle to be zero, all is well (see here for a JSFiddle and try toggling the calcAngle flag).

How does this code decide which angle the line should be?

N.B. the JSFiddle is just a demonstration of the problem and not anything to do with the site itself so please don't get hung up on the specifics of this code.

Community
  • 1
  • 1
Robbie Dee
  • 1,939
  • 16
  • 43
  • 1
    You've passed the start and end points of a line. Those points make also the angle. Though `calc = Math.atan((ay-by)/(bx-ax));` should use `Math.atan2()` to resolve 90° and 270° angles too. – Teemu Nov 27 '15 at 20:53
  • Btw. [this my answer](http://stackoverflow.com/a/26606613/1169519) contains a simple `drawLine` function. Maybe you could use that? The code is commented, and uses simple `div`s and CSS, and doesn't need any libraries or frameworks. – Teemu Nov 27 '15 at 21:16
  • Suggest you override calc with -90 or 270 and multiply by Math.PI/180. – wolfhammer Nov 27 '15 at 22:43

0 Answers0