How to use canvas in javascript?

The HTML5 <canvas> element is used to draw graphics, create animations, and manipulate images on a webpage.

Here's a basic guide on how to use the canvas element in JavaScript:

1. Create a Canvas Element in HTML:

<!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>
  <canvas id="myCanvas" width="500" height="500"></canvas>
  <script src="your-script.js"></script>
</body>

</html>

2. Get the Canvas Element in JavaScript:

// your-script.js

// Get the canvas element
var canvas = document.getElementById("myCanvas");

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

3. Drawing Shapes on the canvas:

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

// Draw a circle
ctx.beginPath();
ctx.arc(250, 250, 50, 0, 2 * Math.PI);
ctx.fillStyle = "blue";
ctx.fill();
ctx.closePath();

OR Drawing Paths on the canvas:

// Draw a custom path
ctx.beginPath();
ctx.moveTo(200, 200); // Move the pen to the starting point
ctx.lineTo(300, 200); // Draw a line
ctx.lineTo(250, 300);
ctx.closePath();
ctx.stroke();

OR Adding Text on the canvas:

// Draw text
ctx.font = "30px Arial";
ctx.fillStyle = "green";
ctx.fillText("Hello, Canvas!", 50, 400);

4. Animation with RequestAnimationFrame:

function draw() {
  // Clear the canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Update animation logic here

  // Draw new frame
  // Example: Draw a moving rectangle
  ctx.fillStyle = "red";
  ctx.fillRect(x, 50, 50, 50);

  // Increment x for movement
  x += 2;

  // Call the draw function recursively
  requestAnimationFrame(draw);
}

// Start the animation
draw();

In Conclusion, using the HTML5 canvas with JavaScript provides a powerful way to create dynamic and interactive graphics on webpages. The canvas element, along with its 2D rendering context, allows you to draw shapes, paths, text, and images. By leveraging JavaScript, you can create animations, handle user input, and manipulate the canvas in real-time.

Techstackkit