<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial; padding: 20px; background: #f0f4f8; text-align: center; }
        canvas { background: white; border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
    </style>
</head>
<body>
    <h1 style="color:#1B3A5C">HTML5 Canvas</h1>
    <canvas id="myCanvas" width="500" height="350"></canvas>
    <script>
        const c = document.getElementById('myCanvas');
        const ctx = c.getContext('2d');

        // Ko'k doira
        ctx.beginPath();
        ctx.arc(150, 150, 80, 0, Math.PI * 2);
        ctx.fillStyle = '#2E86AB';
        ctx.fill();

        // Qizil to'rtburchak
        ctx.fillStyle = '#E84D3D';
        ctx.fillRect(280, 80, 150, 100);

        // Yashil uchburchak
        ctx.beginPath();
        ctx.moveTo(350, 250);
        ctx.lineTo(280, 330);
        ctx.lineTo(420, 330);
        ctx.closePath();
        ctx.fillStyle = '#27AE60';
        ctx.fill();

        // Matn
        ctx.font = 'bold 20px Arial';
        ctx.fillStyle = '#1B3A5C';
        ctx.fillText('Canvas!', 130, 155);

        // Oltin chiziq
        ctx.beginPath();
        ctx.moveTo(50, 300);
        ctx.lineTo(250, 300);
        ctx.strokeStyle = '#D4A533';
        ctx.lineWidth = 4;
        ctx.stroke();
    </script>
</body>
</html>