Web Graphics and Multimedia

The <canvas> element provides a blank drawing area in which you can render 2D graphics using JavaScript. This element does not have any drawing capabilities on its own but serves as a container for graphics drawn via a script.

Basic Usage of <canvas>:

<canvas id="myCanvas" width="300" height="300" style="border:1px solid #000;"></canvas>

<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  // Drawing a blue rectangle
  context.fillStyle = 'blue';
  context.fillRect(50, 50, 200, 150);
</script>

Explanation:

• <canvas>: Defines the canvas area with specified width and height.
• JavaScript: Uses the getContext('2d') method to get the drawing context, allowing you to use various drawing methods.
• fillRect(x, y, width, height): Draws a rectangle on the canvas.

More Drawing Methods:

• Drawing Circles: Use arc() to create circles or arcs.
• Drawing Text: Use fillText() or strokeText() to render text.
• Drawing Lines: Use moveTo() and lineTo() in combination with stroke().

<canvas id="Canvas01" width="300" height="150"></canvas>
<script>
  var canvas = document.getElementById('Canvas01');
  var ctx = canvas.getContext('2d');

  // Draw a rectangle
  ctx.fillStyle = 'blue';
  ctx.fillRect(10, 10, 100, 50);

  // Draw a circle
  ctx.beginPath();
  ctx.arc(200, 75, 50, 0, 2 * Math.PI);
  ctx.fillStyle = 'green';
  ctx.fill();

  // Draw a line
  ctx.moveTo(0, 0);
  ctx.lineTo(300, 150);
  ctx.stroke();

  //drawing text
  ctx.font = '30px Arial';
  ctx.fillText('Hello, World!', 10, 50);
  ctx.strokeText('Stroke Text', 10, 100);
</script>

The <canvas> element is a powerful tool for creating dynamic, interactive graphics such as charts, games, and visualizations.

SVG (Scalable Vector Graphics) is an XML-based format for defining vector graphics. Unlike raster images (e.g., PNG, JPEG), SVG graphics are resolution-independent, making them perfect for responsive designs.

Basic Usage of <svg>:

<svg width="200" height="200">
  <circle cx="100" cy="100" r="80" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Explanation:

• <svg>: Container for SVG graphics, specifying its width and height.
• <circle>: Draws a circle with the following attributes:
  • cx, cy: The center coordinates of the circle.
  • r: The radius of the circle.
  • stroke: The color of the circle’s outline.
  • fill: The fill color of the circle.

More SVG Elements:

• <rect>: Draws rectangles.
• <line>: Creates lines.
• <polygon>: Defines a closed shape with multiple points.
• <text>: Adds text within the SVG.

Example: Creating a Simple SVG Graphic

<svg width="300" height="200">
  <!-- Draw a rectangle -->
  <rect x="50" y="20" width="200" height="100" fill="blue" stroke="black" stroke-width="3" />

  <!-- Draw a line -->
  <line x1="50" y1="150" x2="250" y2="150" stroke="green" stroke-width="2" />

  <!-- Draw text -->
  <text x="150" y="180" font-size="20" text-anchor="middle">Hello, SVG!</text>
</svg>

SVG is excellent for creating complex graphics, icons, logos, charts, and diagrams that need to scale across different screen sizes.

You can animate SVG elements using either CSS animations or SVG’s built-in animation elements like <animate>.

Using CSS to Animate SVG:

<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="red" class="pulse" />
</svg>

<style>
  .pulse {
    animation: pulse-animation 2s infinite;
  }

  @keyframes pulse-animation {
    0% {
      r: 50;
      fill: red;
    }
    50% {
      r: 70;
      fill: orange;
    }
    100% {
      r: 50;
      fill: red;
    }
  }
</style>

Using SVG Animation (<animate>):

<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="blue">
    <animate attributeName="r" from="50" to="80" dur="2s" repeatCount="indefinite" />
  </circle>
</svg>

Explanation:

• <animate>: Specifies the animation properties directly within the SVG.
• attributeName: The SVG attribute you want to animate (e.g., r for radius).
• from, to: Defines the starting and ending values.
• dur: Specifies the duration of the animation.
• repeatCount: Determines how many times the animation should repeat (indefinite for infinite).

Adding captions to multimedia elements like images, audio, and video is essential for accessibility and context.

Using <figcaption> for Images:

<figure>
  <img decoding="async" src="mountain.jpg" alt="A beautiful mountain landscape">
  <figcaption>A stunning mountain view during sunset.</figcaption>
</figure>

Captions for Video and Audio:

• For Video: Use the <track> element within the <video> tag to add subtitles or captions.

<video width="600" controls>
  <source src="sample-video.mp4" type="video/mp4">
  <track src="captions.vtt" kind="subtitles" srclang="en" label="English">
  Your browser does not support the video element.
</video>

• <track> Element Attributes:
  • src: Path to the caption file (e.g., WebVTT format).
  • kind: Specifies the type of text track (e.g., subtitles).
  • srclang: Language of the track content.
  • label: Title of the track, displayed to the user.

HTML5 provides robust tools for adding graphics and multimedia to web pages. The <canvas> element allows for dynamic, scriptable rendering of 2D graphics, ideal for games, charts, and animations. SVG offers a resolution-independent way to define vector graphics with built-in support for animations. Additionally, CSS and SVG animations enable dynamic visual effects without the need for external plugins. For multimedia content like images, audio, and video, HTML5 offers simple methods for adding captions and subtitles, enhancing accessibility and providing better context. By leveraging these features, you can create engaging, interactive web experiences.