We are going to use a path that allows to set the coordinates before drawing them and when finished we use stroke() to draw only the border line. In order to draw a regular hexagon we define a function named drawHexagon(x,y) being x and y the center point.

Notice the angles are needed to be expressed in radians (360º = 2π rad) const a = 2 * Math.PI / 6 In an index.html file we set the minimum required fields for a HTML canvas: Īnd a main.js file: const canvas = document.getElementById('canvas') Īs far as we know, we are going to set up the angle and the size of the hexagon as constants. These are the resulting vertexes:Īs this point we can start a new project to put in practice all we have seen. Notice that the most-right and most-left vertex coincide with what we have expected due to sin0º = 0, cos0º = 1, cos180º = -1 and sin0º = 0. Then the rest comes as a multiple of 60º as 120º, 180º, 240º, 300º and 360º which is equal to 0º again. In summary, putting all together the second vertex coordinates are ( rcos60º, rsin60º). Renowned panelists address relevant issues and topics surrounding the sector of today and tomorrow. From the first equation we can say that a = c sinα and b = c cosα. The Intelligent Mining Summit at HxGN LIVE Global 2023 brings together the industry’s decision makers, experts, and specialists from around the world. For this case, the angle formed by each vertex with the horizontal axis is equal by dividing the circumference by the number of sides (360º / 6 = 60º) and we also know that the hypotenuse is equal to the radius of the circumference r. It is very useful to know any side of the triangle if you know one of its other sides and the angle it forms.

Perfect hexagon