Menggambar pakai JavaScript! Emang bisa?
Tags: javascript, programming, beginners, indonesia
Published: 2023-12-07 06:09:17

Halo, teman-teman! Kamu pernah kebayang gak sih, bikin gambar kayak di aplikasi Paint, tapi menggunakan kode? Yap! Kamu bisa mulai menggambar dengan menulis kode dari artikel ini. Pada artikel ini, kita akan belajar sedikit tentang grafika komputer menggunakan bahasa pemrograman JavaScript.

Menggambar dengan bahasa pemrograman JavaScript bisa dilakukan menggunakan [HTML5 Canvas API](https://www.w3schools.com/graphics/canvas_intro.asp). Pada artikel ini kita akan menggunakan _code editor_ daring, Codepen sehingga kita tidak perlu melakukan konfigurasi apa-apa. Hal pertama yang harus dilakukan adalah membuka situs [codepen.io](https://codepen.io/), lalu mendaftarkan akun dan membuat _pen_ baru. Jika _pen_ baru sudah dibuat, maka tampilannya akan menjadi seperti di bawah ini:

![Tampilan pen baru](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9i61e1g2q3slhzqmgtk6.png)

Jika _layout_-nya berbeda dengan di atas, kamu cukup menggantinya di pojok kanan atas.

![Mengganti layout tampilan](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/exe9offxoglfju7i6gbp.png)

## Membuat elemen `<canvas>` pada HTML

Hal selanjutnya yang harus kita lakukan adalah membuat elemen `<canvas>` sebagai elemen tempat gambar kita akan di-_render_ nantinya.

```html
<canvas id="canvasku" width="512" height="512"></canvas>
```

Pada elemen tersebut, terdapat atribut `id` sebagai selector yang akan kita gunakan pada kode JavaScript. Selain itu terdapat pula atribut `width` dan `height` untuk mendefinisikan ukuran kanvas yang kita inginkan.

## Mempersiapkan kode JavaScript

Salah satu fungsi dasar JavaScript adalah memanipulasi DOM (_document object model_) yang ada pada HTML. Maka dari itu, yang harus kita tulis pertama kali pada kode JavaScript adalah _selector_ untuk memilih elemen HTML apa yang akan kita manipulasi. Pada kasus ini, kita menggunakan `id` sebagai _selector_ elemen kanvas kita. Setelah kita memilih elemen dengan _selector_, maka kita akan menyimpannya ke dalam variabel `context`.

```js
const context = document.getElementById("canvasku");
```

Untuk memeriksa apakah elemen kanvas sudah di-_select_ dengan benar, kita cetak variabel `context` menggunakan `console.log()`.

![Log variabel context](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oz6idcjw2jtop2dqky6e.png)

> Menu _console_ dapat dibuka dari menu yang ada di pojok kiri bawah

Selanjutnya, kita akan memanggil Context API 2D ke dalam variabel `ctx`. Context ini digunakan untuk memanggil API agar kita bisa menggambar menggunakan fungsi-fungsi yang ada.

```js
const ctx = context.getContext("2d");
```

Setelah itu, kita sudah dapat menggunakan fungsi-fungsi yang ada pada HTML Canvas API.

> Hal dasar yang perlu diketahui dalam grafika komputer adalah:
- Berbeda dengan koordinat kartesius, koordinat `(0, 0)` pada layar komputer berada pada kiri atas. Sehingga sumbu x positif berada di sebelah kanan, dan sumbu y positif berada di bawah
- Seluruh gambar yang di-_render_ pada komputer didasarkan pada fungsi-fungsi matematis. Sering juga disebut sebagai _vector_ atau _path_
- Meskipun gambar di-_render_ sebagai _vector_, luaran yang dihasilkan dan dilihat oleh mata kita pada layar berbentuk _pixel_ atau _bitmap_

## Menggambar garis

Untuk menggambar garis pada HTML Canvas, gunakan kode seperti di bawah ini:

```js
// Membersihkan atribut path sebelumnya
ctx.beginPath();
// Memindahkan "pena" ke titik (x, y)
ctx.moveTo(70, 120);
// Membuat garis dari (x, y) ke (xa, ya)
ctx.lineTo(150, 200);
// Membuat garis dari (xa, ya) ke (xb, yb)
ctx.lineTo(180, 150);
// Menggambar garis
ctx.stroke();
```

Dari kode di atas, terdapat 4 fungsi yang kita gunakan. Yang pertama adalah `beginPath()`. Fungsi ini digunakan untuk menghapus atau membersihkan atribut yang digunakan pada path sebelumnya, sehingga _path_ yang akan kita gambar setelahnya tidak menggunakan atribut pada _path_ sebelumnya.

Kemudian yang kedua adalah fungsi `moveTo(x, y)`. Fungsi ini berguna untuk memindahkan posisi kursor atau "pena" yang akan digunakan nanti saat menggambar. Jadi, garis yang akan digambarkan dimulai dari titik `(x, y)` pada parameter fungsi `moveTo(x, y)`.

Yang ketiga adalah fungsi `lineTo(xa, ya)`. Fungsi inilah yang akan membuat garis dari titik awal `(x, y)` menuju titik `(xa, ya)`. Fungsi `lineTo()` selanjutnya akan dimulai dari titik `(xa, ya)`.

Dan yang terakhir adalah fungsi `stroke()`. Fungsi ini digunakan untuk me-_render_ atau menggambar seluruh garis yang telah didefinisikan sebelumnya. Pada fungsi ini, _line_ atau _path_ yang sudah didefinisikan sebelumnya akan di-_render_ pada kanvas.

Hasil akhir gambar akan terlihat seperti ini:

![Gambar akhir garis](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v7lm8yzvp8z9p9knyn22.png)

## Menggambar persegi panjang

Hal paling mudah pada HTML Canvas adalah menggambar persegi panjang menggunakan fungsi `fillRect()`. Cukup masukkan kode berikut ke dalam file JavaScript:

```js
// fillRect(x, y, width, height);
ctx.fillRect(0, 0, 200, 100);
```

Dari kode di atas, kita menggambarkan persegi panjang dari titik `(0, 0)` dengan lebar `200px` ke arah kanan dan tinggi `100px` ke arah bawah sesuai dengan koordinat pada grafika komputer.

Dari sini akan tampak persegi panjang berwarna hitam dengan atribut panjang dan lebar sesuai ketentuan kode di atas. Agar lebih menarik, kita ubah warna dari persegi panjang tersebut. Untuk mengubah warna, gunakan atribut `fillStyle = "<WARNA>"`. Letakkan kode berikut di atas baris fungsi gambar persegi panjang.

```js
// Mengatur warna fill menjadi hijau
ctx.fillStyle = "green";
```

![Persegi panjang hijau](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nat6miqy5ufrngtmg5kv.png)

Seluruh elemen yang kita gambar setelah baris kode di atas akan memiliki atribut `fillStyle` dengan warna hijau. Jika kita menginginkan warna lain untuk elemen lain setelahnya, maka atribut `fillStyle` harus di-_override_ dengan warna yang diinginkan selanjutnya.

## Menggambar lingkaran

Setelah itu, kita akan menggambar lingkaran menggunakan fungsi `arc()`.

```js
// Membersihkan atribut path sebelumnya
ctx.beginPath();
// Mengatur warna stroke menjadi biru
ctx.strokeStyle = "blue";
// Membuat lingkaran dengan arc(x, y, r, start, end)
ctx.arc(300, 100, 50, 0, 2*Math.PI);
// Menggambar lingkaran
ctx.stroke();
```

Fungsi `arc()` digunakan untuk menggambar lingkaran dengan parameter titik pusat lingkaran, radius, serta derajat awal dan akhir dari lingkaran. 0 derajat dari lingkaran dimulai dari sebelah kanan titik pusat lingkaran sejauh radius dan terus berputar searah jarum jam. Gambar lingkaran akan terlihat seperti ini:

![Lingkaran biru](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i5cq6qpy7z6kl3iwrmk1.png)

## Menggabungkan gambar dengan konsep pemrograman

Dari lingkaran yang sudah kita buat sebelumnya, kita duplikasi lingkaran tersebut menggunakan `for loop`. Kita cukup membungkus kode pembuatan lingkaran ke dalam `for loop` seperti ini:

```js
for(let i=0; i<4; i++) {
  // Membersihkan atribut path sebelumnya
  ctx.beginPath();
  // Mengatur warna stroke menjadi biru
  ctx.strokeStyle = "blue";
  // Membuat lingkaran dengan arc(x, y, r, start, end)
  ctx.arc(300, 100+(i*70), 50, 0, 2*Math.PI);
  // Menggambar lingkaran
  ctx.stroke();
}
```

Maka lingkaran akan terlihat seperti gambar berikut:

![Lingkaran for loop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/73t9v6we61cd0gjl5c06.png)

Apakah kamu bisa menjelaskan kenapa posisi keempat lingkaran bisa berbeda? Tulis di kolom komentar, ya!

---

> Referensi:
- https://www.w3schools.com/graphics/canvas_intro.asp
- https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D

Kode lengkap dan _preview_ dari Codepen dapat dilihat [di sini](https://codepen.io/faizbyp/pen/BaMMpYZ)