lifelong learner — urip iku urup, currently working on accenture.

canvas 2d – setup(contex) , tulisan, lingkaran dan kotak

1
Degananda.com -

Dalam konteks menggambar/melukis kanvas adalah suatu bidang yang dapat kita gunakan untuk menggoreskan tinta atau cat. Canvas biasannya diletakan dalam suatu “frame” yang menjadi penyangga sekaligus border / pembatas dari canvas. Berikut ini adalah ilustrasi canvas yang digunakan untuk melukis.

canvas diatas memiliki warna coklat dan diselilingnya terdapat frame yang berguna untuk membatasi area canvas. Setiap canvas memiliki ukuran masing-masing artinnya disesuaikan dengan kebutuhan. Misalnya jika hendak melukis gambar untuk ruang tamu maka dibutuhkan canvas yang lebih lebar dibandingkan dengan canvas diatas(pada gambar).

Canvas di html 5

Pada html 5 makna canvas sama seperti canvas pada konteks melukis atau menggambar. Kita dapat membuat canvas di html yang kemudian canvas tersebut bisa kita “lukis” dengan berbagai macam object. Misalnya, object lingkaran, tulisan, persegi panjang atau bahkan kita dapat menempelkan gambar dalam canvas tersebut. Jika canvas dalam kegiatan melukis memiliki frame maka dalam html 5 kita juga dapat memberikan frame disekelilingnya dengan menggunakan css. Selain itu canvas dalam html 5 juga harus di definisikan ukurannya. Secara default jika kita tidak mendefinisikan ukuran canvas maka akan di set pada width 300px dan height 150px.

Tidak semua browser mensupport canvas. Awal mula pengenalan canvas ini berasal dari safari (browser default dari mac os/apple). Setelah itu diadaptasi oleh browser-browser lainnya seperti firebase, internet explorer dan google chrome. Hanya firefox versi 1.8 keatas yang mensupport canvas dan internet explorer versi 9 keatas. Oleh karena tidak semua browser mensupport canvas maka ketika kita hendak membuat website yang menggunakan canvas maka harus di “filter” browser yang dapat mengakses canvas tersebut agar tidak terjadi error.

Kegunaan html 5 canvas

Secara tidak sadar kita telah menjumpai banyak sekali object – object di website yang telah mengimplementasikan canvas diantarannya yaitu :

  1. Chart, kebanyakan chart pada website memanfaatkan canvas untuk menggabar grafiknya. Mulai dari bar chart, line chart hingga histogram. Untuk meningkatkan interaksi dengan pengujung chart biasannya juga memiliki animasi. Disinilah canvas dan javascript di sinergikan untuk menampilkan suatu chart yang interaktif dimana javascript memiliki peranan dalam mengatur data serta melakukan animasi.
  2. Game, beberapa game yang dapat kita mainkan dibrowser dibangun dengan hanya menggunakan html 5 dan javascript. Canvas berperan penting sebagai wadah untuk menampilkan karakter, background dan komponen-komponen lain dalam game. Untuk interaksi dengan user (animasi/user event binding/dan lain sebagainnya) akan dihandle oleh javascript

dari dua contoh diatas dapat kita ambil kesimpulan bahwa antara canvas pada html 5 dan javascript memiliki hubungan yang sangat erat dan saling melengkapi. Uniknya untuk membuat canvas kita dapat menuliskannya dengan menggunakan javascript ataupun html 5 (tergantung dari preferensi masing-masing). Namun untuk kami pribadi membuat canvas lebih nyaman dituliskan langsung dijavascript agar lebih mudah pengelolaannya (semuannya berada di file javascript).

Setup

Membuat canvas di html

kode yang digunakan untuk membuat canvas di html adalah

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

Kita dapat menambahkan attribut lain seperti “style” atau “class” pada canvas diatas layaknya html syntax umumnya.  Membuat canvas seperti ini lebih mudah karena tidak diperlukan javascript.

