HTML Canvas API

Canvas API is used to draw graphics, shapes, images, and animations directly in the browser using JavaScript.

It is widely used for games, charts, visual effects, and animations.

Introduction to HTML Canvas

The <canvas> element provides a drawing area inside the web page.

Unlike an image, you can draw anything dynamically with code.

Example:

<canvas id="myCanvas" width="300" height="200" style="border:1px solid black;">
  Your browser does not support canvas.
</canvas>

This creates a blank canvas with width 300px and height 200px.Accessing the Drawing Context.

To draw, you must access the 2D drawing context.

<script>
  const canvas = document.getElementById("myCanvas");
  const ctx = canvas.getContext("2d"); // 2D context
</script>

Drawing Basic Shapes

Rectangles

<script>
  ctx.fillStyle = "blue";
  ctx.fillRect(20, 20, 100, 50); // x, y, width, height

  ctx.strokeStyle = "red";
  ctx.strokeRect(150, 20, 100, 50);

  ctx.clearRect(30, 30, 40, 20); // erase part of rectangle
</script>

Lines and Paths

<script>
  ctx.beginPath();
  ctx.moveTo(20, 120);  // starting point
  ctx.lineTo(200, 120); // end point
  ctx.stroke();
</script>

Circles (using arc)

<script>
  ctx.beginPath();
  ctx.arc(100, 150, 40, 0, 2 * Math.PI); // x, y, radius, startAngle, endAngle
  ctx.fillStyle = "green";
  ctx.fill();
  ctx.stroke();
</script>

Colors and Styles

Fill and Stroke

ctx.fillStyle = "orange";
ctx.fillRect(50, 50, 100, 80);

ctx.strokeStyle = "black";
ctx.lineWidth = 3;
ctx.strokeRect(200, 50, 100, 80);

Gradients

const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "yellow");

ctx.fillStyle = gradient;
ctx.fillRect(20, 200, 250, 80);

Adding Text

ctx.font = "24px Arial";
ctx.fillStyle = "blue";
ctx.fillText("Hello Canvas", 50, 50);

ctx.strokeStyle = "black";
ctx.strokeText("Outline Text", 50, 100);

Working with Images

const img = new Image();
img.src = "example.jpg";
img.onload = () => {
  ctx.drawImage(img, 20, 20, 150, 100); // draw image
};

You can also crop images using more drawImage() parameters.

Transformations

ctx.translate(200, 200);   // move origin
ctx.rotate(Math.PI / 4);   // rotate 45 degrees
ctx.fillStyle = "purple";
ctx.fillRect(-50, -50, 100, 100); // rotated square

Animations with Canvas

let x = 0;
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // clear old frame
  ctx.fillStyle = "red";
  ctx.fillRect(x, 50, 50, 50);
  x += 2; // move right
  requestAnimationFrame(animate); // keep animating
}
animate();

👉 Used in games and visual effects.

Pixel Manipulation

const imageData = ctx.getImageData(0, 0, 100, 100);
console.log(imageData.data); // RGBA pixel values

👉 Can be used for filters like grayscale, brightness, etc.

Canvas Compositing

ctx.globalAlpha = 0.5; // transparency
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 100, 100);

ctx.globalCompositeOperation = "lighter"; // blend mode
ctx.fillStyle = "red";
ctx.fillRect(80, 80, 100, 100);

Real-World Use Cases of Canvas

Games (2D browser games like Flappy Bird clones).
Charts and Graphs (used by Chart.js).
Image Editors (like online Photoshop tools).
Animations & Data Visualizations.