javascript - Drawing arc to fit angle in html canvas by Circle tangles point with known radius 2D -

it's hard explain problem. i'm gonna try best. first make 2 lines, line contain start point, , end point, this

line = {    startpoint{x: , y:}    endpoint{x: , y:} } 

and draw 2 lines on canvas forming corner of triangle this.

i move lines away each other length radius*2 shown below

then how can draw arc using both endpoint tangents point, shown below

do need use arc or can arcto? , if it's arc; how give of begin drawing , ending point draw shown on image in last figure. thank time, input helps. sorry again bad description of problem

• update - seems did not explain problem fully. here little update. using examples giving here. end oval circle. 'm trying round circle between lines.

yes, can use arcto():

• set first line start point moveto()
• then intersection point between 2 lines first pair
• then end point of second line (what call "startpoint line 2") last pair.
• provide radius
• to draw last line (it's used calculation arcto()) add lineto() last point pair in arc, stroke/fill.

if want move lines apart not know intersection point have manually calculate (see getintersection() in answer) first interpolating lines beyond original length.

var ctx = document.queryselector("canvas").getcontext("2d");    ctx.moveto(0, 0);                 // start point  ctx.arcto(50, 150, 100, 0, 20);   // intersection, outpoint, radius  ctx.lineto(100, 0);               // line arc-end outpoint    ctx.translate(130, 0);  ctx.moveto(0, 0);                 // start point  ctx.arcto(50, 150, 80, 50, 8);   // intersection, outpoint, radius  ctx.lineto(80, 50);               // line arc-end outpoint    ctx.stroke();

<canvas></canvas>

here how can extend lines find intersection point if move them apart without knowing intersection point:

function extendline(line, scale) {   var sx = line.startpoint.x,       sy = line.startpoint.y,       ex = line.endpoint.x,       ey = line.endpoint.y;     return {      startpoint: {x: sx, y: sy},      endpoint: {        x: sx + (ex - sx) * scale,        y: sy + (ey - sy) * scale      }    } } 

scale can ridiculous value need make sure @ steep angles lines intersect somewhere. not affect calculation speed.

so 2 lines (make sure second line continues first line's end-point, meaning you'll have reverse coordinates - if want dynamically can measure distance each point in second line end point of first line, shortest distance comes first startpoint):

the execution steps be:

var line1 = ...,     line2 = ...,     line1tmp = extendline(line1, 10000),     line2tmp = extendline(line2, 10000),     ipoint = getintersection(line1, line2); // see link above  // define line + arcto ctx.moveto(line1.startpoint.x, line1.startpoint.y); ctx.arcto(ipoint.x, ipoint.y,            line2.endpoint.x, line2.endpoint.y,           math.abs(line2.startpoint.x - line1.endpoint.x) / 2); ctx.lineto(line2.endpoint.x, line2.endpoint.y); ctx.stroke();