HTML Canvas API

What is the Canvas API?

The Canvas API is a powerful feature in HTML5 that allows developers to draw graphics, render images, and create animations directly on a web page using JavaScript. It provides a bitmap canvas for rendering 2D shapes and images.

How do you create a canvas element in HTML?

You can create a canvas element in HTML using the <canvas> tag. You can specify its width and height attributes to define the size of the canvas.

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

How do you access the drawing context of a canvas?

You can access the drawing context of a canvas using JavaScript. The getContext() method is used to obtain a 2D rendering context, which allows you to draw on the canvas.

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

How do you draw a rectangle on the canvas?

You can draw a rectangle on the canvas using the fillRect() method or the strokeRect() method. The former fills the rectangle with color, while the latter only outlines it.

ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 50); // Draws a filled rectangle

ctx.strokeStyle = 'red';
ctx.strokeRect(120, 10, 100, 50); // Draws a rectangle outline

How do you draw a circle on the canvas?

You can draw a circle on the canvas using the arc() method, which creates an arc/curve. To complete the circle, set the startAngle to 0 and the endAngle to 2 * Math.PI.

ctx.beginPath(); // Start a new path
ctx.arc(200, 75, 50, 0, 2 * Math.PI); // Draws a circle
ctx.fillStyle = 'green';
ctx.fill(); // Fills the circle

How can you add images to the canvas?

You can add images to the canvas by creating an Image object and then using the drawImage() method to render it on the canvas.

const img = new Image();
img.src = 'image.jpg';
img.onload = function() {
  ctx.drawImage(img, 0, 0, 100, 100); // Draws the image at (0, 0) with width and height of 100
};

What is the difference between fillStyle and strokeStyle?

fillStyle sets the color or pattern used to fill shapes, while strokeStyle sets the color or pattern used for the outlines of shapes. You can use these properties to customize how shapes are rendered on the canvas.

ctx.fillStyle = 'blue'; // Fill color
ctx.strokeStyle = 'red'; // Stroke color

How do you create animations using the Canvas API?

You can create animations using the Canvas API by repeatedly clearing the canvas and redrawing the content in a new position. This is often done using the requestAnimationFrame() method for smoother animations.

let x = 0;

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
  ctx.fillStyle = 'blue';
  ctx.fillRect(x, 10, 50, 50); // Draw the rectangle
  x += 2; // Update position
  requestAnimationFrame(draw); // Call draw again for the next frame
}

draw(); // Start the animation

What are some common use cases for the Canvas API?

Common use cases for the Canvas API include:

• Creating graphics and animations for games.
• Rendering charts and graphs.
• Building interactive visualizations and data representations.
• Drawing custom UI elements for web applications.
• Processing images and applying filters.

How do you handle mouse events on a canvas?

You can handle mouse events on a canvas by adding event listeners for mouse events (e.g., click, mousemove, mousedown). Inside the event handler, you can get the mouse coordinates relative to the canvas.

canvas.addEventListener('click', function(event) {
  const rect = canvas.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  console.log(`Mouse clicked at: (${x}, ${y})`);
});