JavaScript Academy · Pelajaran

Menyiapkan Konteks Canvas

Dapatkan dan konfigurasikan konteks rendering 2D.

Menyiapkan Konteks Canvas adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa Itu Antarmuka Pemrograman Canvas

Antarmuka Pemrograman Canvas memungkinkan Anda menggambar grafik 2D dengan JavaScript ke elemen <canvas>. Anda mendapatkan permukaan gambar yang terdiri dari piksel serta sekumpulan perintah untuk melukis bentuk, gambar, dan teks.

Markup-nya hanya berupa satu tag <canvas>.
Semua gambar dibuat dalam JavaScript melalui objek konteks.

<canvas id="board" width="320" height="200"></canvas>

Mendapatkan Konteks

Panggil getContext('2d') pada elemen canvas untuk mendapatkan CanvasRenderingContext2D. Setiap perintah menggambar dijalankan melalui objek ini.

const canvas = document.getElementById("board");
const ctx = canvas.getContext("2d");
console.log(ctx.constructor.name); // CanvasRenderingContext2D

Sistem Koordinat

Titik asal (0, 0) berada di sudut kiri atas. Nilai X bertambah ke kanan, sedangkan Y bertambah ke bawah. Canvas berukuran 320x200 memiliki sudut kanan bawah di (320, 200).

Atribut Lebar dan Tinggi

Atribut HTML width dan height menetapkan ukuran buffer gambar dalam piksel. Nilai bawaannya adalah 300x150 jika tidak dicantumkan. Menetapkan atribut tersebut dalam JS juga menghapus isi canvas.

const canvas = document.getElementById("board");
canvas.width = 400;
canvas.height = 300;
console.log(canvas.width, canvas.height); // 400 300

Ukuran CSS vs Ukuran Buffer

width/height CSS meregangkan canvas di layar, tetapi NOT mengubah buffer piksel. Jika nilainya berbeda dari atribut, gambar akan tampak buram atau meregang. Samakan keduanya agar keluaran tetap tajam.

canvas.width = 400;  // buffer pixels
canvas.style.width = "400px"; // display size — match it

Menangani Layar dengan DPI Tinggi

Pada layar berkerapatan tinggi, devicePixelRatio sering kali bernilai 2. Perbesar buffer dan perkecil konteks agar garis tetap tajam.

const dpr = window.devicePixelRatio || 1;
canvas.width = 400 * dpr;
canvas.height = 300 * dpr;
canvas.style.width = "400px";
canvas.style.height = "300px";
ctx.scale(dpr, dpr);

Menetapkan Gaya Isian dan Garis

Keadaan gambar tersimpan pada konteks. fillStyle menetapkan warna isian, sedangkan strokeStyle menetapkan warna garis luar. Keduanya menerima string warna CSS apa pun.

ctx.fillStyle = "#3498db";
ctx.strokeStyle = "rgba(231, 76, 60, 0.8)";
ctx.lineWidth = 4;

Gambar Pertama Anda

Setelah konteks siap, Anda dapat langsung menggambar. fillRect(x, y, w, h) menggambar persegi panjang berisi menggunakan fillStyle saat ini.

const ctx = document.getElementById("board").getContext("2d");
ctx.fillStyle = "tomato";
ctx.fillRect(20, 20, 150, 80);

Menghapus Isi Canvas

clearRect(x, y, w, h) menghapus wilayah persegi panjang hingga kembali transparan. Menghapus seluruh buffer biasanya menjadi langkah pertama pada setiap bingkai animasi.

ctx.clearRect(0, 0, canvas.width, canvas.height);

Menyimpan dan Memulihkan Keadaan

save() memasukkan gaya/transformasi saat ini ke dalam tumpukan, sedangkan restore() mengeluarkannya kembali. Dengan demikian, perubahan sementara tetap terisolasi.

ctx.save();
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 50, 50);
ctx.restore(); // fillStyle reverts to previous value

Deteksi Fitur

Lindungi kode dari peramban yang sangat lama dengan memeriksa apakah getContext tersedia sebelum menggunakannya.

const canvas = document.getElementById("board");
if (canvas.getContext) {
  const ctx = canvas.getContext("2d");
  // safe to draw
} else {
  console.log("Canvas not supported");
}

Uji Cepat

Uji pemahaman Anda tentang penyiapan canvas.

Ringkasan: Penyiapan Canvas

Anda telah mempelajari cara mengambil canvas, memanggil getContext('2d'), memahami titik asal di kiri atas, menetapkan ukuran buffer dan CSS, menangani DPI tinggi dengan devicePixelRatio, serta mengatur fillStyle/strokeStyle. Selanjutnya: menggambar bentuk dan jalur.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menyiapkan Konteks Canvas” gratis?

Ya — teks lengkap “Menyiapkan Konteks Canvas” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Menyiapkan Konteks Canvas”?

Dapatkan dan konfigurasikan konteks rendering 2D. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Menyiapkan Konteks Canvas” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke JavaScript Academy