Menggambar dengan Canvas di 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>