Img

<div class='canvas-wrapper' style='text-align:center; margin: 20px 0;'>

  <canvas id='myCanvas' style='border:1px solid #ddd; background:#fff; max-width:100%;'></canvas>

</div>

<script>

// Gunakan window.addEventListener agar script jalan setelah halaman dimuat

window.addEventListener('load', function() {

    const canvas = document.getElementById('myCanvas');

    const ctx = canvas.getContext('2d');

    // Atur ukuran canvas

    canvas.width = 400;

    canvas.height = 200;

    // Contoh: Menggambar Kotak (Bisa diganti logika animasi)

    ctx.fillStyle = '#004d40'; // Warna Deep Navy favoritmu

    ctx.fillRect(50, 50, 300, 100);

    // Contoh: Menulis Teks

    ctx.font = '20px Arial';

    ctx.fillStyle = '#ffffff';

    ctx.fillText('Interactive Canvas', 110, 110);

});

</script>