HTML Canvas Graphics

The <canvas> element in HTML is a powerful tool for creating and manipulating graphics directly in a web browser. It allows developers to draw shapes, render images, and create dynamic animations using JavaScript. In this post by The Coding College, we’ll explore the basics of the HTML <canvas> element and how you can use it to create stunning graphics on your website.

What is the HTML <canvas> Element?

The <canvas> element is a container for graphics drawn with JavaScript. It does not have any drawing capabilities by itself; all the drawing is done using JavaScript and the Canvas API.

Syntax:

<canvas id="myCanvas" width="500" height="300"></canvas>

Adding Graphics to the Canvas

To draw on a <canvas>, you need to:

  1. Reference the <canvas> element in your JavaScript code.
  2. Use the getContext("2d") method to access the 2D rendering context.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Canvas Example</title>
</head>
<body>
  <h1>HTML Canvas Example</h1>
  <canvas id="myCanvas" width="500" height="300" style="border:1px solid #000;"></canvas>
  
  <script>
    // Access the canvas
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // Draw a rectangle
    ctx.fillStyle = "blue";
    ctx.fillRect(50, 50, 200, 100);
  </script>
</body>
</html>

Common Canvas Drawing Methods

Here are some basic drawing methods available in the Canvas API:

1. Drawing 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 the specified rectangular area.

Example:

ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);
ctx.strokeRect(200, 50, 150, 100);
ctx.clearRect(50, 50, 50, 50);

2. Drawing Paths

Paths are used for creating custom shapes.

  • Begin a Path: beginPath()
  • Add Lines: moveTo(x, y) and lineTo(x, y)
  • Draw Curves: arc() for circles and quadraticCurveTo() or bezierCurveTo() for more complex curves
  • Finish a Path: closePath() and stroke()

Example:

ctx.beginPath();
ctx.moveTo(50, 150);
ctx.lineTo(200, 250);
ctx.lineTo(300, 150);
ctx.closePath();
ctx.stroke();

3. Drawing Text

Canvas also supports text rendering.

  • fillText(text, x, y) – Draws filled text.
  • strokeText(text, x, y) – Draws text outlines.

Example:

ctx.font = "20px Arial";
ctx.fillStyle = "green";
ctx.fillText("Hello Canvas!", 50, 50);

4. Adding Images

Use the drawImage() method to draw images on the canvas.

Example:

const img = new Image();
img.src = "example.jpg";
img.onload = function() {
  ctx.drawImage(img, 50, 50, 200, 150);
};

Practical Example

The following example combines various canvas features:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Canvas Graphics</title>
</head>
<body>
  <h1>Canvas Graphics in Action</h1>
  <canvas id="myCanvas" width="600" height="400" style="border:1px solid #000;"></canvas>
  
  <script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // Draw a rectangle
    ctx.fillStyle = "lightblue";
    ctx.fillRect(50, 50, 200, 100);

    // Draw a circle
    ctx.beginPath();
    ctx.arc(300, 200, 50, 0, 2 * Math.PI);
    ctx.fillStyle = "orange";
    ctx.fill();

    // Add text
    ctx.font = "20px Verdana";
    ctx.fillStyle = "purple";
    ctx.fillText("Canvas Fun!", 400, 100);
  </script>
</body>
</html>

Why Use the <canvas> Element?

  1. Dynamic Graphics: Create animations, games, and interactive charts.
  2. Custom Rendering: Unlike SVG, the <canvas> provides pixel-level control over graphics.
  3. High Performance: Efficient for large-scale rendering.

For more practical tutorials on web development, visit The Coding College and master the art of HTML graphics.

Leave a Comment