Apa itu HTML5 Canvas – HTML5 merupakan versi dari HTML terdahulu, dimana versi ini diciptakan untuk menjawab segala kebutuhan website mobile friendly dan game pada saat ini. Sebelum HTML5 di luncurkan, game, video, animasi pada browser harus menggunakan flash player. Jika pada browser tidak terinstall flash maka beberapa game, video dan animasi tidak dapat ditampilkan.
Youtube dan facebook juga awalnya harus menggunakan flash player jika ingin melihat video. Namun semuanya berubah, ketika HTML5 di luncurkan. HTML5 datang dengan membawa banyak perubahan dan keunggulannya diantaranya adalah sebagai berikut:
Keunggulan HTML5
- Menjalankan javascript di Web browser
- Penyimpanan data informasi secara lokal
- Syntax yang lebih sederhana
- Kompatibel dengan banyak Web Browser (Firefox, Chrome, Safari, Opera dan lain sebagainya)
- Dukungan untuk Grafik Vektor seperti SVG
- Dukungan untuk Video dan Audio
- Mudah dalam membangun Aplikasi berbasis Web
- Canvas, teknologi terbaru
Baca juga : Belajar HTML dasar untuk pemula
Apa itu HTML5 Canvas?
HTML5 Canvas adalah sebuah tag HTML seperti <div>, <span>, dan lain sebagainya yaitu <canvas>. HTML5 canvas konten yang terkandung atau berada di dalamnya akan di render oleh javascript. Dalam artian lain, canvas adalah sebuah elemen pada HTML5 yang berfungsi untuk menggambar (merender) grafik, image dan teks.
Cara Menggunakan HTML5 Canvas
Tag canvas sangat mudah di implementasikan, tidak ada perbedaan signifikan pada penulisannya dengan tag HTML lainnya. Anda hanya membutuhkan tag <canvas>. Berikut cara menggunakan HTML5 Canvas:
Anda dapat menggunakan notepad, sublime ataupun editor lainnya. Buatlah kode seperti dibawah ini
<canvas id="canvasSection" width="400" height="400" style="border:1px solid red;">
</canvas>
kode diatas akan menghasilkan seperti gambar dibawah ini, untuk merubah ukuran tinggi dan lebar cukup ubah nilai pada width dan height, dan jika ingin merubah ukuran dan warna garis ubah nilai pada style cssnya.
Jika Game dibuat menggunakan teknologi HTML5 Canvas, anda tidak perlu menggunakan plugin atau extention tambahan pada browser Anda seperti yang dilakukan pada Flash Player terdahulu.
Demikianlah penjelasan singkat mengenai apa itu HTML5 Canvas, untuk penggunaan lebih lanjut mengenai HTML5 canvas akan dilanjutkan pada artikel selanjutnya. Semoga bermanfaat, terimakasih!.
