HTML Graphics — Canvas & SVG

Canvas

<canvas> is a blank drawing surface — HTML alone can't draw on it, you need JavaScript to actually paint pixels, shapes, or animations onto it.

<canvas id="myCanvas" width="300" height="150"></canvas>

<script>
  const ctx = document.getElementById('myCanvas').getContext('2d');
  ctx.fillStyle = '#C41230';
  ctx.fillRect(10, 10, 100, 60);
</script>

Common uses: charts, game graphics, image editing tools, signature pads. It's redrawn pixel-by-pixel, so it's fast for animation but not "aware" of individual shapes once drawn.

SVG

SVG (Scalable Vector Graphics) is the opposite approach — shapes are defined as actual HTML-like elements, described mathematically, so they stay crisp at any zoom level.

<svg width="200" height="100">
  <circle cx="50" cy="50" r="40" fill="#F5A623"></circle>
  <rect x="100" y="10" width="80" height="80" fill="#C41230"></rect>
</svg>

Canvas vs SVG:

SVG shapes remain individual elements — you can style/animate them with CSS, and click on them like any HTML element
Canvas is just pixels — great for thousands of moving objects (games), but you can't "select" a shape after drawing it
SVG scales perfectly for logos/icons; Canvas is better for complex, frequently-changing visuals

← HTML Forms — Complete Guide 🎓 Get Certificate →