Canvas Dasar: Menggambar dengan Kode

Kenapa Canvas Ada

Kadang antarmuka butuh lebih dari sekadar teks dan tombol: grafik statistik, game sederhana, papan tanda tangan digital, atau visualisasi data. Elemen HTML biasa terlalu kaku untuk itu. <canvas> adalah kanvas kosong (papan gambar digital) tempat kamu melukis piksel demi piksel dengan JavaScript, dan browser me-render-nya dengan sangat cepat memakai GPU.

Menyiapkan Kanvas

<canvas id="papan" width="300" height="200"></canvas>

const kanvas = document.querySelector("#papan");
const ctx = kanvas.getContext("2d"); // "kuas" untuk menggambar

Penting: atribut width dan height menentukan resolusi gambar, bukan CSS. Kalau kamu mengatur ukuran lewat CSS saja, gambarnya akan melar dan buram. Selalu set atributnya langsung.

Contoh 1: Kotak dan Warna

ctx.fillStyle = "violet"; // pilih warna cat
ctx.fillRect(20, 30, 100, 60); // x, y, lebar, tinggi

ctx.strokeStyle = "darkviolet"; // warna garis tepi
ctx.lineWidth = 4;
ctx.strokeRect(140, 30, 100, 60); // hanya bingkai, tanpa isi

Koordinat (0, 0) ada di pojok KIRI ATAS, sumbu Y bertambah ke bawah. Ini kebalikan dari grafik matematika biasa, dan sumber kebingungan nomor satu bagi pemula.

Contoh 2: Lingkaran dan Garis

// lingkaran: arc(x, y, radius, sudutAwal, sudutAkhir)
ctx.fillStyle = "gold";
ctx.beginPath();
ctx.arc(80, 130, 40, 0, Math.PI * 2); // lingkaran penuh
ctx.fill();

// garis bebas
ctx.strokeStyle = "teal";
ctx.lineWidth = 5;
ctx.beginPath();
ctx.moveTo(160, 100); // angkat kuas ke titik awal
ctx.lineTo(260, 160); // tarik garis
ctx.stroke(); // baru digambar!

Aturannya: beginPath() memulai bentuk baru, perintah seperti arc dan lineTo hanya merencanakan, dan fill() atau stroke() yang benar-benar menggambar. Lupa memanggil fill/stroke berarti tidak ada yang muncul, bug klasik pemula.

Contoh 3: Teks dan Gambar Sederhana

ctx.font = "bold 24px sans-serif";
ctx.fillStyle = "#333";
ctx.fillText("Halo Canvas!", 20, 190);

// wajah smiley sederhana
ctx.fillStyle = "gold";
ctx.beginPath(); ctx.arc(250, 60, 30, 0, Math.PI * 2); ctx.fill();
ctx.fillStyle = "black";
ctx.beginPath(); ctx.arc(240, 52, 5, 0, Math.PI * 2); ctx.fill();
ctx.beginPath(); ctx.arc(260, 52, 5, 0, Math.PI * 2); ctx.fill();
ctx.strokeStyle = "black"; ctx.lineWidth = 3;
ctx.beginPath(); ctx.arc(250, 62, 15, 0.3, Math.PI - 0.3); ctx.stroke();

Dengan beberapa lingkaran dan busur saja kamu sudah bisa menggambar wajah. Inilah fondasi game 2D: karakter game hanyalah bentuk-bentuk seperti ini yang digambar ulang tiap frame.

Jebakan Umum

Pertama, canvas itu seperti lukisan cat: sekali digambar, bentuknya menjadi piksel dan tidak bisa "dipindah" seperti elemen DOM. Untuk animasi, kamu harus menghapus (clearRect) lalu menggambar ulang semuanya. Kedua, teks dan bentuk yang digambar tidak otomatis responsif: kalau kanvas di-resize, gambar lama ikut melar. Ketiga, menggambar ribuan objek tiap frame tanpa strategi (misalnya tanpa membatasi area gambar) bisa membuat animasi patah-patah.

Catatan teknis: Selain context "2d", canvas juga mendukung "webgl" untuk grafik 3D berperforma tinggi (dipakai game engine dan pustaka seperti Three.js). Konsep koordinat dan menggambar ulang per frame yang kamu pelajari di sini berlaku juga di sana.