EXTEND LINE AFTER INTERSECTION

Question

i have two lines i need to extend the lines after intersection using mathematic formula pls help me.

 <!DOCTYPE html>
 <html>
 <body>
 <canvas id="myCanvas" width="200" height="100" style="border:0px solid #d3d3d3;">
 Your browser does not support the HTML5 canvas tag.</canvas>
 <script>
 var c=document.getElementById("myCanvas");
 var ctx=c.getContext("2d");
 ctx.moveTo(0,0);
 ctx.lineTo(200,100);
 ctx.moveTo(0,100);
 ctx.lineTo(200,100);
 ctx.stroke();
 </script>
 </body>
 </html>

enter image description here

i have a two lines like this i want to extend both lines form endpoint. — Arunkumar, Jan 31 '14 at 12:58
Extend from what to what? Can you add a sketch showing what you want. — John Alexiou, Jan 31 '14 at 13:49
Let's say by "extend" you mean find the y at a given x so you can extend your line(s) to that xy. You can use the equation of a line to do that: y=mx+b. You need to calculate the "m"--slope. You also need to calculate the "b"--Yintercept. Then plug in your desired "x" and you get your "y". Your question was closed so to continue briefly...First, m=(y2-y1)/(x2-x1). Second, solve for "b" by plugging one of your lines x,y and calculated m. Now you've got y=mx+b to solve your problems! — markE, Jan 31 '14 at 15:45

georg · Accepted Answer · 2014-02-03T10:01:06.450

2

Assume you've got a triangle defined by three points:

a = {x:10, y:20}
b = {x:60, y:70}
c = {x:99, y:30}

This is how to draw it:

ctx.beginPath();
ctx.moveTo(a.x, a.y);
ctx.lineTo(b.x, b.y);
ctx.lineTo(c.x, c.y);
ctx.stroke()
ctx.closePath();

Now let's extend both sides. The first line is given by:

slope1 = (a.y - b.y) / (a.x - b.x)
intercept1 = b.y - (slope1 * b.x)

similarly, the second one:

slope2 = (c.y - b.y) / (c.x - b.x)
intercept2 = b.y - (slope2 * b.x)

Select endpoints on the other side of the intersection point:

if(!Number.isFinite(slope1)) end1 = {x:b.x, y:b.y*2-a.y}
else if(!slope1)             end1 = {x:b.x*2-a.x, y:b.y}
else                         end1 = {x:b.x*2-a.x, y:(b.x*2-a.x)*slope1+intercept1 }

if(!Number.isFinite(slope2)) end2 = {x:b.x, y:b.y*2-c.y}
else if(!slope2)             end2 = {x:b.x*2-c.x, y:b.y}
else                         end2 = {x:b.x*2-c.x, y:(b.x*2-c.x)*slope2+intercept2 }

and draw the extensions:

ctx.beginPath();
ctx.setStrokeColor('red');
ctx.moveTo(b.x, b.y);
ctx.lineTo(end1.x, end1.y);
ctx.moveTo(b.x, b.y);
ctx.lineTo(end1.x, end1.y);
ctx.stroke();
ctx.closePath();

http://jsfiddle.net/K549H/10/

edited Feb 03 '14 at 10:01

answered Jan 31 '14 at 13:01

georg

211,518
52
313
390

k. in this case http://jsfiddle.net/K549H/3/. i need a common way it form any place any angle. – Arunkumar Jan 31 '14 at 13:19
Thanks a lot man... It works well. I have no words. Thanks Man. Thank u – Arunkumar Feb 01 '14 at 05:09
sometimes it shows following values.end2 * slope2 + intercept2,slope2,intercept2 :NaN ,-Infinity, Infinity. in this case one line not drawn. – Arunkumar Feb 01 '14 at 05:25
see above image one line not drawn. – Arunkumar Feb 01 '14 at 05:32
@v.ArunKumar: yes, my mistake - vertical lines have no slope... See update. – georg Feb 02 '14 at 11:08
please answer my question: http://stackoverflow.com/questions/21605732/how-to-draw-angle-in-between-two-lines-in-javascript – Arunkumar Feb 06 '14 at 14:34
if possible pls answer:http://stackoverflow.com/questions/21846480/how-to-draw-the-linebelow-mentioned-way-in-canvas?noredirect=1#comment33069175_21846480 – Arunkumar Feb 18 '14 at 07:32

score 1 · Answer 2 · answered Jan 31 '14 at 13:04

1

Your canvas needs to be bigger.

<canvas id="myCanvas" width="400" height="400" style="border:0px solid #d3d3d3;">

And the lines longer =>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
 ctx.moveTo(0,0);
 ctx.lineTo(400,200);
 ctx.moveTo(0,100);
 ctx.lineTo(400,100);
 ctx.stroke();

Here 's a fiddle: http://jsfiddle.net/Vandeplas/XHBe5/

answered Jan 31 '14 at 13:04

VDP

6,340
4
31
53

k. in this case jsfiddle.net/K549H/3. i need a common way it form any place any angle. – Arunkumar Jan 31 '14 at 13:28

EXTEND LINE AFTER INTERSECTION

2 Answers2