HTML Canvas: Methods, Drawing, and Examples

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 Canvas Showcase</title>
</head>
<body>
    <h2>HTML5 Canvas 2D Graphics</h2>
    <canvas id="myCanvas" width="500" height="250" style="border: 1px solid #cbd5e1; border-radius: 8px; background: #0f172a;">
        Your browser does not support the HTML5 canvas tag.
    </canvas>

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

        // 1. Draw a filled colored rectangle
        ctx.fillStyle = '#38bdf8';
        ctx.fillRect(40, 40, 120, 80);

        // 2. Draw a circle / arc
        ctx.beginPath();
        ctx.arc(280, 80, 45, 0, Math.PI * 2);
        ctx.fillStyle = '#f59e0b';
        ctx.fill();
        ctx.strokeStyle = '#ffffff';
        ctx.lineWidth = 3;
        ctx.stroke();

        // 3. Draw a vector line
        ctx.beginPath();
        ctx.moveTo(40, 180);
        ctx.lineTo(460, 180);
        ctx.strokeStyle = '#10b981';
        ctx.lineWidth = 4;
        ctx.stroke();

        // 4. Render Canvas Text
        ctx.font = 'bold 18px sans-serif';
        ctx.fillStyle = '#f8fafc';
        ctx.fillText('Interactive Canvas Graphics', 40, 215);
    </script>
</body>
</html>