<!
DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-
scale=1.0”>
<title>HTML5 Canvas Example</title>
<style>
Body { font-family: Arial, sans-serif; margin: 20px; }
Canvas { border: 1px solid #000; display: block; margin-bottom:
20px; }
</style>
</head>
<body>
<h1>HTML5 Canvas Example</h1>
<canvas id=”myCanvas” width=”600” height=”400”></canvas>
<button onclick=”drawRectangles()”>Draw Rectangles</button>
<button onclick=”drawCircles()”>Draw Circles</button>
<button onclick=”drawText()”>Draw Text</button>
<button onclick=”drawImage()”>Draw Image</button>
<button onclick=”clearCanvas()”>Clear Canvas</button>
<script>
Const canvas = document.getElementById(‘myCanvas’);
Const ctx = canvas.getContext(‘2d’);
// Draw Rectangles
Function drawRectangles() {
Ctx.fillStyle = ‘#FF0000’;
Ctx.fillRect(20, 20, 100, 50);
Ctx.strokeStyle = ‘#0000FF’;
Ctx.lineWidth = 5;
Ctx.strokeRect(150, 20, 100, 50);
Ctx.clearRect(180, 30, 40, 20);
// Draw Circles
Function drawCircles() {
Ctx.beginPath();
Ctx.arc(100, 150, 40, 0, Math.PI * 2, false);
Ctx.fillStyle = ‘green’;
Ctx.fill();
Ctx.beginPath();
Ctx.arc(250, 150, 40, 0, Math.PI * 2, false);
Ctx.strokeStyle = ‘purple’;
Ctx.lineWidth = 5;
Ctx.stroke();
// Draw Text
Function drawText() {
Ctx.font = ‘30px Arial’;
Ctx.fillStyle = ‘black’;
Ctx.fillText(‘Hello, Canvas!’, 20, 250);
Ctx.strokeStyle = ‘red’;
Ctx.lineWidth = 2;
Ctx.strokeText(‘Hello, Canvas!’, 20, 300);
// Draw Image
Function drawImage() {
Const img = new Image();
Img.onload = function() {
Ctx.drawImage(img, 350, 20, 200, 150);
Img.src = ‘https://via.placeholder.com/200’; // Replace with your
image URL
// Clear Canvas
Function clearCanvas() {
Ctx.clearRect(0, 0, canvas.width, canvas.height);
</script>
</body>
</html>
