JavaScript Canvas API

Instead of using HTML elements for visuals, the Canvas API provides a pixel-based drawing surface, making it ideal for games, charts, image editors, visualizations, and animations.

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

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

ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 150, 100);

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

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(200, 20);
ctx.stroke();

ctx.font = "20px Arial";
ctx.fillText("Hello Canvas!", 50, 50);

ctx.strokeText("Outlined Text", 50, 80);

const img = new Image();
img.src = "image.jpg";
img.onload = () => {
  ctx.drawImage(img, 50, 50, 200, 150);
};

let x = 0;

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(x, 50, 50, 50);
  x += 2;
  requestAnimationFrame(animate);
}

animate();