HTML5 hadir dengan teknologi canvas yang memungkinkan kita untuk menggambar bentuk dengan format vector. Kita dapat membuat gambar bentuk langsung pada canvas HTML menggunakan canvas API. Ada banyak library JavaScript yang dapat kita gunakan untuk memudahkan pekerjaan dengan canvas. Tapi pada tutorial kali ini kita akan berkenalan dan belajar dengan API canvas untuk menggambar objek 2D pada aplikasi Tizen web mobile.
<h3>Pendahuluan</h3>
Buat project baru di Tizen IDE dengan mengakses menu <strong>File &gt; New &gt; Tizen Web Project</strong>. Pada tab <strong>Template</strong>, pilih <strong>template Basic</strong>. Lalu klik tombol <strong>Finish</strong>.

Buka file index.html, kemudian hapus semua konten yang ada di dalam tag body lalu masukkan kode html berikut:
<pre>&lt;canvas id=<em>"demoCanvas"</em> width=<em>"360"</em> height=<em>"640"</em>&gt;&lt;/canvas&gt;</pre>
Kita menambahkan tag &lt;canvas&gt; untuk tempat kita menggambar objek.

Kemudian tambahkan tag &lt;script&gt; di bagian bawah canvas beserta kode JavaScript berikut:
<pre>&lt;script&gt;
       <strong>var</strong> canvas = document.getElementById('demoCanvas');

       <strong>var</strong> circle = canvas.getContext('2d');
       circle.arc(100, 100, 100, 0, 2 * Math.PI);

       circle.fillStyle = "yellow";
       circle.fill();
&lt;/script&gt;</pre>
Pada kode di atas, kita membuat variabel canvas untuk menyimpan objek canvas. Kita kemudian membuat variabel circle untuk membuat objek lingkaran.

Method <strong>arc</strong> adalah method yang kita gunakan untuk menggambar bentuk lingkaran. Parameter pertama dan kedua adalah koordinat x dan y dari pusat lingkaran. Parameter ketiga adalah nilai panjang <strong>radius</strong> lingkaran. Parameter keempat adalah <strong>sudut awal</strong> untuk mulai menggambar dan parameter kelima diisi oleh nilai <strong>sudut akhir</strong> menggambar. Nilai sudut yang kita gunakan adalah dalam format <strong>radian</strong>, bukan derajat. Satu putaran penuh lingkaran bernilai 360 derajat yang dalam nilai radian adalah <strong>2 * Math.PI</strong>.

Properti <strong>fillStyle</strong> kita isi dengan kode warna untuk mengisi objek lingkaran. Untuk mengisi objek lingkaran dengan warna, kita gunakan method fill().

Jalankan project pada Tizen Web Simulator, maka seharusnya pada simulator akan nampak lingkaran berwarna kuning seperti pada gambar berikut:

<img class="alignnone size-full wp-image-11679" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/08/1.png" alt="1" width="523" height="399" />

Sekarang tambahkan kode berikut setelah kode terakhir di atas:
<pre>circle.strokeStyle = "red";
circle.lineWidth = 5;
circle.stroke();</pre>
Kode di atas akan membuat garis outline berwarna merah pada objek lingkaran dengan lebar garis sebesar 5 piksel.

<img class="alignnone size-full wp-image-11680" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/08/2.png" alt="2" width="526" height="252" />
<h2>Membuat Objek Persegi</h2>
Untuk membuat objek persegi atau persegi panjang, kita gunakan method rect().
<pre>var rect = canvas.getContext('2d');
rect.rect(10, 10, 200, 200);

rect.fillStyle = "yellow";
rect.fill();

rect.strokeStyle = "red";
rect.lineWidth = 5;
rect.stroke();</pre>
Sama seperti objek yang kita buat sebelumnya, untuk mengisi objek dengan warna kita set properti fillStyle dan render dengan method fill(). Begitu pula untuk mengeset outline objek kita gunakan method stroke().

<img class="alignnone size-full wp-image-11681" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/08/3.png" alt="3" width="530" height="286" />

Kita juga dapat menggunakan method fillRect() untuk membuat objek persegi yang langsung terisi oleh warna. Warna default yang digunakan untuk mengisi objek adalah hitam. Untuk mengubah warna isi objek, kita set terlebih dahulu properti fillStyle sebelum memanggil method fillRect(). Hal yang sama juga dapat kita lakukan untuk membuat objek yang langsung memiliki garis outline, dengan memanggil method strokeRect().
<pre><strong>var</strong> rect = canvas.getContext('2d');

