Canvas & SVG HTML5
Grafis Web: Canvas vs SVG
HTML5 memiliki dua teknologi bawaan untuk menampilkan dan menggambar grafik 2D secara dinamis di dalam browser: HTML5 Canvas dan SVG (Scalable Vector Graphics).
1. HTML5 Canvas (<canvas>)
<canvas> adalah elemen kontainer berbasis piksel (raster/bitmap). Elemen ini sendiri hanya berupa area kosong, menggambar grafik di atasnya dilakukan menggunakan JavaScript.
Kegunaan Canvas:
- Game 2D/3D berbasis web.
- Visualisasi data dinamis dengan kinerja tinggi (seperti grafik saham real-time).
- Manipulasi piksel foto atau efek partikel.
Contoh Penggunaan Canvas:
<canvas id="myCanvas" width="400" height="200" style="border:1px solid #ccc;"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Menggambar Persegi Panjang Merah
ctx.fillStyle = "#ef4444";
ctx.fillRect(20, 20, 150, 100);
// Menggambar Lingkaran Biru
ctx.beginPath();
ctx.arc(280, 70, 50, 0, 2 * Math.PI);
ctx.fillStyle = "#3b82f6";
ctx.fill();
</script>
2. SVG (Scalable Vector Graphics)
SVG adalah format grafik berbasis vektor (persamaan matematika). Gambar SVG disusun menggunakan tag HTML/XML sehingga tidak akan pecah atau buram meskipun diperbesar (zoom) sampai tingkat berapa pun.
Kegunaan SVG:
- Logo website dan ikon UI.
- Diagram dan grafik vektor.
- Ilustrasi yang membutuhkan interaksi hover/klik dan animasi CSS.
Contoh Penggunaan SVG Langsung di HTML:
<svg width="200" height="200">
<!-- Lingkaran -->
<circle cx="100" cy="100" r="80" fill="#10b981" />
<!-- Teks di atas Lingkaran -->
<text x="100" y="105" font-size="20" fill="white" text-anchor="middle">SVG</text>
</svg>
Perbandingan HTML5 Canvas vs SVG
| Fitur | Canvas | SVG |
|---|---|---|
| Teknologi | Berbasis Piksel / Raster | Berbasis Vektor / XML |
| Penskalaan | Pecah jika diperbesar tanpa redrawn | Selalu tajam di segala ukuran resolusi |
| Metode Menggambar | Menggunakan JavaScript API | Menggunakan Tag HTML/XML & CSS |
| Kinerja (Performance) | Sangat baik untuk objek numerik sangat banyak (ribuan) | Melambat jika ada puluhan ribu elemen DOM SVG |
| Dukungan Event | Tidak memiliki dukungan event sel individual | Setiap elemen SVG bisa diberi event click, hover, CSS animation |
