Dasar-Dasar HTML5 Canvas: Memulai Game 2D

HTML5 Canvas adalah fitur kuat untuk me-render grafis 2D di browser, menjadikannya titik awal yang sempurna untuk pengembangan game berbasis web. Mari kita pelajari metode dasar yang akan sering Anda gunakan.

1. Menyiapkan Context (Konteks)

Sebelum bisa menggambar, Anda harus mengambil elemen canvas dan konteks rendering 2D-nya:

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

2. Menggambar Persegi Panjang (fillRect & strokeRect)

Persegi panjang adalah bentuk paling dasar. fillRect menggambar bentuk berserta isinya, sedangkan strokeRect hanya menggambar garis luarnya saja.

ctx.fillStyle = 'blue'; // Menentukan warna isian
// posis_x, posisi_y, lebar, tinggi
ctx.fillRect(10, 10, 50, 50); // Kotak biru 50x50 pada posisi x:10, y:10

ctx.strokeStyle = 'red'; // Menentukan warna perbatasan outline
ctx.strokeRect(70, 10, 50, 50); // Membuat kotak garis merah

3. Menggambar Lingkaran dan Arc (arc)

Untuk menggambar lingkaran, Anda harus membuat lintasan (path) menggunakan metode arc(x, y, radius, startAngle, endAngle, counterclockwise). Perhatikan bahwa perhitungan sudut menggunakan metrik ukur radian, bukan derajat.

• x, y: Titik tengah pusat lingkaran.
• radius: Jari-jari lingkaran/kurva.
• startAngle, endAngle: Titik awal dan akhir derajat lengkungan dalam hitungan radian (Lingkaran penuh adalah 2 * Math.PI).

ctx.beginPath(); // Memulai lintasan jalur gambar baru
// x: 100, y: 75, radius (jari-jari): 50
// startAngle: 0, endAngle: 2 * Math.PI (lingkaran penuh / 360 derajat)
ctx.arc(100, 75, 50, 0, 2 * Math.PI); 
ctx.fillStyle = 'yellow';
ctx.fill();

// Menggambar setengah lingkaran (hanya garis lintasan lengkung)
ctx.beginPath();
ctx.arc(200, 75, 40, 0, Math.PI); // Setengah lingkaran (180 derajat)
ctx.strokeStyle = 'green';
ctx.stroke();

4. Warna Lanjutan dan Gradien Linear (createLinearGradient)

Anda dapat mengatur transparansi dengan nilai RGBA, dan juga membuat transisi gradien warna menggunakan createLinearGradient.

// Mengatur transparansi warna 50%
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; // Merah yang 50% transparan

// Membuat Gradien Linear: createLinearGradient(x0, y0, x1, y1)
// Parameter menentukan titik mula (x0, y0) sampai selesai (x1, y1)
const gradient = ctx.createLinearGradient(0, 0, 150, 0); // Gradien secara horizontal
gradient.addColorStop(0, 'red');      // Warna awal di offset 0
gradient.addColorStop(0.5, 'yellow'); // Warna tengah di offset 0.5
gradient.addColorStop(1, 'green');    // Warna akhir di offset 1

// Menerapkan objek gradien kepada style sebelum digambar
ctx.fillStyle = gradient;
ctx.fillRect(10, 150, 150, 50);

5. Menampilkan Teks Lanjutan (fillText, textAlign, textBaseline)

Menulis teks itu mudah, tapi tahukah Anda bisa mengatur perataan horizontal (align) maupun vertikal (baseline)?

ctx.font = '24px Arial'; // Menentukan tipe font dan ukuran
ctx.fillStyle = 'white'; // Menentukan warna text

// Perataan Horizontal teks (left, center, right, start, end)
ctx.textAlign = 'center'; 

// Perataan Vertikal / titik pangkal vertikal (top, middle, bottom, alphabetic, dll)
ctx.textBaseline = 'middle'; 

// teks yang ditampilkan, posisi_x, posisi_y
ctx.fillText('Teks Rata Tengah / Center', canvas.width / 2, canvas.height / 2);