Canvas API Dasar

Pernah liat website portfolio yang background-nya bergerak partikel kayak galaksi? Atau game browser kayak agar.io yang main-stream zaman 2015? Atau…

Pernah liat website portfolio yang background-nya bergerak partikel kayak galaksi? Atau game browser kayak agar.io yang main-stream zaman 2015? Atau visualisasi data interaktif di NYTimes/Bloomberg? Itu semua jalan di Canvas API — elemen HTML yang ngasih lo "kanvas kosong" untuk gambar apapun via JavaScript. Tanpa Canvas, web cuma bisa nampilin elemen statis. Dengan Canvas, web jadi medium kreatif tanpa batas: game, animasi, generative art, data viz, bahkan editor gambar (Figma, Photoshop Web).

💡 Canvas vs SVG. Canvas = bitmap (raster pixel) — cocok buat banyak elemen + animasi cepet (game, partikel). SVG = vector — cocok buat ilustrasi yang scaling tajam (icon, logo, chart). Pilih sesuai use case: ribuan partikel = Canvas. UI element scalable = SVG.

Canvas adalah elemen HTML yang memungkinkan kamu menggambar grafik 2D langsung di browser menggunakan JavaScript. Berbeda dengan elemen HTML biasa yang deklaratif, canvas bersifat imperatif — kamu memberikan perintah langkah demi langkah untuk menggambar.

Membuat Elemen Canvas

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

Canvas punya atribut width dan height yang menentukan resolusi piksel. Jangan gunakan CSS untuk mengatur ukuran — itu hanya akan meng-stretch gambar.

Mendapatkan Context 2D

Untuk mulai menggambar, kamu perlu mendapatkan rendering context:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

getContext("2d") mengembalikan object CanvasRenderingContext2D yang punya semua method untuk menggambar.

Menggambar Persegi (fillRect & strokeRect)

// Persegi terisi warna
ctx.fillStyle = "#3498db";
ctx.fillRect(50, 50, 200, 100);
// fillRect(x, y, lebar, tinggi)

// Persegi hanya garis tepi
ctx.strokeStyle = "#e74c3c";
ctx.lineWidth = 3;
ctx.strokeRect(300, 50, 200, 100);

fillStyle — warna isi (bisa hex, rgb, rgba, nama warna)
strokeStyle — warna garis tepi
fillRect(x, y, w, h) — gambar persegi terisi
strokeRect(x, y, w, h) — gambar persegi outline saja

Menggambar Lingkaran dengan arc()

Canvas tidak punya method khusus untuk lingkaran. Kita gunakan arc() dalam sebuah path:

ctx.beginPath();
ctx.arc(300, 200, 80, 0, Math.PI * 2);
// arc(centerX, centerY, radius, startAngle, endAngle)
ctx.fillStyle = "#2ecc71";
ctx.fill();
ctx.strokeStyle = "#27ae60";
ctx.lineWidth = 4;
ctx.stroke();

beginPath() — mulai path baru (penting! tanpa ini, path lama akan ikut tergambar)
arc(x, y, r, start, end) — buat arc/lingkaran. Sudut dalam radian (bukan derajat)
Math.PI * 2 = 360 derajat = lingkaran penuh
fill() — isi path dengan warna
stroke() — gambar garis tepi path

Menggambar Garis

ctx.beginPath();
ctx.moveTo(50, 300);    // titik awal
ctx.lineTo(250, 350);   // garis ke titik ini
ctx.lineTo(150, 250);   // garis lanjutan
ctx.closePath();        // hubungkan kembali ke titik awal
ctx.strokeStyle = "#9b59b6";
ctx.lineWidth = 2;
ctx.stroke();

Menghapus Canvas dengan clearRect

// Hapus seluruh canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);

// Hapus area tertentu saja
ctx.clearRect(100, 100, 200, 200);

clearRect() sangat penting untuk animasi — kamu perlu menghapus frame sebelumnya sebelum menggambar frame baru.

Menggambar Teks

ctx.font = "bold 24px Arial";
ctx.fillStyle = "#2c3e50";
ctx.fillText("Halo Canvas!", 50, 50);

ctx.strokeStyle = "#e74c3c";
ctx.strokeText("Outlined Text", 50, 100);

Contoh Lengkap: Menggambar Pemandangan Sederhana

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// Langit
ctx.fillStyle = "#87CEEB";
ctx.fillRect(0, 0, 600, 250);

// Rumput
ctx.fillStyle = "#2ecc71";
ctx.fillRect(0, 250, 600, 150);

// Matahari
ctx.beginPath();
ctx.arc(500, 80, 50, 0, Math.PI * 2);
ctx.fillStyle = "#f1c40f";
ctx.fill();

// Rumah
ctx.fillStyle = "#e74c3c";
ctx.fillRect(100, 180, 150, 120);

// Atap
ctx.beginPath();
ctx.moveTo(80, 180);
ctx.lineTo(175, 100);
ctx.lineTo(270, 180);
ctx.fillStyle = "#c0392b";
ctx.fill();

Canvas adalah fondasi untuk semua yang akan kita pelajari selanjutnya — animasi, interaksi, dan bahkan game sederhana!

🎭 Analogi sehari-hari

Canvas = kertas gambar kosong + pensil/cat. HTML/CSS = template pre-printed (form, kartu undangan). Canvas = freedom total: gambar apapun, lo yang kontrol tiap pixel. Bedanya: HTML/CSS kasih elemen jadi (button, card), Canvas minta lo gambar manual tapi unlimited freedom buat creativity.

⚠️ Jebakan yang sering ditemui

Set ukuran via CSS (width: 100%) = stretch image jadi blur. Pakai atribut width/height di tag
Forget clearRect di animasi = gambar nempel terus, gak gerak
Gak pake requestAnimationFrame untuk animasi = jaggy. setInterval bukan cocok
Save state lupa restore (ctx.save() tanpa ctx.restore()) = transformation accumulate, bug aneh
High-DPI screens blur — butuh scale canvas by devicePixelRatio untuk retina display

TL;DR: Canvas = elemen HTML untuk gambar 2D imperatif via JS. Foundation: game browser, animasi, generative art, data viz, image editor. Pakai getContext("2d") → method fillRect/arc/beginPath → gambar. Ukuran via atribut, bukan CSS. Animasi pake requestAnimationFrame + clearRect. Canvas (bitmap, banyak elemen) vs SVG (vector, scalable UI).

Canvas API Dasar — Creative Web