rect.fillStyle = "yellow";
rect.fillRect(10, 10, 150, 150);

rect.strokeStyle = "red";
rect.lineWidth = 5;
rect.strokeRect(170, 10, 150, 150);</pre>
<img class="alignnone size-full wp-image-11682" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/08/4.png" alt="4" width="531" height="269" />
<h2>Membuat Objek Kustom</h2>
Kita juga dapat menggambar objek lain yang bentuknya kustom dengan memanfaatkan beberapa API lain seperti lineTo(), arcTo(), dan bezierCurveTo(). Sebagai contoh, kita akan menggambar objek seperti berikut:

<img class="alignnone size-full wp-image-11683" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/08/5.jpg" alt="5" width="494" height="486" />

Maka cara menggambarnya adalah seperti kode berikut:
<pre><strong>var</strong> check = canvas.getContext('2d');
check.beginPath();
check.moveTo(0, 180);
check.lineTo(60, 120);
check.lineTo(120, 180);
check.lineTo(300, 0);
check.lineTo(360, 60);
check.lineTo(120, 300);
check.lineTo(0, 180);

check.fillStyle = "green";
check.fill();</pre>
Hasilnya bila kita jalankan di Web Simulator, akan tampil objek seperti berikut:

<img class="alignnone size-full wp-image-11684" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/08/5.png" alt="5" width="531" height="342" />

Pertama-tama kita memanggil method beginPath() untuk memulai/mereset gambar. Kemudian kita pindahkan pointer ke koordinat 0,180 menggunakan method moveTo(). Kita mulai membuat garis dari titik tersebut ke titik-titik selanjutnya menggunakan method lineTo(x,y). Seperti pada gambar ilustrasi di awal, saya sudah membuat sketsa objek dengan membagi area dengan grid yang lebarnya mudah dibagi, sehingga penentuan koordinat untuk membuat garis-garisnya menjadi lebih mudah.

Sekarang dapatkan Kamu membuat objek seperti gambar berikut:

<img class="alignnone size-full wp-image-11685" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/08/6.png" alt="6" width="529" height="380" />
<h2>Membuat Garis Lengkung</h2>
Ada beberapa API untuk membuat garis lengkung, diantaranya arc() seperti yang sudah kita gunakan di awal, bezierCurveTo() dan arcTo().
<h3>bezierCurveTo()</h3>
Method ini menggunakan 4 buat titik, dua titik sebagai titik awal dan akhir kurva, dan dua titik sebagai control untuk melengkungkan kurva.

<img class="alignnone size-full wp-image-11687" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/08/7.png" alt="7" width="302" height="152" />

Pada ilustrasi di atas, kita lihat ada 4 buah titik. Titik 20,20 adalah titik awal garis, dan 200,20 adalah titik akhir garis. Adapun titik 20,100 dan titik 200,100 menjadi titik kontrol yang menarik garis kurva seperti magnet. Untuk membuat garis seperti di atas, kita buat kode program seperti berikut:
<pre><strong>var</strong> curve = canvas.getContext("2d");
curve.beginPath();
curve.moveTo(20,20);
curve.bezierCurveTo(20,100, 200,100, 200,20);

curve.lineWidth = 5;
curve.strokeStyle = "yellow";
curve.stroke();</pre>
Kita menggunakan method moveTo() untuk memulai titik. Kemudian method bezierCurveTo() menerima 6 buah parameter, dengan parameter 1 dan 2 untuk titik control pertama, parameter 3 dan 4 untuk titik control kedua, dan dua parameter terakhir untuk titik akhir garis. Hasilnya dapat dilihat pada gambar berikut:

<img class="alignnone size-full wp-image-11688" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/08/7a.png" alt="7a" width="535" height="255" />
<h3>quadraticCurveTo()</h3>
Mirip method bezierCurveTo(), method quadraticCurveTo() membuat garis kurva dengan memanfaatkan titik kontrol. Hanya saja titik kontrol yang digunakan hanya satu.

<img class="alignnone size-full wp-image-11689" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/08/8.png" alt="8" width="302" height="152" />

Untuk membuat garis kurva seperti gambar di atas, kita tulis kode seperti berikut:
<pre><strong>var</strong> curve = canvas.getContext("2d");
curve.beginPath();
curve.moveTo(20,20);
curve.quadraticCurveTo(20,100, 200,20);

curve.lineWidth = 5;
curve.strokeStyle = "yellow";
curve.stroke();</pre>
Hasilnya seperti dapat kita lihat pada gambar berikut:

