Canvas

HTML Canvas

Apa itu HTML Canvas?

Pada HTML5 terdapat elemen <canvas>, elemen ini cukup berguna untuk menggambar grafik-grafik atau objek pada halaman website dengan menggunakan bantuan JavaScript. Kalian wajib menguasai setidaknya hal-hal dasar mengenai JavaScript untuk memanipulasi objek pada elemen ini, sebab elemen ini hanya sebuah Badan bagi grafik yang akan digambar, dan sisanya di manipulasikan dengan JavaScript.

Secara umum elemen ini sering digunakan untuk membangun sebuah Game Web, contoh penulisan sebuah elemen <canvas> sebagai berikut:

<canvas></canvas>

Apakah ada atribut di dalam tag <canvas>?

Pada tag ini tidak terdapat atribut khusus karena penyelesaiannya menggunakan JavaScript.

Apa saja yang bisa kita gambar?

  • Tulisan - HTML canvas bisa digunakan untuk menggambar tulisan.
  • Grafik - HTML canvas seringkali digunakan untuk menggambar berbagai jenis grafik.
  • Animasi - HTML canvas bisa digunakan untuk menganimasikan objek yang sudah digambar.

Dan masih banyak lainnya yang bisa kita interaksikan dengan tag satu ini.

Bagaimana cara menggambarnya? 

<canvas id="canvas1" width="500" height="500"></canvas>

<script>
  const canvas = document.getElementById("canvas1")
  const ctx = canvas.getContext("2d")
  console.log(ctx) // untuk melihat function built-in yang tersedia

  const letakHorizontal = 100
  const letakVertikal = 100
  const width = 200
  const height = 200

  ctx.fillRect(letakHorizontal, letakVertikal, width, height)
  ctx.fillStyle = "black"
  ctx.fill()
</script>

Output:

20211016_225218

Keunikannya, objek ini bisa di manipulasikan dengan banyak hal karena <canvas> memiliki function built-in yang cukup banyak. Canvas ini tidak hanya bisa menggambar satu objek saja melainkan tidak terbatas atau sebanyak yang dibutuhkan.

Referensi

Untuk referensi lengkapnya, kalian bisa mengunjungi website berikut.

← Data
Video →