How to draw any regular shape with just one JavaScript function
O que a fonte oficial informa
How to draw any regular shape with just one JavaScript function
Check out the video course from Scrimba, our partner
Ok alright, I know I used a clickbait title, but bear with me. I want to share a function I've been using for ages. I originally wrote it to draw a hexagon – hexagons are cool, lots of hexagons are better, and
hexagons are the best. So I wrote a function to draw one, which I could then repeat.
As I was doing so, I started modifying the hexagon to enable drawing a number of shapes that are based on just a couple of parameters. Let's begin with what I did with the hexagon and we'll take it from there.
Detalhes publicados
Hexagons have six equal sides. If we imagine our starting point as the center of the hexagon, we can move around this point six times, joining each point as we go to make the sides.
. We'll fix the size of the canvas to 400 x 200 pixels for this example and set the center point as
Now we need to figure out the x (horizontal) and y (vertical) position of points around the center, which when joined with a line, will make six equal sides. For this, we use the measurement from the center to the point (we'll call this the radius) and the angle of direction from the center.
As there are 360 degrees in a full rotation and six points we want to create, we can divide 360/6 and know we'll make a point every 60 degrees. However, there's a tiny caveat to this – JavaScript works with
. One thing I always remember is that the value
Contexto para o leitor
Next we need to add a bit of trigonometry to find the x and y position of each point. For the x position, we can use the sum
Let's put it all together, adding to our JavaScript code above:
Let's say we wanted to draw a triangle, a square, or an octagon. All we would need to modify in the above function, used to draw the hexagon, is the number of times we draw lines in our
Let's turn this into a function that takes the center point, the radius, and number of sides as parameters:
Now we can draw different shapes by adjusting the
element for drawing on a web page and a few of the methods you can use to draw shapes. If you want to dive deeper into how all the pieces work, here's a recap of what we used:
, the element on which we can display graphics
To calculate the position of each point, we used a little bit of maths and trigonometry:
to calculate the angle of rotation in radians
To get some more inspiration for what you can do with the
that starts off with the basics and then covers more advanced topics like animation and pixel manipulation.
There are plenty of ways you can expand on this basic shape function. I like to include an inner radius, so you can create diamonds and stars. I've also experimented a little with
instead of straight lines – feel free to experiment for yourself. Or try some tessellation, which is always fun!
Let me know if you try out this function and if you like it as much as I do. As always, feel free to leave any feedback on the
New reference pages on MDN for JavaScript regular expressions
MDN doc updates: CSS selectors & media queries, WebGPU & WebTransport APIs, Progressive web apps
Portions of this content are ©1998–2026 by individual mozilla.org contributors. Content available under
A documentação original também é o ponto de partida para conferir os exemplos e adaptar a técnica ao próprio projeto.
