Skip to main content

A.3.14. Canvas

A.3.14.1. Pengertian canvas​

Tag <canvas> adalah elemen HTML yang digunakan sebagai area gambar atau kanvas di mana temen-temen bisa menggambar berbagai objek seperti garis, kotak, lingkaran, dan bahkan membuat animasi atau grafik interaktif. Namun, berbeda dengan elemen gambar biasa seperti <img>, tag <canvas> hanya menyediakan area kosong—temen-temen harus menambahkan gambar atau elemen grafis menggunakan JavaScript.

Berikut contoh dasar penggunaan tag <canvas>:

<canvas id="myCanvas" width="400" height="300"></canvas>
<!-- ...... -->

Untuk menggambar di dalam canvas, temen-temen perlu menggunakan JavaScript. Berikut adalah contoh sederhana untuk menggambar sebuah persegi panjang di dalam canvas.

Pertama-tama, kita perlu menyiapkan sebuah variabel bernama canvas yang akan berisi representasi dari tag <canvas>yang ada di HTML. Kita menggunakan document.getElementById("myCanvas") untuk menghubungkan variabel ini dengan elemen canvas di halaman HTML.

var canvas = document.getElementById("myCanvas");

Setelah itu, kita perlu mendapatkan konteks 2D dari canvas yang akan kita gunakan untuk menggambar. Kita akan menyimpan konteks ini dalam variabel ctx.

var ctx = canvas.getContext("2d");

Konteks 2D ini adalah yang akan kita gunakan untuk menggambar segala macam bentuk, warna, dan gambar di dalam canvas.

Sekarang, kita bisa mulai menggambar! Misalnya, kita ingin menggambar sebuah persegi panjang berwarna merah. Kita akan menggunakan metode fillRect(x, y, width, height) untuk menggambar persegi panjang, dan fillStyle untuk menentukan warna yang akan digunakan.

// Menggambar persegi panjang
ctx.fillStyle = "#FF0000"; // Warna isi: merah
ctx.fillRect(50, 50, 200, 100); // Posisi dan ukuran persegi panjang

Jadi, jika semua langkah di atas kita gabungkan, inilah hasil akhirnya:

<canvas id="myCanvas" width="400" height="300"></canvas>

<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");

  // Menggambar persegi panjang
  ctx.fillStyle = "#FF0000"; // Warna isi: merah
  ctx.fillRect(50, 50, 200, 100); // Posisi dan ukuran persegi panjang
</script>

Nah, sekarang coba temen-temen buka di web browser masing-masing maka akan menampilkan hasil seperti yang ditunjukan pada gambar di bawah ini:

Output

Pada pembahasan di atas, kita sudah sedikit bekerja dengan menggunakan JavaScript. Apa itu? temen-temen jangan khawatir ya, kita akan pelajari di chapter C. Javascript.

info

Source code pada chapter ini tersedia di GitHub
https://github.com/mframadann/webdev-dasar-example/tree/main/a-html/chapter-A.3-tags-pada-html/chapter-A.3.14-canvas