HTML Canvas Reference

The HTML <canvas> element is a versatile tool for drawing graphics using JavaScript. It can create anything from simple shapes to complex animations and interactive applications. At The Coding College, we aim to make mastering the canvas easy and efficient, focusing on its most important features and capabilities.

What is the <canvas> Element?

The <canvas> element provides a rectangular area on your web page where you can draw graphics. It does not have built-in drawing capabilities but relies on JavaScript for rendering.

Syntax:

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #000000;">
  Your browser does not support the canvas element.
</canvas>

Canvas Methods and Properties

The canvas relies on its context to perform rendering. The most commonly used context is "2d". Here’s a reference of frequently used methods and properties:

1. Drawing Rectangles

  • fillRect(x, y, width, height): Draws a filled rectangle.
  • strokeRect(x, y, width, height): Draws a rectangle outline.
  • clearRect(x, y, width, height): Clears a specific area on the canvas.

Example:

<canvas id="rectCanvas" width="300" height="150"></canvas>
<script>
  const canvas = document.getElementById('rectCanvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'blue';
  ctx.fillRect(20, 20, 100, 50);
  ctx.strokeRect(140, 20, 100, 50);
</script>

2. Drawing Paths

  • beginPath(): Starts a new path.
  • moveTo(x, y): Moves the path to a specific point.
  • lineTo(x, y): Draws a line from the current point to a new point.
  • closePath(): Closes the current path.
  • stroke(): Draws the outline of a path.

Example:

<canvas id="pathCanvas" width="300" height="150"></canvas>
<script>
  const canvas = document.getElementById('pathCanvas');
  const ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.moveTo(50, 50);
  ctx.lineTo(200, 50);
  ctx.lineTo(125, 100);
  ctx.closePath();
  ctx.stroke();
</script>

3. Drawing Text

  • fillText(text, x, y): Draws filled text.
  • strokeText(text, x, y): Draws text outline.

Example:

<canvas id="textCanvas" width="300" height="150"></canvas>
<script>
  const canvas = document.getElementById('textCanvas');
  const ctx = canvas.getContext('2d');
  ctx.font = '20px Arial';
  ctx.fillText('Hello Canvas!', 50, 50);
  ctx.strokeText('Outline Text', 50, 100);
</script>

4. Colors and Styles

  • fillStyle: Sets the color for fills.
  • strokeStyle: Sets the color for strokes.
  • lineWidth: Sets the width of lines.

Example:

ctx.fillStyle = 'red';
ctx.strokeStyle = 'green';
ctx.lineWidth = 5;

5. Working with Images

  • drawImage(image, x, y): Draws an image on the canvas.

Example:

<canvas id="imageCanvas" width="300" height="150"></canvas>
<script>
  const canvas = document.getElementById('imageCanvas');
  const ctx = canvas.getContext('2d');
  const img = new Image();
  img.onload = () => ctx.drawImage(img, 50, 50);
  img.src = 'path/to/image.jpg';
</script>

6. Transformations

  • translate(x, y): Moves the canvas origin.
  • rotate(angle): Rotates the canvas.
  • scale(x, y): Scales the canvas.

7. Animations

Animations can be created using requestAnimationFrame().

Why Learn Canvas?

The canvas element is a powerful tool for web developers, allowing the creation of dynamic graphics and interactive content. From charts to games, its applications are vast.

For more tutorials and in-depth examples, explore The Coding College and elevate your coding skills today!

Leave a Comment