Graphics in HTML
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 (<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>Drawing Shapes on 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.
Drawing Text on Canvas
<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.fontandctx.fillStyle.
Animations on Canvas
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 :
