How to draw triangle programmatically on canvas in Javascript?

Question

I am trying to create a triangle on canvas. But I am not sure which side are x1, y1, x2, y2 ... etc. I am matching my triangle with the one given on this website . But I am seeing different results. Here is my JSFiddle

Here is my code:

  var canvasElement = document.querySelector("#canvas"); var ctx = canvasElement.getContext("2d"); // Sides: a = 30  b = 30  c = 59 var triangle = { x1: 30, y1: 0, x2: 0, y2: 59, x3: 30, y3: 59 } ctx.strokeStyle = 'red'; ctx.beginPath(); ctx.moveTo(triangle.x1, triangle.y1); ctx.lineTo(triangle.x2, triangle.y2); ctx.lineTo(triangle.x3, triangle.y3); ctx.lineTo(triangle.x1, triangle.y1); ctx.closePath(); ctx.stroke(); 

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

Answer 1

 var canvasElement = document.querySelector("#canvas"); var ctx = canvasElement.getContext("2d"); // Sides: a = 30  b = 30  c = 59 var triangle = { x1: 30, y1: 0, x2: 0, y2: 59, x3: 30, y3: 59 } ctx.strokeStyle = 'red'; ctx.beginPath(); ctx.moveTo(triangle.x1, triangle.y1); ctx.lineTo(triangle.x2, triangle.y2); ctx.lineTo(triangle.y2, triangle.y2); ctx.closePath(); ctx.stroke(); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <canvas id="canvas" width="300" height="300"></canvas> 

 // JavaScript for drawing on canvas // applying colors + three triangles function draw() { // canvas with id="myCanvas" var canvas = document.getElementById('myCanvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.strokeStyle = "#00F"; ctx.moveTo(400, 0); ctx.lineTo(300, 200); // draw straight down by 200px (200 + 200) ctx.lineTo(500, 200); // draw up toward left (100 less than 300, so left) ctx.closePath(); // connect end to start ctx.stroke(); // outline the shape that's been described } } draw(); 

 <canvas id="myCanvas" width="700" height="410"> <p>Some default content can appear here.</p> </canvas> <p>Triangles!</p> 

Answer 2

After deciding the point where to begin to draw your triangle ( the first vertex is in the center of the canvas in this case ) and the position of the second vertex, you need to calculate the angle between the two sides of equal length. Next you can calculate the position of the third vertex.

Please read the comments in my code.

 var canvasElement = document.querySelector("#canvas"); var ctx = canvasElement.getContext("2d"); // the width of the canvas let cw = (canvasElement.width = 150), cx = cw / 2; //the height of the canvas let ch = (canvasElement.height = 150), cy = ch / 2; //your data let a = 30, b = 30, c = 59; // In this case you have an isosceles triangle since a = b = 30 // this triangle is circumscribed in a circle with a radius = 30 let R = 30; // calculate the angle between the two sides of equal length let angle = Math.asin(.5 * 59 / 30); //draw the circumscribed circle: ctx.beginPath(); ctx.arc(cx, cy, R, 0, 2 * Math.PI); ctx.stroke(); var triangle = { //the first vertex is in the center of the canvas //you may decide to change this. x1: cx, y1: cy, //the second vertex is on the circumscribed circle at 0 radians where R is the radius of the circle ( a = 30, b=30 ) //you may decide to change this. x2: cx + R, y2: cy, //calculate the 3-rd vertex x3: cx + R * Math.cos(angle), y3: cy + R * Math.sin(angle) }; ctx.strokeStyle = "red"; ctx.beginPath(); ctx.moveTo(triangle.x1, triangle.y1); ctx.lineTo(triangle.x2, triangle.y2); ctx.lineTo(triangle.x3, triangle.y3); ctx.lineTo(triangle.x1, triangle.y1); ctx.closePath(); ctx.stroke(); 

 canvas{border:1px solid} 

 <canvas id="canvas" ></canvas> 

UPDATE

The OP is commenting:

What if triangle is not isosceles? But Equilateral.

This is a simpler case since all sides and all angles are equal. The next demo is drawing an equilateral triangle.

 var canvasElement = document.querySelector("#canvas"); var ctx = canvasElement.getContext("2d"); // the width of the canvas let cw = (canvasElement.width = 150), cx = cw / 2; //the height of the canvas let ch = (canvasElement.height = 150), cy = ch / 2; //your data let L = 60 let a = L, b = L, c = L; let R = (L *.5) / Math.cos(Math.PI/6); //draw the circumscribed circle: ctx.beginPath(); ctx.arc(cx, cy, R, 0, 2 * Math.PI); ctx.stroke(); var triangle = { //the first vertex is on the circumscribed circle at 0 radians where R is the radius of the circle ( R) //you may decide to change this. x1: cx + R, y1: cy, //the second vertex is on the circumscribed circle at 2*Math.PI/3 radians //you may decide to change this. x2: cx + R * Math.cos(2*Math.PI/3), y2: cy + R * Math.sin(2*Math.PI/3), //calculate the 3-rd vertex x3: cx + R * Math.cos(4*Math.PI/3), y3: cy + R * Math.sin(4*Math.PI/3) }; ctx.strokeStyle = "red"; ctx.beginPath(); ctx.moveTo(triangle.x1, triangle.y1); ctx.lineTo(triangle.x2, triangle.y2); ctx.lineTo(triangle.x3, triangle.y3); ctx.lineTo(triangle.x1, triangle.y1); ctx.closePath(); ctx.stroke(); 

 canvas{border:1px solid} 

 <canvas id="canvas" ></canvas> 

UPDATE 2

Drawing a triangle where all sides are different. For this I need to use the law of cosines.

c ² = a ² + b ² - 2*a b cos(C)

Where the angle C is opposed to side c .

solving triangle

Knowing this you can get the angle C:

let angleC = Math.acos((c*c - a*a - b*b) / (2*a*b) );

 var canvasElement = document.querySelector("#canvas"); var ctx = canvasElement.getContext("2d"); let cw = (canvasElement.width = 150), cx = cw / 2; let ch = (canvasElement.height = 150), cy = ch / 2; // all sides are different let a = 45, b = 30, c = 59; let angleC = Math.acos((c*c - a*a - b*b) / (2*a*b) ); var triangle = { //the first vertex is in the center of the canvas //you can change this. x1: cx, y1: cy, // the second vertex x2: cx + a, y2: cy, // the 3-rd vertex x3: cx + b*Math.cos(angleC), y3: cy + b*Math.sin(angleC), } ctx.strokeStyle = "red"; ctx.beginPath(); ctx.moveTo(triangle.x1, triangle.y1); ctx.lineTo(triangle.x2, triangle.y2); ctx.lineTo(triangle.x3, triangle.y3); ctx.lineTo(triangle.x1, triangle.y1); ctx.closePath(); ctx.stroke(); 

 canvas{border:1px solid} 

 <canvas id="canvas" ></canvas> 

I hope it helps.