🎨 HTML Canvas Tutorial

The <canvas> element is a drawable region where you can render graphics with JavaScript — shapes, text, images, animations, even games!

🟥 Drawing a Rectangle

✏️ fillRect(x, y, width, height) draws a solid rectangle.

⭕ Drawing a Circle

🌀 arc(x, y, radius, startAngle, endAngle) is how you draw circles.

🖌️ Drawing Lines

✍️ Use moveTo(x, y) to set starting point, then lineTo(x, y) to draw.

🧑‍🎨 Canvas Tips

Always get the context with getContext('2d').
Use beginPath() before drawing new shapes to reset path.
fillStyle and strokeStyle change color fills and strokes.
Canvas is pixel-based, use CSS to scale responsively.
Animations are possible using requestAnimationFrame().