Introduction
The HTML <canvas> element is used to draw graphics on a web page using JavaScript. It provides a drawable region in HTML, defined with the <canvas> tag, which can be manipulated through a scripting language like JavaScript to create various types of graphics, including shapes, text, images, and animations.
Creating a Canvas
Basic Canvas Setup
To create a canvas in HTML, use the <canvas> element and specify its id, width, and height attributes.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Example</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
</body>
</html>
Drawing on the Canvas
Getting the Canvas Context
To draw on the canvas, you need to access its rendering context. The getContext("2d") method returns an object that provides methods and properties for drawing on the canvas.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Example</title>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
};
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
</body>
</html>
Drawing Shapes
Rectangles
You can draw rectangles using the fillRect(), strokeRect(), and clearRect() methods.
fillRect(x, y, width, height): Draws a filled rectangle.strokeRect(x, y, width, height): Draws a rectangular outline.clearRect(x, y, width, height): Clears the specified rectangular area, making it fully transparent.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Rectangles</title>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(50, 50, 100, 100);
ctx.strokeStyle = "#00FF00";
ctx.strokeRect(200, 50, 100, 100);
ctx.clearRect(75, 75, 50, 50);
};
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
</body>
</html>
Paths and Lines
You can draw custom shapes and lines using the beginPath(), moveTo(), lineTo(), and stroke() methods.
beginPath(): Starts a new path.moveTo(x, y): Moves the path to the specified point.lineTo(x, y): Adds a new point and creates a line to that point from the last specified point.stroke(): Draws the path with the current stroke style.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Paths and Lines</title>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.lineTo(125, 200);
ctx.closePath();
ctx.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
</body>
</html>
Drawing Circles and Arcs
You can draw circles and arcs using the arc() method.
arc(x, y, radius, startAngle, endAngle, anticlockwise): Draws an arc/curve.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Circles and Arcs</title>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(150, 150, 100, 0, 2 * Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.arc(150, 150, 50, 0, Math.PI);
ctx.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
</body>
</html>
Drawing Text
You can draw text using the fillText() and strokeText() methods.
fillText(text, x, y): Draws filled text at the specified coordinates.strokeText(text, x, y): Draws text outline at the specified coordinates.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Text</title>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello Canvas", 50, 50);
ctx.strokeText("Hello Canvas", 50, 100);
};
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
</body>
</html>
Working with Images
You can draw images using the drawImage() method.
drawImage(image, dx, dy): Draws the image at the specified coordinates.drawImage(image, dx, dy, dWidth, dHeight): Draws the image at the specified coordinates, scaling it to fit the specified dimensions.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight): Draws a part of the image (defined by the source rectangle) at the specified coordinates, scaling it to fit the specified dimensions.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Images</title>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 50, 50);
};
img.src = "https://via.placeholder.com/150";
};
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
</body>
</html>
Example: Combining Different Drawing Methods
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Combined Example</title>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// Draw filled rectangle
ctx.fillStyle = "#FF0000";
ctx.fillRect(50, 50, 100, 100);
// Draw rectangle outline
ctx.strokeStyle = "#00FF00";
ctx.strokeRect(200, 50, 100, 100);
// Draw a line
ctx.beginPath();
ctx.moveTo(50, 200);
ctx.lineTo(250, 200);
ctx.stroke();
// Draw a circle
ctx.beginPath();
ctx.arc(150, 300, 50, 0, 2 * Math.PI);
ctx.stroke();
// Draw text
ctx.font = "20px Arial";
ctx.fillText("Canvas Graphics", 50, 400);
// Draw an image
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 300, 300, 100, 100);
};
img.src = "https://via.placeholder.com/100";
};
</script>
</head>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;"></canvas>
</body>
</html>
Conclusion
The HTML <canvas> element is used for creating graphics and animations on a web page. By accessing the canvas’s 2D context, you can draw shapes, lines, text, and images, and create dynamic and
interactive graphics using JavaScript. Understanding the basic methods and properties of the canvas context is essential for developing rich graphical web applications.