Canvas & SVG

This chapter explains the <canvas> and <svg> elements in HTML, used for creating graphics on webpages. Learn how to draw shapes, paths, and text, and understand the differences between raster-based Canvas and vector-based SVG with clear examples and colorful previews.

What are Canvas and SVG?

Canvas is a raster-based (pixel-based) element where graphics are drawn using JavaScript. It’s great for dynamic content like games or charts but may pixelate when scaled. SVG (Scalable Vector Graphics) is vector-based, defined in XML, and ideal for scalable graphics like logos or icons. Both work within <div> or semantic elements and can be styled with CSS.

HTML Canvas

The <canvas> element creates a drawing area where JavaScript renders graphics via the Canvas API. You must set its width and height attributes and use getContext('2d') to access the drawing context.

Basic Canvas Setup

Draw a simple rectangle on a <canvas>.

<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'blue';
  ctx.fillRect(20, 20, 100, 50);
</script>
  

Drawing Shapes with Canvas

Use methods like fillRect(), strokeRect(), and arc() to draw rectangles, outlines, and circles.

<canvas id="shapesCanvas" width="300" height="200"></canvas>
<script>
  const canvas = document.getElementById('shapesCanvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'green';
  ctx.fillRect(20, 20, 80, 60);
  ctx.strokeStyle = 'red';
  ctx.strokeRect(120, 20, 80, 60);
  ctx.beginPath();
  ctx.arc(200, 120, 40, 0, 2 * Math.PI);
  ctx.fillStyle = 'purple';
  ctx.fill();
</script>
  

Preview:

Drawing Text with Canvas

Render text using fillText() or strokeText().

<canvas id="textCanvas" width="300" height="100"></canvas>
<script>
  const canvas = document.getElementById('textCanvas');
  const ctx = canvas.getContext('2d');
  ctx.font = '20px Arial';
  ctx.fillStyle = 'black';
  ctx.fillText('Hello Canvas!', 50, 50);
</script>
  

---

HTML SVG

The <svg> element defines vector graphics using XML. It’s scalable, resolution-independent, and ideal for logos, icons, or diagrams. SVG elements like <rect>, <circle>, and <path> are used to create shapes.

Basic SVG Setup

Create a simple SVG rectangle.

<svg width="300" height="150">
  <rect x="20" y="20" width="100" height="50" fill="blue" />
</svg>
  

Preview:

Drawing Shapes with SVG

Use <rect>, <circle>, and <path> to draw various shapes.

<svg width="300" height="200">
  <rect x="20" y="20" width="80" height="60" fill="green" stroke="red" stroke-width="2" />
  <circle cx="200" cy="120" r="40" fill="purple" />
  <path d="M20 120 L100 160 L60 180 Z" fill="orange" />
</svg>
  

Preview:

Drawing Text with SVG

Use <text> to add text to an SVG.

<svg width="300" height="100">
  <text x="50" y="50" font-family="Arial" font-size="20" fill="black">Hello SVG!</text>
</svg>
  

Preview:

Canvas vs. SVG

Canvas is raster-based, requiring JavaScript for all drawing, making it suitable for animations or games but less scalable. SVG is vector-based, defined in XML, scalable, and easier to edit with CSS or JavaScript. Use Canvas for complex, dynamic graphics and SVG for static, scalable designs.

<div>
  <canvas id="vsCanvas" width="150" height="100"></canvas>
  <svg width="150" height="100">
    <rect x="20" y="20" width="80" height="60" fill="teal" />
  </svg>
</div>
<script>
  const canvas = document.getElementById('vsCanvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'teal';
  ctx.fillRect(20, 20, 80, 60);
</script>
  

Preview:

Best Practices for Canvas & SVG

• Always set width and height attributes for <canvas> to avoid scaling issues.
• Use <svg> for graphics that need to scale across devices.
• Add fallback content inside <canvas> for browsers that don’t support it.
• Optimize JavaScript in Canvas to improve performance for animations.
• Use CSS to style SVG elements for consistency.

Common Mistakes to Avoid

• Not setting width and height on <canvas>, causing distorted graphics.
• Using Canvas for simple, scalable graphics better suited for SVG.
• Ignoring accessibility by not providing fallback content for <canvas>.

Try It Yourself

Create a layout with both <canvas> and <svg> to draw a shape and text.

<section>
  <canvas id="tryCanvas" width="150" height="100"></canvas>
  <svg width="150" height="100">
    <circle cx="75" cy="50" r="40" fill="orange" />
    <text x="30" y="60" font-family="Arial" font-size="16" fill="white">SVG</text>
  </svg>
</section>
<script>
  const canvas = document.getElementById('tryCanvas');
  const ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.arc(75, 50, 40, 0, 2 * Math.PI);
  ctx.fillStyle = 'orange';
  ctx.fill();
  ctx.font = '16px Arial';
  ctx.fillStyle = 'white';
  ctx.textAlign = 'center';
  ctx.fillText('Canvas', 75, 55);
</script>
  

Preview:

Understanding <canvas> and <svg> empowers you to create dynamic or scalable graphics. Practice combining them with JavaScript and CSS to build engaging web visuals!