HTML5 Canvas

HTML5's <canvas> element provides a powerful way to dynamically draw graphics using JavaScript. You can think of it as a "canvas" where you can draw lines, shapes, text, images, and anything else.

<canvas> itself is just a graphics container; you must use JavaScript scripts to complete the actual drawing tasks. It's widely used in data visualization, image editors, game development, and more.

Creating a Canvas

First, place a <canvas> element in HTML and give it an id for reference in scripts, along with width and height.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;">
  Your browser does not support the Canvas tag.
</canvas>

Drawing with JavaScript

All drawing operations are done in JavaScript.

1. Get the Canvas element: Use document.getElementById() to get the <canvas> element.
2. Get the 2D rendering context: Call the element's getContext('2d') method. This method returns an object with all drawing methods and properties.
3. Start drawing: Use the context object to perform drawing operations.

Drawing a Rectangle

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

<script>
  // 1. Get the Canvas element
  var c = document.getElementById("myCanvas");

  // 2. Get the 2D context
  var ctx = c.getContext("2d");

  // 3. Draw
  ctx.fillStyle = "#FF0000"; // Set fill color to red
  ctx.fillRect(20, 20, 150, 75); // Draw a filled rectangle (x, y, width, height)
</script>

Drawing a Line

Drawing paths (like lines) typically follows these steps:

1. beginPath(): Start a new path.
2. moveTo(x, y): Move the pen to the specified coordinates as the starting point of the path.
3. lineTo(x, y): Add a straight line from the current position to the specified coordinates.
4. stroke(): Actually draw the path outline.

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

<script>
  var c = document.getElementById("lineCanvas");
  var ctx = c.getContext("2d");

  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(200, 100);
  ctx.stroke();
</script>

Drawing a Circle

Use the arc(x, y, radius, startAngle, endAngle) method to draw circles or arcs.

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

<script>
  var c = document.getElementById("circleCanvas");
  var ctx = c.getContext("2d");

  ctx.beginPath();
  // (center x, center y, radius, start angle, end angle)
  ctx.arc(95, 50, 40, 0, 2 * Math.PI);
  ctx.stroke();
</script>

Canvas vs. SVG

HTML5 also provides another graphics technology: SVG. Their main differences are:

• Canvas:

  • Pixel-based (bitmap).
  • Drawn via JavaScript, it's a "draw and forget" mode that doesn't keep references to graphic objects.
  • Gets distorted when enlarged.
  • Suitable for pixel-level image processing, dynamic rendering, and games.

• SVG (Scalable Vector Graphics):

  • XML-based vector graphics.
  • Each shape is a DOM element that can be manipulated via CSS and JS.
  • Scales infinitely without distortion.
  • Suitable for high-quality, interactive charts, icons, and maps.