Rotate the triangle around its center using JavaScript

Question

It's late on Friday, and I scratch my head on it.

I am trying to draw an equilateral triangle and rotate it around the center, but for some reason I am unable to determine its center point.

Here's the JSFiddle , where you can see how I translate to the center of the canvas and then draw a triangle from it using the equation:

var width = 30; var height = width * (Math.sqrt(3)/2); 

To determine the width / height ratio.

What am I missing here? Any thoughts would be most appreciated.

Answer 1

You revolve around (0, 0), which in this case is not the center of your triangle.

A triangle with vertices (0, -h / 2), (w / 2, h / 2), (-w / 2, h / 2) has a center, the middle of these three positions. Obviously, (1/3) (- h / 2) + (2/3) (h / 2) = h / 6. So, the actual y-coordinate of the center of your triangle.

One solution might be to move your triangle to (0, (-2/3) * h), (w / 2, h / 3), (-w / 2, h / 3).