JS Graphics

<!DOCTYPE html>
<html>
<body style="font-family: sans-serif; padding: 20px;">
    <h2>Menggambar dengan Canvas 2D</h2>
    <canvas id="papanGambar" width="300" height="150" style="border:1px solid #cbd5e1; border-radius:8px;"></canvas>

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

        // Menggambar Kotak Navy
        ctx.fillStyle = '#0d2e5c';
        ctx.fillRect(20, 20, 100, 100);

        // Menggambar Lingkaran Emas
        ctx.beginPath();
        ctx.arc(200, 70, 45, 0, 2 * Math.PI);
        ctx.fillStyle = '#fca311';
        ctx.fill();
    </script>
</body>
</html>