<img class="alignnone size-full wp-image-11690" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/08/8a.png" alt="8a" width="540" height="258" />
<h3>arcTo()</h3>
Method actTo() membuat garis lengkung sepanjang seperempat lingkaran dari dua titik tangen. Lebih jelasnya lihat ilustrasi gambar berikut:

<img class="alignnone size-full wp-image-11691" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/08/9.png" alt="9" width="200" height="130" />

Untuk membuat garis seperti di atas, kita tulis kode seperti berikut:
<pre><strong>var</strong> curve = canvas.getContext("2d");
curve.beginPath();
curve.moveTo(20,20);
curve.lineTo(100,20);
curve.arcTo(150,20, 150,70, 50);
curve.lineTo(150,120);

curve.strokeStyle = "yellow";
curve.lineWidth = 5;
curve.stroke();</pre>
Method arcTo() menerima 5 parameter. Parameter 1 dan 2 untuk titik x1,y1. Parameter 3 dan 4 untuk titik x2,y2. Parameter terakhir untuk panjang radius lingkaran. Bila kita jalankan kode di atas hasilnya sama seperti ilustrasi di atas:

<img class="alignnone size-full wp-image-11692" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/08/10.png" alt="10" width="528" height="238" />
<h2>Memanipulasi Posisi, Rotasi, dan Skala</h2>
<h3>translate()</h3>
Method ini kita gunakan untuk menggeser canvas ke koordinat tertentu. Perhatikan kode berikut:
<pre><strong>var</strong> rect = canvas.getContext("2d");
rect.fillStyle = "yellow";

rect.fillRect(10,10,100,100);
rect.translate(150,80);
rect.fillRect(10,10,100,100);</pre>
Hasil dari kode di atas adalah seperti berikut:

<img class="alignnone size-full wp-image-11693" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/08/11.png" alt="11" width="531" height="255" />

Perhatikan bahwa method translate() berlaku sebelum pembuatan gambar. Method ini hanya berlaku untuk fillRect() yang kedua dan tidak yang pertama.
<h3>rotate()</h3>
Method rotate() digunakan untuk memutar canvas sehingga objek yang ada didalamnya ikut berputar. Perhatikan kode berikut:
<pre><strong>var</strong> rect = canvas.getContext("2d");
rect.fillStyle = "yellow";

// kotak pertama          
rect.fillRect(10, 10, 100, 10);

rect.rotate(45 * Math.PI/180);
//kotak kedua
rect.fillRect(10,10,100,10);

rect.rotate(-45 * Math.PI/180);
// kotak ketiga
rect.fillRect(150, 10, 100, 10);</pre>
Hasil dari kode di atas seperti berikut:

<img class="alignnone size-full wp-image-11694" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/08/12.png" alt="12" width="538" height="246" />

Kotak yang pertama dibuat adalah kotak mendatar yang ada paling kiri atas. Kotak kedua adalah kotak yang miring, karena sebelum kotak dibuat, terlebih dulu kita memanggil method rotate() dengan nilai 45 derajat. Kotak ketiga adalah kotak mendatar sebelah kanan. Kotak ketiga tidak miring seperti kotak kedua karena kita sebelumnya telah memutar kembali canvas ke -45 derajat. Perhatikan bahwa nilai rotate adalah nilai dalam radian. Bila kita ingin memasukkan nilai dalam derajat, maka kalikan nilai derajat yang diinginkan dengan <strong>Math.PI/180</strong>.
<h3>scale()</h3>
Method ini mengubah skala nilai dari hitungan sebelumnya. Perhatikan kode berikut:
<pre><strong>var</strong> rect = canvas.getContext("2d");
rect.strokeStyle = "yellow";
rect.lineWidth = 3;

rect.strokeRect(10, 10, 100, 100);
rect.scale(2, 2);
rect.strokeRect(10, 10, 100, 100);</pre>
Hasil dari kode di atas seperti gambar berikut:

<img class="alignnone size-full wp-image-11695" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/08/13.png" alt="13" width="530" height="286" />

Kode di atas menghasilkan dua buah persegi dan persegi kedua skalanya naik dua kali lipat secara vertikal dan horizontal. Perhatikan pula bahwa yang meningkat dua kali lipat tidak hanya ukuran persegi, tapi juga lebar garis dan jarak dari titik koordinat 0,0.

Menggambar Grafis 2D pada Aplikasi Tizen Menggunakan HTML Canvas API

