Previous

HTML Canvas

The HTML <canvas> element is used to draw graphics on a web page using JavaScript. It provides a rectangular area where you can render shapes, images, text, and animations dynamically.

Basic Syntax

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

The <canvas> element itself does not draw anything; all drawing must be done via JavaScript.

Setting Up a Canvas

Example: Drawing a Line

<canvas id="lineCanvas" width="400" height="200"></canvas>
<script>
  const canvas = document.getElementById("lineCanvas");
  const ctx = canvas.getContext("2d");

  // Draw a line
  ctx.beginPath();
  ctx.moveTo(50, 50);
  ctx.lineTo(350, 50);
  ctx.stroke();
</script>

Output: A straight horizontal line is drawn on the canvas.

Drawing Shapes

1. Rectangles

  • fillRect(x, y, width, height): Draws a filled rectangle.
  • strokeRect(x, y, width, height): Draws the outline of a rectangle.
  • clearRect(x, y, width, height): Clears part of the canvas.
<canvas id="rectCanvas" width="400" height="200"></canvas>
<script>
  const canvas = document.getElementById("rectCanvas");
  const ctx = canvas.getContext("2d");

  // Filled rectangle
  ctx.fillStyle = "blue";
  ctx.fillRect(50, 50, 100, 50);

  // Rectangle outline
  ctx.strokeStyle = "red";
  ctx.strokeRect(200, 50, 100, 50);

  // Clear a part of the canvas
  ctx.clearRect(210, 60, 80, 30);
</script>

2. Circles and Arcs

  • arc(x, y, radius, startAngle, endAngle, anticlockwise)
<canvas id="circleCanvas" width="400" height="200"></canvas>
<script>
  const canvas = document.getElementById("circleCanvas");
  const ctx = canvas.getContext("2d");

  // Draw a circle
  ctx.beginPath();
  ctx.arc(150, 100, 50, 0, 2 * Math.PI);
  ctx.fillStyle = "green";
  ctx.fill();
  ctx.stroke();
</script>

Adding Text

Example: Drawing Text

<canvas id="textCanvas" width="400" height="200"></canvas>
<script>
  const canvas = document.getElementById("textCanvas");
  const ctx = canvas.getContext("2d");

  // Draw text
  ctx.font = "20px Arial";
  ctx.fillStyle = "black";
  ctx.fillText("Hello, Canvas!", 100, 100);

  // Outline text
  ctx.strokeStyle = "blue";
  ctx.strokeText("Hello, Canvas!", 100, 130);
</script>

Adding Images

Example: Drawing an Image

<canvas id="imageCanvas" width="400" height="200"></canvas>
<script>
  const canvas = document.getElementById("imageCanvas");
  const ctx = canvas.getContext("2d");
  const img = new Image();

  img.onload = () => ctx.drawImage(img, 50, 50, 100, 100);
  img.src = "https://via.placeholder.com/100";
</script>

Animations

Example: Simple Animation

<canvas id="animCanvas" width="400" height="200"></canvas>
<script>
  const canvas = document.getElementById("animCanvas");
  const ctx = canvas.getContext("2d");
  let x = 0;

  function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "orange";
    ctx.fillRect(x, 50, 50, 50);
    x += 2;

    if (x < canvas.width) {
      requestAnimationFrame(draw);
    }
  }

  draw();
</script>

Output: A moving orange square animates across the canvas.

 

Summary

The HTML <canvas> element is a powerful tool for creating dynamic graphics and animations. By combining JavaScript with canvas methods like fillRect(), arc(), and drawImage(), you can build interactive visual content. Canvas is ideal for games, charts, and data visualization tasks.

Previous