# How to draw any regular shape with just one JavaScript function

DevFeed: [How to draw any regular shape with just one JavaScript function](<https://devfeed.tech/articles/how-to-draw-any-regular-shape-with-just-one-javascript-function-4082.md>)

Original publisher: [Read original article](<https://developer.mozilla.org/en-US/blog/javascript-shape-drawing-function/>)

Author: ruth-john

Published: 2023-05-26T00:00:00Z

Content type: tutorial

Language: en

Sources: [MDN Blog](<https://devfeed.tech/sources/mdn-blog.md>)

Topics: [Canvas](<https://devfeed.tech/topics/canvas.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [HTML](<https://devfeed.tech/topics/html.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [canvas](<https://devfeed.tech/tags/canvas.md>), [code](<https://devfeed.tech/tags/code.md>), [cos](<https://devfeed.tech/tags/cos.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [html](<https://devfeed.tech/tags/html.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [measurement](<https://devfeed.tech/tags/measurement.md>), [rotation](<https://devfeed.tech/tags/rotation.md>)

## AI overview

This tutorial explains how to use one JavaScript function to draw regular shapes on an HTML canvas. It begins with a hexagon and generalizes the approach using the center point, radius, number of sides, angles, and trigonometric calculations, allowing triangles, squares, octagons, and repeated shapes to be created by changing parameters.

## Source excerpt

Learn how to use JavaScript to draw any regular shape to a HTML canvas with a single function, and how to modify it to draw multiple shapes.