6. Multimedia & Canvas

Level: IntermediateDuration: 25m

Embedding Images

Images are a core part of web pages. The <img> tag allows you to display pictures. Always include the alt attribute for accessibility.

html

<img src="profile.jpg" alt="Person smiling" width="300">
<img src="logo.png" alt="Website logo" height="100">

Adding Video and Audio

HTML5 makes embedding multimedia easy. Use <video> for videos and <audio> for sound. Include controls so users can play, pause, or adjust volume.

html

<video src="intro.mp4" controls width="400"></video>
<audio src="music.mp3" controls></audio>

💡 Tip: Provide multiple formats (MP4, WebM for video; MP3, OGG for audio) to ensure all browsers can play your media.

The Canvas Element

The <canvas> element lets you draw graphics and animations using JavaScript. Think of it as a blank area where you can paint shapes, lines, or even small games.

html

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #000000;"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'lime';
  ctx.fillRect(50, 30, 100, 50);
  ctx.strokeRect(50, 30, 100, 50);
</script>

You can draw rectangles, circles, lines, and text. Canvas is also used for interactive graphics, charts, and games.

Mini Project Step 6: Interactive Multimedia Profile

Enhance your semantic profile page from Lesson 5 by adding images, video, audio, and a simple canvas graphic.

Add a profile photo using <img> with alt text.
Embed a short video introduction using <video> with controls.
Include an audio clip, like background music or a short voice message.
Create a <canvas> element that draws a rectangle or circle representing your favorite color or hobby.
Test all media elements to ensure they load correctly and are accessible.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Interactive Profile</title>
</head>
<body>
  <header>
    <h1>My Multimedia Profile</h1>
  </header>
  <main>
    <section>
      <h2>About Me</h2>
      <p>Hello! Check out my profile with images, video, and audio.</p>
      <figure>
        <img src="profile.jpg" alt="Person smiling" width="200">
        <figcaption>Me at my desk</figcaption>
      </figure>
      <video src="intro.mp4" controls width="320"></video>
      <audio src="music.mp3" controls></audio>
      <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>
      <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');
        ctx.fillStyle = 'lightblue';
        ctx.fillRect(10, 10, 100, 50);
      </script>
    </section>
  </main>
  <footer>
    &copy; 2025 Your name
  </footer>
</body>
</html>

💡 Bonus Challenge: Try adding shapes and text dynamically on canvas using mouse events or simple animations.

MDN: HTML Canvas

Page

Embedding Images

Adding Video and Audio

The Canvas Element

Mini Project Step 6: Interactive Multimedia Profile