Kalau kalian ingin membuat game atau aplikasi untuk mengedit gambar, kalian mungkin akan membutuhkan tag yang satu ini. Tag tersebut adalah tag <canvas>. Tag <canvas> bisa digunakan untuk membuat gambar di tengah halaman HTML. Kalian tidak hanya bisa menampilkan gambar dari satu file, tapi kalian bisa menampilkan potongan gambar atau bahkan menggerakannya. Selain itu, tag canvas bisa menampilkan bentuk-bentuk dasar seperti lingkaran, garis, dan persegi.
Contoh di atas hanya menampilkan gambar persegi dan lingkaran. Kalau kalian ingin menampilkan gambar, kalian perlu mempelajari Javascript. Tanpa Javascript, halaman HTML hanya akan menampilkan kotak kosong.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY>
<canvas width="400px" height="400px" style="background:yellow" id ="kanvas">
Kanvas tidak didukung
</canvas>
<script>
var kanvas=document.getElementById("kanvas");
ct=kanvas.getContext("2d");
ct.strokeStyle="red";
ct.fillStyle="green";
ct.lineWidth="2";
ct.beginPath();
ct.rect(0, 0, 100, 100);
ct.stroke();
ct.fill();
ct.fillStyle="aqua";
ct.beginPath();
ct.arc(100, 100, 50, 0, 2*Math.PI);
ct.stroke();
ct.fill();
</script>
</BODY>
</HTML><HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY>
<canvas width="400px" height="400px" style="background:yellow" id ="kanvas">
Kanvas tidak didukung
</canvas>
</BODY>
</HTML>Tag <canvas> mulai ada di HTML5. Jika kalian menggunakan browser lama yang tidak mendukung HTML5, tag canvas tidak akan ditampilkan. Kalian hanya akan melihat adalah teks yang menjadi isi tag <canvas>.
Atribut
Tag <canvas> memerlukan atribut width dan height untuk menentukan ukurannya. Selain itu, tag tersebut juga memerlukan id supaya bisa diedit dengan menggunakan javascript.
Atributt style pada contoh di atas hanya tag yang opsional. Saya menambahkan atribut style untuk mengubah latar belakang canvas menjadi warna kuning. Jika atribut style dihapus, warnanya akan sama dengan background halaman.