HTML Academy · Pelajaran

Menyiapkan Canvas dan Konteks 2D

Buat elemen canvas dan dapatkan konteks perenderan 2D.

Menyiapkan Canvas dan Konteks 2D adalah pelajaran HTML 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 HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

Elemen canvas

Elemen <canvas> adalah permukaan bitmap yang dapat digambar di peramban:

<canvas id="myCanvas" width="800" height="400">
  <!-- Fallback for browsers without canvas support -->
  <p>Your browser does not support HTML5 Canvas.</p>
</canvas>

Atribut Lebar dan Tinggi

Selalu tetapkan dimensi canvas melalui atribut HTML, bukan CSS:

<!-- CORRECT: set intrinsic size via attributes -->
<canvas width="800" height="400"></canvas>

<!-- WRONG: CSS changes display size but not canvas resolution -->
<canvas style="width: 800px; height: 400px;"></canvas>
<!-- This stretches a default 300x150 canvas to 800x400
     Result: blurry graphics -->

Mendapatkan Konteks 2D

Dapatkan konteks perenderan 2D untuk menggambar:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// ctx is a CanvasRenderingContext2D object
// All drawing operations are methods on ctx

// Check browser support:
if (!canvas.getContext) {
  console.error('Canvas not supported');
}

Sistem Koordinat

Sistem koordinat canvas dimulai dari kiri atas:

// (0, 0) = top-left corner
// (width, 0) = top-right
// (0, height) = bottom-left
// (width, height) = bottom-right

// For a 800x400 canvas:
// x increases left → right (0 to 800)
// y increases top → bottom (0 to 400)
//
// Example: draw at center:
ctx.fillRect(400, 200, 10, 10);  // centered dot

Status Canvas

Canvas memiliki status gambar yang dapat disimpan dan dipulihkan:

ctx.save();       // push current state onto a stack

// Change state:
ctx.fillStyle = 'red';
ctx.globalAlpha = 0.5;

// Draw with modified state...
ctx.fillRect(100, 100, 200, 200);

ctx.restore();    // pop state: back to pre-save settings

Menghapus Canvas

Hapus seluruh canvas sebelum menggambar ulang (untuk animasi):

// Clear entire canvas:
ctx.clearRect(0, 0, canvas.width, canvas.height);

// Or with a background color:
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);

fillStyle dan strokeStyle

Tetapkan warna untuk operasi pengisian dan goresan:

ctx.fillStyle = 'blue';                    // CSS color name
ctx.fillStyle = '#ff6600';                 // hex color
ctx.fillStyle = 'rgb(255, 100, 0)';       // rgb
ctx.fillStyle = 'rgba(255, 100, 0, 0.5)'; // rgba with alpha
ctx.fillStyle = gradient;                  // gradient object
ctx.fillStyle = pattern;                   // pattern object

ctx.strokeStyle = '#333333';               // border color

lineWidth dan Properti Gaya Lainnya

Properti gaya goresan dan garis:

ctx.lineWidth = 4;           // stroke width in pixels
ctx.lineCap = 'round';       // butt | round | square
ctx.lineJoin = 'round';      // miter | round | bevel
ctx.setLineDash([5, 3]);     // dashed line: 5px dash, 3px gap
ctx.globalAlpha = 0.8;       // transparency for all drawing
ctx.globalCompositeOperation = 'multiply'; // blend modes

Canvas HiDPI Responsif

Perbaiki canvas yang buram pada layar Retina/HiDPI:

function setupHiDPI(canvas, width, height) {
  const dpr = window.devicePixelRatio || 1;
  canvas.width = width * dpr;
  canvas.height = height * dpr;
  canvas.style.width = width + 'px';
  canvas.style.height = height + 'px';
  const ctx = canvas.getContext('2d');
  ctx.scale(dpr, dpr);  // scale all drawing
  return ctx;
}

Canvas vs SVG

Kapan memilih canvas atau SVG:

Canvas — bitmap, piksel demi piksel, cocok untuk gim, visualisasi data berukuran besar, dan pemrosesan gambar
SVG — vektor, dapat diskalakan, cocok untuk logo, ikon, diagram dengan elemen interaktif, dan aksesibilitas

Aksesibilitas Canvas

Canvas tidak memiliki aksesibilitas bawaan—tambahkan secara manual:

<canvas
  id="chart"
  width="800"
  height="400"
  aria-label="Bar chart showing Q1-Q4 revenue growth"
  role="img"
>
  <!-- Fallback for non-canvas browsers and screen readers -->
  <table><!-- accessible data table --></table>
</canvas>

Pemeriksaan Singkat

Apa cara yang benar untuk mendapatkan konteks gambar canvas?

Ikhtisar: Penyiapan Canvas

Hal-hal penting dalam penyiapan canvas:

Tetapkan lebar/tinggi melalui atribut HTML, bukan CSS
canvas.getContext('2d') — dapatkan konteks gambar
Asal di kiri atas (0,0); x→kanan, y→bawah
ctx.save() / ctx.restore() — pengelolaan status berbasis tumpukan
Skalakan berdasarkan devicePixelRatio untuk perenderan Retina yang tajam

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menyiapkan Canvas dan Konteks 2D” gratis?

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

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

Buat elemen canvas dan dapatkan konteks perenderan 2D. Kamu berlatih HTML 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 HTML Academy?

Tidak diperlukan pengalaman sebelumnya. HTML 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 Canvas dan Konteks 2D” 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 HTML Academy ini?

Ya. Setiap pelajaran HTML 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 HTML Academy