Logo Komodo Koding /Koding

Menggambar dengan Canvas di HTML

Canvas adalah elemen yang bisa digunakan untuk menggambar pada sebuah halaman situs HTML.

Sama seperti kanvas di dunia nyata, HTML punya tag canvas yang bisa digunakan untuk menggambar apapun yang kamu mau disebuah halaman situs.

Butuh Javascript

Jika kamu belum pernah mendengarnya, ada teknologi lain di pengembangan website yang bernama Javascript. Untuk menggambar dengan kanvas, diperlukan pengetahuan Javascript.

Karena HTML hanya akan berfungsi sebagai tempat meletakkan elemen gambarnya. Untuk menggambarnya sendiri dilakukan dengan aksi-aksi di Javascript.

Contoh membuat kanvas dengan HTML

Di html sediakan tag ini

<canvas id="myCanvas" width="400" height="200"></canvas>
  • Atribut id sebagai penanda/nama. Baca: Apa itu id
  • Lebar kanvas ditentukan dengan atribut width
  • Tinggi kanvas ditentukan dengan atribut height

Sehingga menghasilkan kanvas putih seperti ini

Menggambar di atas kanvas dengan Javascript

Kamu tidak harus mengerti bagian ini, kita akan membahas seputar canvas di bagian lain.

<body>
  <!-- bagian HTML -->
 <canvas id="myCanvas" width="400" height="200"></canvas>

 <!-- bagian Javascript -->
  <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    
    // menggambar garis
    ctx.moveTo(0, 0);
    ctx.lineTo(200, 100);
    ctx.stroke();

    //menggambar tulisan
    ctx.font = "30px Arial";
    ctx.fillText("Hello World", 220, 150);
  </script>

</body>