Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to draw a star by using canvas HTML5?
Drawing on the HTML canvas is done with JavaScript. The canvas element provides a drawable region controlled by scripting APIs. To draw a star in HTML5, we use the <canvas> element combined with JavaScript's Canvas API methods like moveTo(), lineTo(), and fill().
The canvas drawing process requires getting the canvas element using getElementById() and obtaining the 2D rendering context with getContext('2d'). Once we have the context, we can draw shapes by defining paths and filling or stroking them.
Syntax
Following is the basic syntax for creating a canvas and drawing on it −
<canvas id="canvasId" width="width" height="height"></canvas>
Following is the JavaScript syntax for drawing paths on canvas −
var canvas = document.getElementById('canvasId');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x, y);
ctx.closePath();
ctx.fill();
Canvas Methods for Drawing Stars
Following are the key Canvas API methods used for drawing a star −
beginPath() − Starts a new path by resetting the current path.
moveTo(x, y) − Moves the pen to the specified coordinates without drawing.
lineTo(x, y) − Draws a straight line from the current position to the specified coordinates.
closePath() − Closes the current path by drawing a line back to the starting point.
fill() − Fills the current path with the specified fill style.
stroke() − Draws the outline of the current path.
Drawing a Basic Star
Example
Following example demonstrates how to draw a filled blue star using canvas −
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Star</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Drawing a Star with HTML5 Canvas</h2>
<canvas id="starCanvas" width="300" height="250" style="border: 1px solid #ccc;"></canvas>
<script>
var canvas = document.getElementById('starCanvas');
var ctx = canvas.getContext('2d');
// Set fill color
ctx.fillStyle = "blue";
// Begin drawing the star
ctx.beginPath();
ctx.moveTo(150, 20); // Top point
ctx.lineTo(180, 90); // Right upper
ctx.lineTo(250, 90); // Right outer
ctx.lineTo(195, 140); // Right lower
ctx.lineTo(210, 210); // Bottom right
ctx.lineTo(150, 170); // Bottom center
ctx.lineTo(90, 210); // Bottom left
ctx.lineTo(105, 140); // Left lower
ctx.lineTo(50, 90); // Left outer
ctx.lineTo(120, 90); // Left upper
ctx.closePath();
ctx.fill();
</script>
</body>
</html>
The output displays a blue filled star centered on the canvas −
[A blue five-pointed star drawn on a canvas with light gray border]
Drawing a Star with Stroke
Example
Following example shows how to draw a star outline instead of a filled shape −
<!DOCTYPE html>
<html>
<head>
<title>Star Outline Canvas</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Star Outline with Canvas</h2>
<canvas id="outlineCanvas" width="300" height="250" style="border: 1px solid #ccc;"></canvas>
<script>
var canvas = document.getElementById('outlineCanvas');
var ctx = canvas.getContext('2d');
// Set stroke properties
ctx.strokeStyle = "red";
ctx.lineWidth = 3;
// Draw star outline
ctx.beginPath();
ctx.moveTo(150, 20);
ctx.lineTo(180, 90);
ctx.lineTo(250, 90);
ctx.lineTo(195, 140);
ctx.lineTo(210, 210);
ctx.lineTo(150, 170);
ctx.lineTo(90, 210);
ctx.lineTo(105, 140);
ctx.lineTo(50, 90);
ctx.lineTo(120, 90);
ctx.closePath();
ctx.stroke();
</script>
</body>
</html>
The output displays a red star outline with 3px line width −
[A red outlined five-pointed star drawn on a canvas with light gray border]
Mathematical Approach for Drawing Stars
For more precise star drawing, we can calculate star points using trigonometry. This method allows us to create stars with different numbers of points and varying inner/outer radii.
Example − Parametric Star Function
<!DOCTYPE html>
<html>
<head>
<title>Mathematical Star Drawing</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Mathematical Star with 6 Points</h2>
<canvas id="mathCanvas" width="300" height="250" style="border: 1px solid #ccc;"></canvas>
<script>
var canvas = document.getElementById('mathCanvas');
var ctx = canvas.getContext('2d');
function drawStar(cx, cy, outerRadius, innerRadius, points) {
var angle = Math.PI / points;
ctx.beginPath();
for (var i = 0; i < 2 * points; i++) {
var radius = (i % 2 === 0) ? outerRadius : innerRadius;
var x = cx + radius * Math.cos(i * angle - Math.PI / 2);
var y = cy + radius * Math.sin(i * angle - Math.PI / 2);
if (i === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
}
ctx.closePath();
}
ctx.fillStyle = "gold";
drawStar(150, 125, 80, 40, 6);
ctx.fill();
</script>
</body>
</html>
This creates a 6-pointed gold star using mathematical calculations for precise point positioning −
[A gold six-pointed star drawn on a canvas using mathematical calculations]
Key Points
Always call
beginPath()before starting a new shape to avoid connecting to previous paths.Use
moveTo()to position the drawing cursor without drawing a line.The
closePath()method automatically connects the last point back to the first point.Set
fillStyleorstrokeStylebefore callingfill()orstroke().Canvas coordinates start from (0,0) at the top-left corner.
Conclusion
Drawing a star with HTML5 canvas involves creating a path using moveTo() and lineTo() methods to connect the star's points, then filling or stroking the path. The mathematical approach provides more flexibility for creating stars with different numbers of points and precise positioning.
10K+ Views
