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?

Answer 1

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.

Answer 2

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/