CODEWITHSUNDEEP
javascripthtmlmathgeometryhtml5-canvas
auroranil
auroranil

Reputation: 2661

Create equilateral triangle in the middle of canvas?

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?

Upvotes: 6

Views: 27990

Answers (6)

sirjay
sirjay

Reputation: 1766

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(","); 
    }

Upvotes: 0

Instinct
Instinct

Reputation: 359

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).

Upvotes: 6

Diode
Diode

Reputation: 25135

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/

Upvotes: 10

tom10
tom10

Reputation: 69182

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.

Upvotes: 11

j08691
j08691

Reputation: 207891

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();

Upvotes: 0

Jeffrey Sweeney
Jeffrey Sweeney

Reputation: 6114

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).

Upvotes: 0

Related Questions