8

In Javascript I want to draw a line from x/y with a given length and angle. I don't want to draw a line from x1/y1 to x2/y2. I have an x/y origin, an angle and a length.

The line needs to sit on top of a standard web page at a specific position.

How can I do this?

Thanks

Newt-7
  • 275
  • 1
  • 3
  • 9
  • 3
    Believe me, you do want to draw a line to x2/y2. Just think how you might compute these coordinates you don't know. – Bergi May 11 '14 at 22:21
  • Well, you're basically saying you want to draw a line using polar coordinates instead of rectilinear ones. You can just convert your points using trig. Basic high school math: if you have a vector of length `r` and an angle `θ`, you can write this vector as r(cosθ + sinθ) = rcosθ + rsinθ. This gives you the length of `x` and `y`, meaning you can then easily draw the line on a canvas. – royhowie May 11 '14 at 22:21
  • What commands for drawing a line do you have available to you? – Floris May 11 '14 at 22:22
  • I can use anything that will get the job done. Probably canvas if it sits nicely on top of html without swallowing events intended for the background html – Newt-7 May 11 '14 at 22:23
  • `x2 = x1 + r*cos(theta); y2 = y1 + r*sin(theta);` – Floris May 11 '14 at 22:24
  • Is there a simple js lib that will take my values and draw a line? – Newt-7 May 11 '14 at 22:25
  • Looks good Floris thanks I'll use your code as a basis. I've seen lots of libs that can draw point to point. – Newt-7 May 11 '14 at 22:27
  • Thanks Luxelin, I'm looking at d3 now – Newt-7 May 11 '14 at 22:29
  • @Newt-7 I'll make you a basic example; hold up. – royhowie May 11 '14 at 22:31
  • @CBroe can you pinpoint those basic maths? It would be better to comment which basic maths you are talking about. – nicholaswmin May 11 '14 at 22:40
  • @NicholasKyriakides - I believe that my earlier comment shows what that basic maths (trigonometry) is... – Floris May 11 '14 at 22:43
  • @Floris That does, but CBroe's comment does not. Thanks for pinpointing this out for the guy – nicholaswmin May 11 '14 at 23:20
  • 1
    http://stackoverflow.com/questions/17047378/finding-coordinates-after-canvas-rotation/17053883#17053883 –  May 12 '14 at 00:30
  • @epistemex - that is a very good answer/link! – Floris May 12 '14 at 05:23
  • The question is not a duplicate of the one listed – chasmani Feb 14 '17 at 21:45

1 Answers1

32

moveTo(x,y) defines the starting point of the line
lineTo(x,y) defines the ending point of the line

So you want something like this:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
x1 = 30;
y1 = 40;
r =  50;
theta = 0.5;
ctx.moveTo(x1, y1);
ctx.lineTo(x1 + r * Math.cos(theta), y1 + r * Math.sin(theta));
ctx.stroke();

where you must make sure that theta is in radians and that ctx is defined to be whatever canvas context you want it to be (in the above code, this means you want something like

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

in your html).

If theta is in degrees, you can use Math.cos(Math.PI * theta / 180.0) and Math.sin(Math.PI * theta / 180.0) instead of Math.cos(theta) and Math.sin(theta) to get the job done...

Floris
  • 45,857
  • 6
  • 70
  • 122
  • 1
    Great thanks a lot massive help. Got this so far http://jsfiddle.net/HvLJR/1/ will convert to degrees tomorrow. – Newt-7 May 11 '14 at 23:00
  • @Floris, My use case is little bit different. I have a line on canvas which is not parallel to neither x nor y axis. It is a random line anywhere in canvas. I have to draw another line with the help of given angle and length. Say one line is there (10,20) to (30,40) and then I want to create another line from (30,40) with the given angle and length. Please help. – Surya Aug 31 '20 at 12:26
  • If I follow the code snippets you provided the new line is getting created with the desired angle but the angle is creating considering the y axis not with a existing line. – Surya Aug 31 '20 at 12:31
  • @Floris, Thanks for responding on this old post :) Can you please give the code snippet like you gave for the original question which helped me a lot. I have taken the code snippet which you mentioned in the answer section 6 years back. If you can tell me what to modify for my use case then it will a great help! – Surya Aug 31 '20 at 12:44
  • @SuryaN Sorry my attempt at showing what to do would not format correctly and I ran out of editing time so had to delete the comment. You need a 2D rotation matrix to go from relative coordinates to absolute. You will honestly learn more if you try this yourself first - google “rotate 2D vector”. Basically we have a vector of the form [r*cos(theta), r*sin(theta)] now; You need to multiply that by the rotation matrix for the original vector relative to which you want to draw. – Floris Aug 31 '20 at 12:49
  • The result will look something like this (doing off the top of my head .... errors possible): r*[cos(phi)*cos(theta) -sin(phi)*sin(theta), sin(phi)*cos(theta)+cos(phi)*sin(theta)] where phi is the angle of the vector relative to which you want to dra, and theta is the angle you want between the two vectors. See if you can make that work. – Floris Aug 31 '20 at 12:51