🖌️ Introduction to the HTML Canvas API

The <canvas> element and its API allow you to draw graphics, animations, and visual effects dynamically using JavaScript. It provides a powerful way to create 2D shapes, images, charts, games, and more — all rendered directly in the browser. 🖼️

📌 What is the Canvas Element?

The HTML <canvas> tag defines a rectangular area on a webpage where you can draw graphics using JavaScript. It acts like a digital drawing board.

<canvas id="myCanvas" width="400" height="200"></canvas>

⚙️ Accessing the Canvas Context

To draw on the canvas, you first get its 2D rendering context in JavaScript:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

🖌️ Drawing Basic Shapes

Here are some simple examples to get you started:

// Draw a filled rectangle
ctx.fillStyle = 'skyblue';
ctx.fillRect(50, 50, 150, 100);

// Draw a circle
ctx.beginPath();
ctx.arc(150, 125, 50, 0, Math.PI * 2);
ctx.fillStyle = 'tomato';
ctx.fill();
ctx.closePath();

🖋️ Drawing Lines and Paths

ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(200, 100);
ctx.strokeStyle = 'green';
ctx.lineWidth = 4;
ctx.stroke();
ctx.closePath();

🖼️ Working with Images

You can also draw images on the canvas:

const img = new Image();
img.src = 'path/to/image.png';
img.onload = () => {
  ctx.drawImage(img, 0, 0, 300, 150);
};

🎞️ Creating Animations

Use JavaScript functions like requestAnimationFrame() to create smooth animations on canvas.

let x = 0;
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear canvas
  ctx.fillStyle = 'blue';
  ctx.fillRect(x, 50, 50, 50); // Draw moving square
  x += 2;
  if (x > canvas.width) x = -50;
  requestAnimationFrame(animate);
}
animate();

🧠 Tips & Best Practices

🔗 Useful Resources