HTML5 Canvas Drawing

 HTML5 Canvas Drawing

The HTML5 <canvas> element provides a powerful API for rendering graphics and animations on the fly using JavaScript. You can use methods and properties of the canvas context to draw shapes, lines, text, and images. Here's a basic example:

<canvas id="myCanvas" width="400" height="200"></canvas>

<script>

  const canvas = document.getElementById("myCanvas");

  const ctx = canvas.getContext("2d");

  // Draw a rectangle

  ctx.fillStyle = "red";

  ctx.fillRect(50, 50, 100, 50);

  // Draw a line

  ctx.beginPath();

  ctx.moveTo(200, 100);

  ctx.lineTo(300, 150);

  ctx.strokeStyle = "blue";

  ctx.lineWidth = 2;

  ctx.stroke();

  // Draw text

  ctx.font = "20px Arial";

  ctx.fillStyle = "black";

  ctx.fillText("Hello, Canvas!", 50, 180);

</script>