Create equilateral triangle in the middle of canvas?

Question

I want to draw an equilateral triangle in the middle of canvas. I tried this:

ctx.moveTo(canvas.width/2, canvas.height/2-50);
ctx.lineTo(canvas.width/2-50, canvas.height/2+50);
ctx.lineTo(canvas.width/2+50, canvas.height/2+50);
ctx.fill();

But the triangle looks a bit too tall.

How can I draw an equilateral triangle in the middle of canvas?

Someone told me you have to find the ratio of the height of an equilateral triangle to the side of an equilateral triangle.

h:s

What are the two numbers?

tom10 · Answer 1 · 2012-01-20T06:08:28.577

11

The equation for the three corner points is

x = r*cos(angle) + x_center
y = r*sin(angle) + y_center

where for angle = 0, (1./3)*(2*pi), and (2./3)*(2*pi); and where r is the radius of the circle in which the triangle is inscribed.

edited Jan 20 '12 at 06:08

answered Jan 20 '12 at 05:58

tom10

67,082
10
127
137

So elegant. Wonderful! – AlexKempton Oct 24 '15 at 20:13
2

I used this awesome method to create arrows on canvas - http://stackoverflow.com/a/36805543/1828637 - thanks for it! – Noitidart Apr 23 '16 at 10:27

score 10 · Accepted Answer · edited Jan 21 '12 at 08:26

10

You have to do it with the height of the triangle

var h = side * (Math.sqrt(3)/2);

or

var h = side * Math.cos(Math.PI/6);

So the ratio h:s is equal to:

sqrt( 3 ) / 2 : 1 = cos( π / 6 ) : 1 ≈ 0.866025

See : http://jsfiddle.net/rWSKh/2/

edited Jan 21 '12 at 08:26

auroranil

2,621
6
24
34

answered Jan 20 '12 at 06:18

Diode

24,570
8
40
51

So is the ratio `h : s = Math.sqrt( 3 ) / 2 : 1`? – auroranil Jan 20 '12 at 06:28
ya or `Math.cos(Math.PI/6)` or simply 0.866 – Diode Jan 20 '12 at 06:39
2

When I rotate this triangle, it is no longer centred around the original centre. How do I fix this? – Sep 11 '15 at 08:53
Could someone explain why this is needed, and why the example in the question doesn't work? – ntoonio Dec 25 '17 at 01:46
@user3011902 (I know this account is gone now) I recommend having a look at answer https://stackoverflow.com/a/8937325 and add an alpha term in both cos and sin: `x = r*cos(angle + alpha)` and `y = r*sin(angle + alpha)`. You can then change alpha to any value you want, and it will rotate this triangle whilst maintaining its center. – auroranil Sep 27 '20 at 04:03
@ntoonio An equilateral triangle has same length for all three sides. Let side of this equilateral triangle be s. If you cut in a straight line from one of the vertices of this triangle to the middle of the side opposite to the vertex you cut, then you get two right angled triangles since the bisection line is perpendicular to the opposite side. Each triangle has side lengths s, s/2 and h is height of triangle we want to find. We can use Pythagoras's theorem to find h > 0. h^2 + (s/2)^2 = s^2 implies h = (sqrt(3)/2)*s, which contradicts my example in my question with s = h = 100. – auroranil Sep 27 '20 at 04:04

score 6 · Answer 3 · answered Jul 20 '13 at 20:33

A simple version where X and Y are the points you want to top of the triangle to be:

var height = 100 * (Math.sqrt(3)/2);
context.beginPath();
context.moveTo(X, Y);
context.lineTo(X+50, Y+height);
context.lineTo(X-50, Y+height);
context.lineTo(X, Y);
context.fill();
context.closePath();

This makes an equilateral triange with all sides = 100. Replace 100 with how long you want your side lengths to be.

After you find the midpoint of the canvas, if you want that to be your triangle's midpoint as well you can set X = midpoint's X and Y = midpoint's Y - 50 (for a 100 length triangle).

score 0 · Answer 4 · answered Sep 19 '15 at 09:38

my code for drawing triangle also depending on direction (for lines). code is for Raphael lib.

drawTriangle(x2 - x1, y2 - y1, x2, y2);
function drawTriangle(dx, dy, midX, midY) {
        var diff = 0;
        var cos = 0.866; 
        var sin = 0.500; 

        var length = Math.sqrt(dx * dx + dy * dy) * 0.8; 
        dx = 8 * (dx / length); 
        dy = 8 * (dy / length); 
        var pX1 = (midX + diff) - (dx * cos + dy * -sin); 
        var pY1 = midY - (dx * sin + dy * cos); 
        var pX2 = (midX + diff) - (dx * cos + dy * sin); 
        var pY2 = midY - (dx * -sin + dy * cos); 

        return [
                    "M", midX + diff, midY,
                    "L", pX1, pY1,
                    "L", pX2, pY2,
                    "L", midX + diff, midY
                ].join(","); 
    }

score 0 · Answer 5 · answered Jan 20 '12 at 02:15

0

The side lengths will not be equal given those coordinates.

The horizontal line constructed on the bottom has a length of 100, but the other sides are actually the hypotenuse of a 50x100 triangle ( approx. 112).

answered Jan 20 '12 at 02:15

Jeffrey Sweeney

5,986
5
24
32

score 0 · Answer 6 · answered Jan 20 '12 at 04:22

I can get you started with drawing an equilateral triangle but I don't have the time to get it centered.

jsFiddle

var ax=0;
var ay=0;
var bx=0;
var by=150;

var dx=bx-ax
var dy=by-ay;
var dangle = Math.atan2(dy, dx) - Math.PI / 3;
var sideDist = Math.sqrt(dx * dx + dy * dy);

var cx = Math.cos(dangle) * sideDist + ax;
var cy =  Math.sin(dangle) * sideDist + ay;

var canvas = document.getElementById('equ');
var ctx = canvas.getContext('2d');

ctx.beginPath();  
ctx.moveTo(ax,ay);  
ctx.lineTo(bx,by);  
ctx.lineTo(cx,cy);  

ctx.fill();

Create equilateral triangle in the middle of canvas?

6 Answers6

Linked