<!-- Antes no HTML 4.01 Strict (Prolixo e Difícil de Lembrar) -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
<!-- Agora no HTML5 Moderno (Simples e Canônico) -->
<!DOCTYPE html>

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demonstração de Recursos Nativos do HTML5</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background: #0f172a;
            color: #f8fafc;
            padding: 24px;
            margin: 0;
        }
 
        .container {
            max-width: 800px;
            margin: 0 auto;
        }
 
        .painel-html5 {
            background: #1e293b;
            border: 1px solid #334155;
            border-radius: 16px;
            padding: 28px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        }
 
        .campo-grupo {
            display: flex;
            align-items: center;
            gap: 16px;
            margin: 16px 0;
        }
 
        input[type="color"] {
            width: 48px;
            height: 40px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            background: none;
        }
 
        canvas {
            background: #0b1120;
            border: 1px solid #334155;
            border-radius: 12px;
            display: block;
            margin-top: 16px;
            width: 100%;
            height: 180px;
        }
    </style>
</head>
<body>
 
    <main class="container">
        <article class="painel-html5">
            <header>
                <h2 style="margin-top: 0; color: #38bdf8;">Laboratório de APIs Nativas do HTML5</h2>
                <p style="color: #94a3b8;">Altere a cor nativa e a barra de controle para desenhar dinamicamente no Canvas:</p>
            </header>
 
            <section>
                <div class="campo-grupo">
                    <label for="seletor-cor">Seletor de Cor Nativo (type="color"):</label>
                    <input type="color" id="seletor-cor" value="#38bdf8">
 
                    <label for="seletor-raio" style="margin-left: 20px;">Raio (type="range"):</label>
                    <input type="range" id="seletor-raio" min="10" max="60" value="35">
                </div>
 
                <!-- Elemento Canvas Nativo 2D -->
                <canvas id="meu-canvas" width="600" height="180"></canvas>
            </section>
        </article>
    </main>
 
    <script>
        const canvas = document.getElementById("meu-canvas");
        const ctx = canvas.getContext("2d");
        const inputCor = document.getElementById("seletor-cor");
        const inputRaio = document.getElementById("seletor-raio");
 
        function desenhar() {
            // Limpa o canvas a cada atualização
            ctx.clearRect(0, 0, canvas.width, canvas.height);
 
            // Desenha um círculo com o contexto 2D nativo do HTML5
            ctx.beginPath();
            ctx.arc(canvas.width / 2, canvas.height / 2, inputRaio.value, 0, Math.PI * 2);
            ctx.fillStyle = inputCor.value;
            ctx.fill();
 
            // Adiciona texto estilizado dentro do canvas
            ctx.fillStyle = "#ffffff";
            ctx.font = "bold 14px sans-serif";
            ctx.textAlign = "center";
            ctx.fillText("HTML5 Canvas 2D Nativo", canvas.width / 2, (canvas.height / 2) + 5);
        }
 
        inputCor.addEventListener("input", desenhar);
        inputRaio.addEventListener("input", desenhar);
 
        // Renderiza na carga da tela
        desenhar();
    </script>
</body>
</html>