Membuat canvas di javascript

opsi kedua adalah membuat canvas dengan javascript. Keuntungannya adalah kita murni menggunakan “javascript” sehingga mudah untuk dikelola. Untuk mendefinisikan style ataupun size dari canvas kitapun juga harus menuliskannya melalui javascript. Berikut ini adalah kode untuk membuat canvas melalui javascript

// membuat canvas
var canvas = document.createElement('canvas');
canvas.height = 500;
canvas.width = 500;
document.body.appendChild(canvas);

hasilnya akan sama dengan membuat canvas pada html (syntax html). Jangan lupa untuk memanggil file javascript diatas sebelum </body> jangan diletakan di awal html karena nantinnya ada beberapa object yang harus dihandle setelah dom diload.

Kita tidak dapat menuliskan sesuatu diantara syntax <canvas> dan </canvas> tetapi seluruh kegiatan yang akan memasukan sesuatu pada canvas /  melukis pada canvas harus dilakukan di javascript. Pertama kita harus mengakses canvas tersebut dan menggambil nilai contexnya. Contex adalah suatu object yang memberikan akses terhadap lingkungan. Dalam hal ini lingkungan yang dimaksud adalah lingkungan canvas tersebut. Melalui contex inilah kita akan membuat tulisan, membuat lingkaran/segitiga/line dan lain sebagainnya.

Mendapatkan nilai contex

Langkah pertama adalah mengakses elemen canvas pada dom dan mendapatkan nilai contex dari canvas tersebut.
NB : kami membuat canvas dengan menggunakan javascript (meski pada ahirnya canvas tersebut juga akan diteruskan ke dom dengan appendChild).

// membuat canvas
var canvas = document.createElement('canvas');
canvas.height = 500;
canvas.width = 500;
document.body.appendChild(canvas);

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

Menuliskan huruf / kalimat

selanjutnya untuk membuat tulisan pada canvas kita harus mendefinisikan font dan ukuran font melalui variable contex.font = “”. Selanjutnya , dengan menggunakan fungsi contex.fillText() kita akan mendefinisikan text apa yang hendak kita tulis beserta posisinya(x, y) dalam canvas. Contohnya seperti berikut ini

// membuat tulisan
contex.font = "50px arial";
contex.fillText("degananda ferdian ", 0, 100);

kode diatas jika dieksekusi akan menghasilkan tampilan sebagai berikut

Membuat lingkaran

untuk membuat lingkaran kita akan memanfaatkan fungsi contex.arc() yang dikombinasikan dengan fungsi contex.stroke() yang berfungsi untuk memberikan stroke / garis di sekeliling object lingakaran. Sedangkan arc sendiri untuk mendefinisikan object lingkaran tersebut mulai dari radiusnya, ukurannya dan posisinya. Contohnya adalah sebagai berikut

contex.beginPath();
contex.arc(100,100,100,0,50);
contex.stroke();
contex.closePath();

kode diatas jika dieksekusi akan menghasilkan seperti berikut ini

Membuat persegi / persegi panjang

Fungsi yang digunakan untuk membuat persegi panjang adalah contex.fillRect(). Terdapat empat parameter yang dibutuhkan yaitu posisi x, posisi y, panjang dan tinggi. Contoh kode untuk membuat persegi / persegi panjang adalah sebagai berikut ini

// membuat persegi
contex.fillRect(0,0,500,50);

kota diatas jika dieksekusi akan menghasilkan seperti berikut ini

TIPS

karena setiap object (lingkaran/persegi/tulisan/dsb) memiliki konfigurasi masing – masing. Artinnya parameter yang dibutuhkan berbeda-beda gunakanlah editor yang menyediakan auto complete terhadap suatu syntax. Kami menggunakan visual studio code sehingga akan memberikan informasi terkait parameter-parameter apa saja yang harus dimasukan kedalam suatu fungsi. Hal ini akan memudahkan kita dalam membuat object dalam canvas.