How to make a triangle pattern drawing

Question

I have this code:

ctx.beginPath();
ctx.moveTo(X1,Y1);
ctx.lineTo(X2,Y2);
ctx.lineTo(X3,Y3);
ctx.lineTo(X4,Y4);
ctx.closePath();
ctx.stroke();

Note:

1. There are four points (A,B,C,D).
2. Triangle can be formed if X1 !== X3
3. An Imaginary line is formed between the points to form a triangle shape

Answer 1

You'll have to choose which shape you will draw, here is an implementation drawing four possible ones :

 var ctx = canvas.getContext('2d'), activePoint, dragging, names='ABCD'; pointWidth = 10, points=[]; function isBetween(p,f){ return (f-pointWidth/2 <= p && p <= f+pointWidth/2); } function draw(){ ctx.clearRect(0,0,canvas.width,canvas.height); if(points.length===4) drawTriangle(); drawPoints(); } function drawPoints(){ ctx.strokeStyle="black" ctx.fillStyle="black" for(var i=0; i<points.length; i++){ ctx.beginPath(); ctx.arc(points[i].x, points[i].y, pointWidth, 0, 2*Math.PI); ctx.stroke(); } ctx.strokeStyle="purple" ctx.beginPath(); for(var i=0; i<points.length-1; i++){ ctx.moveTo(points[i].x, points[i].y); ctx.lineTo(points[(i+1)].x, points[(i+1)].y); ctx.fillText(names[i],points[i].x, points[i].y-pointWidth); } ctx.stroke(); ctx.fillText(names[points.length-1],points[points.length-1].x, points[points.length-1].y-pointWidth); } function drawTriangle(){ var db = {x1:points[3].x, y1:points[3].y, x2:points[1].x, y2:points[1].y}; var l1 = drawLines(db); var ca = {x1:points[2].x, y1:points[2].y, x2:points[0].x, y2:points[0].y}; var l2 = drawLines(ca); var inter = getIntersect(l1, l2); if(inter){ ctx.fillStyle="rgba(255,0,255,.25)"; ctx.beginPath(); ctx.lineTo(l1.x1, l1.y1); ctx.lineTo(inter.x, inter.y); ctx.lineTo(l2.x2, l2.y2); ctx.closePath(); ctx.fill(); ctx.fillStyle="rgba(0,0,255,.25)"; ctx.beginPath(); ctx.lineTo(l2.x1, l2.y1); ctx.lineTo(inter.x, inter.y); ctx.lineTo(l1.x2, l1.y2); ctx.closePath(); ctx.fill(); ctx.fillStyle="rgba(255,0,0,.25)"; ctx.beginPath(); ctx.lineTo(l1.x1, l1.y1); ctx.lineTo(inter.x, inter.y); ctx.lineTo(l2.x1, l2.y1); ctx.closePath(); ctx.fill(); ctx.fillStyle="rgba(255,255,0,.25)"; ctx.beginPath(); ctx.lineTo(l2.x2, l2.y2); ctx.lineTo(inter.x, inter.y); ctx.lineTo(l1.x2, l1.y2); ctx.closePath(); ctx.fill(); ctx.fillStyle= "red"; ctx.beginPath(); ctx.arc(inter.x, inter.y, pointWidth/3, 0, 2*Math.PI); ctx.fill(); } } function drawLines(pt){ var segLength = Math.sqrt(Math.pow((pt.x1 - pt.x2), 2) + Math.pow((pt.y1 - pt.y2), 2)), startDist = Math.max(canvas.width,canvas.height)*-2, endDist = startDist*-1; var rX1 = pt.x2 + (pt.x2 - pt.x1) / segLength * startDist; var rY1 = pt.y2 + (pt.y2 - pt.y1) / segLength * startDist; var rX2 = pt.x2 + (pt.x2 - pt.x1) / segLength * endDist; var rY2 = pt.y2 + (pt.y2 - pt.y1) / segLength * endDist; ctx.beginPath(); ctx.strokeStyle="green"; ctx.moveTo(rX1, rY1); ctx.lineTo(rX2, rY2); ctx.stroke(); return {x1:rX1, y1:rY1, x2:rX2, y2:rY2}; } function getIntersect(l1, l2){ den = ((l2.y2 - l2.y1) * (l1.x2 - l1.x1)) - ((l2.x2 - l2.x1) * (l1.y2 - l1.y1)); if (den == 0) { return false; } a = l1.y1 - l2.y1; b = l1.x1 - l2.x1; num1 = ((l2.x2 - l2.x1) * a) - ((l2.y2 - l2.y1) * b); num2 = ((l1.x2 - l1.x1) * a) - ((l1.y2 - l1.y1) * b); a = num1 / den; b = num2 / den; var x = l1.x1 + (a * (l1.x2 - l1.x1)); var y = l1.y1 + (a * (l1.y2 - l1.y1)); return {x:x,y:y}; } canvas.onmousemove = function(e){ var rect = this.getBoundingClientRect(); var x = e.clientX-rect.left; var y = e.clientY-rect.top; if(!dragging){ for(var i=0; i< points.length; i++){ if(isBetween(x, points[i].x) && isBetween(y, points[i].y)){ this.style.cursor = 'pointer'; activePoint = points[i]; return; } } this.style.cursor = 'default'; activePoint = null; } else{ activePoint.x=x; activePoint.y=y; draw(); } } canvas.onmousedown = function(e){ if(points.length<4){ var rect = this.getBoundingClientRect(); var x = e.clientX-rect.left; var y = e.clientY-rect.top; points.push({x:x, y:y}) draw(); } if(!activePoint) return; dragging = true; } canvas.onmouseup = function(e){ dragging = false; }

 canvas{border: 1px solid red}

 <canvas id="canvas" width="500" height="500"></canvas>

Answer 2

Basically what you need are:

1. Get the Infinity line of lines AC and BD.
2. Get the intersection point of lines AC and BD.(2nd point).
3. After saving the intersection point choose the infinity lines between A,B,C and D depending on your constraint then make an infinity out of it (3rd point).
4. Go back to your line to serve as a point 1