Ingin Belajar Pemrograman Grafis dan Game, Wajib Mengenal HTML Canvas Terlebih Dahulu

Sebelum kedatangan HTML5, game dan elemen multimedia lainnya yang disajikan dalam browser menggunakan flash. Banyak game yang menggunakan flash dapat dimainkan pada browser, bahkan flash pun digunakan untuk memutar video di youtube apabila tidak ada flash maka video tak dapat di berjalan.

Akan tetapi semuanya itu berubah semenjak adanya html5. HTML5 memiliki banyak elemen baru yang lebih optimal ketimbang flash pada browser, yang salah satunya adalah canvas. Pada situs ini, canvas merupakan alat yang digunakan sebagai wadah untuk menggambar dan melukis, yang biasanya menggunakan pensil dan cat. Dalam pemrograman, canvas adalah elemen yang dapat digambar dengan banyak kode.

Elemen canvas pada html5 merupakan tag HTML yang hampir sama dengan tag

atau

dengan pengecualian apabila kontennya dirender menggunakan javascript. Untuk memanfaatkan canvas html5, anda harus menempatkan tag kanvas di suatu tempat dalam domen html, mengakses tag menggunakan javascript, menciptakan context, dan selanjutnya memanfaatkan HTML5 Canvas API untuk menggambar sesuatu.Pada saat anda ingin menggunakan canvas, wajib untuk mengetahui perbedaan antara elemen canvas dan context canvas, lantaran sering kali banyak yang bingung tentang keduanya. Elemen canvas merupakan DOM node yang sebenarnya ada lantaran disematkan di halaman html.

Context canvas yaitu objek dengan properti dan metode yang berfungsi sebagai merender grafik di dalam elemen canvas, context nya dapat 2D maupun 3D atau webgl.Setiap elemen canvas hanya dapat memiliki satu context. Apabila anda menggunakan metode getContext beberapa kali, hal tersebut akan mengembalikan referensi ke objek context yang sama. Adapun contoh sederhana dalam menggunakan canvas pada HTML5 yaitu:

<style>
body { margin: 0px; padding: 0px;}
</style>

<canvas id=”myCanvas” width=”578″ height=”200″></canvas>
<script>
var canvas= document.getElementByid(‘myCanvas’);
var context= canvas.getContext(‘2d’);
context.font=’40pt Calibri’;
context.fillStyle=’blue’;
context.fillText(‘Hello World!’, 150, 100);
</script>