Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to draw Regular Polygon in TypeScript?
Regular polygons, such as squares, triangles, and hexagons, are fundamental shapes used in various applications and graphics. Drawing regular polygons programmatically can be useful in TypeScript, allowing you to create geometric shapes dynamically. In this tutorial, we will explore how to draw regular polygons in TypeScript by leveraging basic mathematical principles and the HTML5 canvas element.
Syntax
function drawRegularPolygon(ctx: CanvasRenderingContext2D, n: number, x: number, y: number, r: number): void {
const angle = (Math.PI * 2) / n;
ctx.beginPath();
ctx.moveTo(x + r, y);
for (let i = 1; i <= n; i++) {
const vertexX = x + r * Math.cos(i * angle);
const vertexY = y + r * Math.sin(i * angle);
ctx.lineTo(vertexX, vertexY);
}
ctx.closePath();
ctx.stroke();
}
We define the drawRegularPolygon function that takes in a CanvasRenderingContext2D object (ctx), the number of sides (n), the center point (x, y), and the radius (r). We calculate the angle between each vertex by dividing the full circle (2π radians) by the number of sides. Starting from the first vertex, we iterate through the remaining vertices, calculating their coordinates using trigonometric functions (Math.cos and Math.sin). Finally, we connect the vertices using the lineTo method, close the path with closePath, and stroke the polygon's outline with stroke.
Example 1: Drawing a Square
In the first example, we create an HTML canvas element and obtain its 2D rendering context (ctx). Then, we call the drawRegularPolygon function with the rendering context, the number of sides (4 for a square), the center point (150, 150), and the radius (100). The drawRegularPolygon function calculates the coordinates of each vertex and connects them using lines, resulting in a square being drawn on the canvas.
Index.html
<html>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
</body>
<script src="index.ts"></script>
</html>
Index.ts
function drawRegularPolygon(ctx: CanvasRenderingContext2D, n: number, x: number, y: number, r: number): void {
const angle = (Math.PI * 2) / n; // Calculate the angle between each vertex
ctx.beginPath();
ctx.moveTo(x + r, y); // Move the starting point to the first vertex
for (let i = 1; i <= n; i++) {
const vertexX = x + r * Math.cos(i * angle); // Calculate the x-coordinate of the current vertex
const vertexY = y + r * Math.sin(i * angle); // Calculate the y-coordinate of the current vertex
ctx.lineTo(vertexX, vertexY); // Connect the current vertex to the previous vertex
}
ctx.closePath();
ctx.stroke(); // Draw the polygon outline
}
const canvas = document.getElementById('myCanvas') as HTMLCanvasElement;
const ctx = canvas.getContext('2d');
drawRegularPolygon(ctx, 4, 150, 150, 100);
Output
Example 2: Drawing a Hexagon
In the second example, we use the same canvas and rendering context. This time, we call the drawRegularPolygon function with the number of sides set to 6 for a hexagon, the center point at (200, 200), and the radius of 80 pixels.
Index.html
<html>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
</body>
<script src="index.ts"></script>
</html>
Index.ts
function drawRegularPolygon(ctx: CanvasRenderingContext2D, n: number, x: number, y: number, r: number): void {
const angle = (Math.PI * 2) / n; // Calculate the angle between each vertex
ctx.beginPath();
ctx.moveTo(x + r, y); // Move the starting point to the first vertex
for (let i = 1; i <= n; i++) {
const vertexX = x + r * Math.cos(i * angle); // Calculate the x-coordinate of the current vertex
const vertexY = y + r * Math.sin(i * angle); // Calculate the y-coordinate of the current vertex
ctx.lineTo(vertexX, vertexY); // Connect the current vertex to the previous vertex
}
ctx.closePath();
ctx.stroke(); // Draw the polygon outline
}
const canvas = document.getElementById('myCanvas') as HTMLCanvasElement;
const ctx = canvas.getContext('2d');
drawRegularPolygon(ctx, 6, 100, 100, 80);
Output
Example 3: Drawing an Equilateral Triangle
In this example, we specify the number of sides as 3 to create an equilateral triangle. The center point is set at (250, 250), and the radius is set to 120 pixels. The drawRegularPolygon function calculates the coordinates of each vertex and connects them, resulting in a triangle being drawn on the canvas.
Index.html
<html>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
</body>
<script src="index.ts"></script>
</html>
Index.ts
function drawRegularPolygon(ctx: CanvasRenderingContext2D, n: number, x: number, y: number, r: number): void {
const angle = (Math.PI * 2) / n; // Calculate the angle between each vertex
ctx.beginPath();
ctx.moveTo(x + r, y); // Move the starting point to the first vertex
for (let i = 1; i <= n; i++) {
const vertexX = x + r * Math.cos(i * angle); // Calculate the x-coordinate of the current vertex
const vertexY = y + r * Math.sin(i * angle); // Calculate the y-coordinate of the current vertex
ctx.lineTo(vertexX, vertexY); // Connect the current vertex to the previous vertex
}
ctx.closePath();
ctx.stroke(); // Draw the polygon outline
}
const canvas = document.getElementById('myCanvas') as HTMLCanvasElement;
const ctx = canvas.getContext('2d');
drawRegularPolygon(ctx, 3, 200, 120, 120);
Output
Example 4: Drawing a Pentagon
In this example, we specify the number of sides as 5 to create a regular pentagon. The center point is set at (300, 300), and the radius is set to 100 pixels.
Index.html
<html>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
</body>
<script src="index.ts"></script>
</html>
Index.ts
function drawRegularPolygon(ctx: CanvasRenderingContext2D, n: number, x: number, y: number, r: number): void {
const angle = (Math.PI * 2) / n; // Calculate the angle between each vertex
ctx.beginPath();
ctx.moveTo(x + r, y); // Move the starting point to the first vertex
for (let i = 1; i <= n; i++) {
const vertexX = x + r * Math.cos(i * angle); // Calculate the x-coordinate of the current vertex
const vertexY = y + r * Math.sin(i * angle); // Calculate the y-coordinate of the current vertex
ctx.lineTo(vertexX, vertexY); // Connect the current vertex to the previous vertex
}
ctx.closePath();
ctx.stroke(); // Draw the polygon outline
}
const canvas = document.getElementById('myCanvas') as HTMLCanvasElement;
const ctx = canvas.getContext('2d');
drawRegularPolygon(ctx, 5, 150, 150, 100);
Output
Example 5: Drawing an Octagon
In this example, we specify the number of sides as 8 to create an octagon. The center point is set at (400, 400), and the radius is set to 80 pixels. The drawRegularPolygon function calculates the coordinates of each vertex and connects them, resulting in an octagon being drawn on the canvas.
Index.html
<html>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
</body>
<script src="index.ts"></script>
</html>
Index.ts
function drawRegularPolygon(ctx: CanvasRenderingContext2D, n: number, x: number, y: number, r: number): void {
const angle = (Math.PI * 2) / n; // Calculate the angle between each vertex
ctx.beginPath();
ctx.moveTo(x + r, y); // Move the starting point to the first vertex
for (let i = 1; i <= n; i++) {
const vertexX = x + r * Math.cos(i * angle); // Calculate the x-coordinate of the current vertex
const vertexY = y + r * Math.sin(i * angle); // Calculate the y-coordinate of the current vertex
ctx.lineTo(vertexX, vertexY); // Connect the current vertex to the previous vertex
}
ctx.closePath();
ctx.stroke(); // Draw the polygon outline
}
const canvas = document.getElementById('myCanvas') as HTMLCanvasElement;
const ctx = canvas.getContext('2d');
drawRegularPolygon(ctx, 8, 100, 100, 80);
Output
Conclusion
Drawing regular polygons programmatically in TypeScript can be achieved by calculating the coordinates of their vertices and connecting them using lines or paths. In this tutorial, we covered the fundamental concept of drawing regular polygons and provided clear examples using TypeScript. You can now apply this knowledge to create various regular polygons with different numbers of sides and dimensions.
145 Views
