HTML5

HTML5 Canvas : Cara Menggambar Grafis di Browser dengan JavaScript

Sebelum HTML5 hadir, kalau kamu mau bikin game atau animasi keren di browser, jawabannya cuma satu yaitu Flash. Semua game berbasis web, video YouTube, sampai animasi interaktif semuanya pakai Flash Player.

Tapi Flash punya banyak masalah yaitu berat, tidak aman, dan tidak bisa jalan di semua perangkat. Makanya ketika HTML5 datang, Flash pelan-pelan ditinggalkan dan akhirnya mati total.

Salah satu “pengganti Flash” paling berguna di HTML5 adalah elemen <canvas>.

Daftar Isi Tutup
1 Apa itu HTML5 Canvas ?
2 Dukungan Browser
3 Cara Membuat Canvas di HTML

Apa itu HTML5 Canvas ?

Canvas adalah elemen HTML5 yang digunakan untuk menggambar grafik, animasi, dan gambar secara langsung di browser menggunakan JavaScript.

Bayangkan canvas seperti selembar kertas kosong di halaman webmu. Kamu bisa menggambar apa saja di atasnya dimulai garis, kotak, lingkaran, teks, hingga gambar. Semuanya lewat kode JavaScript. Canvas bersifat dinamis dan interaktif, cocok untuk animasi, game, visualisasi data, bahkan aplikasi menggambar.

Dukungan Browser

Elemen canvas didukung oleh semua web browser populer diantaranya Internet Explorer 9+, Firefox, Opera, Chrome, dan Safari.
Catatan : Internet Explorer 8 dan versi dibawahnya tidak mendukung elemen <canvas>.

BrowserDukungan
Google ChromeSemua versi modern
Mozilla FirefoxSemua versi modern
Microsoft EdgeSemua versi modern
SafariSemua versi modern
OperaSemua versi modern
Internet Explorer 9+Didukung
Internet Explorer 8 ke bawahTidak didukung

Cara Membuat Canvas di HTML

Cukup tambahkan tag <canvas> dan tentukan ukurannya:

<canvas id="canvasku" width="640" height="480" style="border:1px solid #000000;">
</canvas>

Setelah itu, panggil elemen canvas lewat JavaScript.

var canvas = document.getElementById("canvasku");
var ctx = canvas.getContext("2d");

Kalau diibaratkan canvas adalah kertas gambarnya, dan ctx adalah pensilnya. Berikut kode lengkap setup canvas :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Belajar HTML5 Canvas - ePlusGo</title>
</head>
<body>
    <canvas id="canvasku" width="640" height="480" style="border:1px solid #000000;">
    </canvas>

    <script>
        var canvas = document.getElementById("canvasku");
        var ctx = canvas.getContext("2d");
        // Canvas siap! Mulai menggambar di sini...
    </script>
</body>
</html>

Jalankan di browser dan kamu akan melihat kotak putih dengan border hitam. Itulah canvas kosong yang siap digambari.