Author
Graphics in HTML allow developers to create visual content such as shapes, drawings, charts, and animations directly in the browser. HTML supports graphics through two primary methods: Canvas and SVG (Scalable Vector Graphics).
<canvas>)The <canvas> element in HTML is a powerful tool for drawing graphics dynamically using JavaScript. It is pixel-based (raster), which means each drawing is made of pixels, unlike SVG, which is vector-based.
Canvas is widely used for:
Animations and games
Charts and graphs
Interactive visualizations
Image editing tools
Basic Canvas Setup :
<canvas id="myCanvas" width="500" height="300" style="border:1px solid #000;">
Your browser does not support the canvas element.
</canvas>You can draw rectangles, circles, lines, and polygons using JavaScript.
Rectangle Example :
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Filled rectangle
ctx.fillStyle = "#FF5733";
ctx.fillRect(20, 20, 150, 100);
// Stroked rectangle
ctx.strokeStyle = "#3333FF";
ctx.strokeRect(200, 20, 150, 100);
// Clear part of canvas
ctx.clearRect(50, 50, 50, 50);
</script>
fillRect(x, y, width, height) → Draws a filled rectangle.
strokeRect(x, y, width, height) → Draws a rectangle outline.
clearRect(x, y, width, height) → Clears part of the canvas.
Circle Example :
<script>
ctx.beginPath();
ctx.arc(150, 200, 50, 0, 2 * Math.PI); // x, y, radius, startAngle, endAngle
ctx.fillStyle = "green";
ctx.fill();
ctx.strokeStyle = "blue";
ctx.lineWidth = 3;
ctx.stroke();
</script>arc() → Draws circles or arcs.
fill() → Fills the shape with color.
stroke() → Draws the border of the shape.
Line Example :
<script>
ctx.beginPath();
ctx.moveTo(250, 150); // starting point
ctx.lineTo(400, 250); // ending point
ctx.lineTo(250, 250); // another point
ctx.closePath(); // connects back to starting point
ctx.strokeStyle = "purple";
ctx.stroke();
</script>moveTo(x, y) → Starts a new path.
lineTo(x, y) → Draws a line to the specified point.
closePath() → Connects the last point to the first point.
<script>
ctx.font = "24px Arial";
ctx.fillStyle = "orange";
ctx.fillText("Hello Canvas!", 50, 280);
ctx.strokeStyle = "red";
ctx.strokeText("Canvas Text Outline", 200, 280);
</script>fillText(text, x, y) → Draws filled text.
strokeText(text, x, y) → Draws text outline.
Fonts, sizes, and colors can be customized using ctx.font and ctx.fillStyle.
Canvas allows dynamic graphics through JavaScript animation loops using requestAnimationFrame.
Simple Moving Square :
<script>
let x = 0;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // clear previous frame
ctx.fillStyle = "orange";
ctx.fillRect(x, 100, 50, 50); // moving square
x += 3; // move right
if(x > canvas.width) x = 0; // reset
requestAnimationFrame(animate); // repeat
}
animate();
</script>HTML example covering the main Canvas features :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas Demo</title>
<style>
canvas { border:1px solid #000; display:block; margin:20px auto; }
</style>
</head>
<body>
<h1 style="text-align:center;">HTML Canvas Short Demo</h1>
<canvas id="myCanvas" width="500" height="300">
Your browser does not support canvas.
</canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Draw rectangle
ctx.fillStyle = "orange";
ctx.fillRect(20, 20, 100, 60);
// Draw circle
ctx.beginPath();
ctx.arc(300, 50, 40, 0, 2 * Math.PI);
ctx.fillStyle = "green";
ctx.fill();
// Draw text
ctx.font = "20px Arial";
ctx.fillStyle = "blue";
ctx.fillText("Hello Canvas!", 150, 150);
// Simple animation - moving square
let x = 0;
function animate() {
ctx.clearRect(0, 200, canvas.width, 100); // clear animation area
ctx.fillStyle = "red";
ctx.fillRect(x, 200, 50, 50);
x += 3;
if(x > canvas.width) x = 0;
requestAnimationFrame(animate);
}
animate();
// Mouse interaction - draw circle at cursor
canvas.addEventListener('mousemove', e => {
ctx.clearRect(400, 0, 100, 100); // clear previous small circle
ctx.beginPath();
ctx.arc(e.offsetX, e.offsetY, 20, 0, Math.PI * 2);
ctx.fillStyle = "purple";
ctx.fill();
});
</script>
</body>
</html>Output :
