Canvas & SVG Graphics

<canvas> is a blank bitmap drawing area. JavaScript draws lines, shapes, and charts on it with getContext("2d").

HTML Canvas — simple drawing

<canvas> is a blank bitmap drawing area. JavaScript draws lines, shapes, and charts on it with getContext("2d").

Canvas is good for games, charts, and dynamic art. It is not SEO-friendly for static images — use <img> or SVG for logos.

Real-life example: Canvas is like a whiteboard — empty until you draw with a marker (JavaScript).

Canvas rectangle

<canvas id="board" width="300" height="150"></canvas>
<script>
  const ctx = document.getElementById("board").getContext("2d");
  ctx.fillStyle = "#2563eb";
  ctx.fillRect(20, 20, 120, 60);
  ctx.fillStyle = "#ffffff";
  ctx.font = "16px sans-serif";
  ctx.fillText("Rishtaara", 35, 55);
</script>

HTML SVG — simple shape

SVG (Scalable Vector Graphics) uses XML tags like <circle>, <rect>, <line> inside <svg>. It scales without blur.

SVG is great for icons, logos, and simple diagrams. You can style with CSS.

Real-life example: SVG is like a plastic stencil — stretch it big or small, edges stay sharp.

Tip: Use SVG for icons and logos. Use canvas when pixels change every frame (games, live charts).

SVG shapes

<svg width="200" height="120" viewBox="0 0 200 120">
  <rect x="10" y="10" width="80" height="50" fill="#22c55e" />
  <circle cx="150" cy="60" r="40" fill="#2563eb" />
  <line x1="10" y1="100" x2="190" y2="100" stroke="#333" stroke-width="2" />
</svg>