GenAI Video Fest adalah ajang kompetisi video kreatif yang diselenggarakan oleh CODEPOLITAN bekerjasama dengan Alibaba Cloud.

Kami menantang kreator, tech-enthusiast, dan siapa saja untuk mendobrak batas imajinasi menggunakan teknologi Generative AI terbaru. Di sini, kamu wajib menggunakan WAN Model Studio dari Alibaba Cloud sebagai tools utama untuk menghasilkan karya videomu (bisa dikombinasikan dengan tools editing lainnya).

Tunjukkan pada dunia bagaimana teknologi dan kreativitas bisa bersatu menciptakan karya visual yang berdampak!

Kategori Kompetisi
Pilih satu dari empat tema besar ini untuk karyamu:
* Humanity (Kemanusiaan): Cerita yang menyentuh hati, sosial, dan kepedulian antar sesama.
* Sports (Olahraga): Energi, semangat juang, dan dinamika dunia olahraga.
* Entertainment (Hiburan): Komedi, musik, video klip, atau parodi yang menghibur.
* Science (Sains): Visualisasi masa depan, teknologi, alam semesta, atau penemuan ilmiah.

Total Prize Pool senilai Rp 250.000.000 menunggu para pemenang!
* Top Winners Rewards: Uang Tunai, Alibaba Cloud Credits (hingga $500), Merchandise Eksklusif, dan SWAG CODEPOLITAN.
* Lucky Draw Event: Kesempatan menang hadiah tambahan bagi peserta yang beruntung.
* Massive Exposure: Karya terbaik akan di-highlight di media sosial CODEPOLITAN, Alibaba Cloud, dan channel industri kreatif lainnya.
* Special Access (Khusus Alumni RuangAI): Dapatkan 2 Token untuk klaim Kelas Spesialisasi di RuangAI secara gratis.

Jangan sampai ketinggalan tanggal penting ini:
* Pendaftaran & Submission: 23 Desember 2024 - 23 Januari 2025
* Penjurian (Judging Phase): 24 - 26 Januari 2025
* Pengumuman Pemenang: 27 Januari 2025

Cara Ikutan:
1. Daftar: Klik tombol "Daftar Sekarang" dan pastikan kamu punya akun RuangAI.
2. Join Discord: Masuk ke server Discord komunitas untuk info teknis dan diskusi.
3. Create: Buat video kreatifmu menggunakan WAN Model Studio (Alibaba Cloud) sesuai kategori pilihan.
4. Upload & Submit: Unggah videomu ke media sosial (IG/TikTok/YouTube) dan submit link karyamu di halaman submission RuangAI.

Ikuti kompetisi video Generative AI terbesar dari CODEPOLITAN dan Alibaba Cloud! Gunakan teknologi WAN Model Studio untuk menyulap ide liarmu menjadi visual memukau. Rebut total hadiah senilai Rp 250.000.000!

GenAI Video Fest

Beasiswa Basic Cybersecurity adalah program inisiatif dari JagoanSiber yang dirancang untuk membuka wawasan masyarakat luas tentang dunia keamanan digital. Program ini hadir untuk menjawab kebutuhan talenta keamanan siber yang tinggi, dimulai dengan membangun pemahaman fundamental yang kokoh.

Program ini berbentuk Kelas Online Belajar Mandiri (Self-Paced Learning) berbasis video. Peserta diberikan keleluasaan penuh untuk mengakses materi kapan saja dan di mana saja tanpa terikat jadwal, sehingga sangat fleksibel bagi pelajar, mahasiswa, maupun pekerja profesional.

Kelebihan utama program ini adalah aksesnya yang 100% GRATIS dan terbuka untuk siapa saja tanpa syarat latar belakang IT. Peserta akan dibimbing langsung oleh Mahrus Qusaery, seorang praktisi keamanan siber berpengalaman, yang akan mengupas tuntas materi dasar yang krusial.

Program beasiswa kelas online gratis untuk mempelajari dasar keamanan siber dari nol. Belajar mandiri berbasis video langsung dari praktisi ahli, Mahrus Qusaery.

Menggambar Grafis 2D pada Aplikasi Tizen Menggunakan HTML Canvas API

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

Micro Python, Bahasa Python untuk Pemrograman Mikrokontroller

CodeIgniter PHP Framework Sekarang Punya Rumah Baru

Ikuti Giveaway dari CoderTalk dan Menangkan 6 Hadiah Menarik

Membuat Website Statis Gratis dengan Memanfaatkan Github Pages

Cara Install Node.js

Digital Input Output pada Arduino