Canvas di HTML5

Sejarah Canvas HTML5

Pada tahun 2004, Canvas awalnya diperkenalkan oleh Apple untuk digunakan dalam komponennya sendiri (OS Mac X WebKit), seperti untuk menggerakkan aplikasi widget, Dashboard dan browser Safari. Kemudian pada tahun 2005, Canvas diadopsi dalam versi 1,8 browser Gecko dan pada tahun 2006 oleh Opera.

Pengertian Canvas HTML5

Canvas HTML5 adalah element yang digunakan untuk menggambar (grafik, object, animasi, game, komposisi gambar, dll) di website, dan untuk menggambarnya kita harus melalui script, misalnya Javascript.
Canvas adalah area berbentuk persegi yang dibuat dengan menggunakan tag <canvas>, dan secara default umumnya canvas tidak memiliki border dan isi.

<canvas id="myCanvas" width="100" height="100"></canvas>

Penggunaan Canvas HTML5

Canvas terdiri dari suatu daerah yang dapat ditarik dan kemudian didefinisikan dalam kode HTML dengan atribut tinggi dan atribut lebar. Kode javascript dapat mengakses daerah melalui set lengkap menggambar fungsi yang sama dengan yang lainnya API 2D umum, sehingga memungkinkan untuk grafis yang dihasilkan secara dinamis.

Menggambar dengan Javascript :

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>

Menggambar Garis :

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

Menggambar Lingkaran :

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

Menggambar Text :

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);

 Menggambar Image :

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);

Support Browser Canvas HTML5

Canvas ini didukung berbagai macam browser, diantaranya :

1. Mozilla Firefox
2. Google Chrome
3. Internet Explorer (versi lama IE, versi 8 dan versi sebelumnya tidak mendukung Canvas)
4. Safari
5. Konqueror
6. Opera

Demikian sedikit penjelasan tentang Canvas HTML5, semoga ilmu yang saya bagikan bisa 
bermanfaat bagi yang membutuhkan :)


Sumber :

http://www.w3schools.com/html/html5_canvas.asp
http://www.id.wikipedia.org/wiki/HTML5_canvas