The <canvas> Tag

The <canvas> tag is used for rendering graphics dynamically via scripts. It is transparent and serves only as a container for graphics; actual drawing must be done using scripts. Any text inside the <canvas> element will appear in browsers with JavaScript disabled or in browsers that do not support the <canvas> element.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>graphical interface</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<canvas id="canvas1" width="300" height="200">Your browser does not support the canvas element.</canvas>
<canvas id="canvas2" width="300" height="200">Your browser does not support the canvas element.</canvas>

<script>
    // Canvas1: Drawing rectangles
    const a = document.getElementById("canvas1");
    const b = a.getContext("2d");

    b.fillStyle = "greenyellow";
    b.fillRect(20, 20, 75, 50);

    // Enable transparency
    b.globalAlpha = 0.2;

    b.fillStyle = "red";
    b.fillRect(50, 50, 75, 50);

    b.fillStyle = "orange";
    b.fillRect(80, 80, 75, 50);

    // Canvas2: Drawing circles
    const c = document.getElementById("canvas2");
    const d = c.getContext("2d");

    // First circle (blue color)
    d.beginPath();
    d.arc(60, 60, 40, 0, 2 * Math.PI); // (x, y, radius, startAngle, endAngle)
    d.fillStyle = "blue";
    d.fill();
    d.closePath();

    // Second circle (yellow color with transparency)
    d.globalAlpha = 0.6;
    d.beginPath();
    d.arc(120, 100, 50, 0, 2 * Math.PI);
    d.fillStyle = "yellow";
    d.fill();
    d.closePath();

    // Third circle (green color)
    d.globalAlpha = 1; // Reset to full opacity
    d.beginPath();
    d.arc(200, 80, 30, 0, 2 * Math.PI);
    d.fillStyle = "green";
    d.fill();
    d.closePath();
</script>
</body>
</html>

RESULT