HTML Full Course Day 16 💻 || Canvas Basics in Hindi 🚀 | Mohit Decodes

🎨 HTML Tutorial – Part 16: Canvas Basics

Welcome to Day 16 of the HTML Full Course [Hindi] by Mohit Decodes! Today, we explore the HTML5 Canvas — a powerful element for drawing graphics, animations, and visual effects directly in the browser using JavaScript.

🔹 What is Canvas?

The <canvas> element provides a drawable region in HTML where you can use JavaScript to draw shapes, images, text, and animations dynamically.

⚙️ Basic Canvas Setup

Example:

html
CopyEdit
<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000000;">
Your browser does not support the canvas element.
</canvas>

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

// Draw a blue rectangle
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 150, 100);
</script>

🔹 Key Canvas Concepts:

  1. Context: The drawing surface (usually 2D or WebGL). Use getContext('2d') for 2D graphics.
  2. Shapes: Draw rectangles, circles, lines, paths, and more.
  3. Colors & Styles: Set fill colors, strokes, gradients.
  4. Text: Draw text on canvas.
  5. Animations: Use JavaScript timers to create dynamic animations.

💡 Pro Tips:

  1. Canvas is pixel-based, so it doesn’t affect the DOM elements inside it.
  2. Use canvas for games, visualizations, charts, and interactive graphics.
  3. Combine with CSS and HTML elements for richer UIs.