HTML Media

SVG and Canvas

SVG: vector graphics

SVG draws shapes with code. It stays perfectly sharp at any size, which is why it is used for logos and icons.

<svg width="120" height="120" viewBox="0 0 120 120">
  <circle cx="60" cy="60" r="50" fill="#1c6fa8" />
  <text x="60" y="68" text-anchor="middle" fill="white" font-size="24">Hi</text>
</svg>

Canvas: drawing with JavaScript

<canvas> is a blank drawing area. You paint on it with JavaScript, pixel by pixel. It powers browser games and charts.

<canvas id="board" width="300" height="150"></canvas>
<script>
  const ctx = document.getElementById("board").getContext("2d");
  ctx.fillStyle = "orange";
  ctx.fillRect(20, 20, 120, 80);
</script>