HTML5 memiliki fitur terbaru yaitu memiliki beberapa perintah tag yang sebelumnya tidak ada. Salah satu tagnya adalah tag canvas. Sesuai dengan pembahasan kita kali ini, kita akan belajar mengenai tag canvas pada HTML5. Canvas yang dimaksud pada tag ini adalah sebuah tag yang nantinya kalian dapat menggunakan sebagai media untuk melukis dengan html. Kalian dapat menggabar apapun pada canvas ini, tentunya dengan beberapa aturan yang harus kalian ketahui sebelum mulai menggambar.
Untuk melukis canvas kalian harus perlu mengetahui sedikit dasar javascript. Karena tag canvas hanya sebagai media, javascript akan bertugas sebagai alat untuk melukis didalam canvas tersebut. Untuk menggabar pada canvas ada beberapa perintah yang harus kalian ketahui. Jadi tidak sembarang kita menggambar. Namun sebagai permulaanya kalian bisa coba salin code berikut ini untuk melihat bagaimana cara kerja canvas lebih detail dan mempersingkat waktu tentunya.
canvas.html
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(20, 20, 150, 100);
</script>
</body>
</html>
Setelah sudah kalian bisa simpan file tersebut dengan format .html . Untuk melihat hasilnya kalian bisa buka file tersebut pada browser kalian. Jika berhasil maka tampilanya akan muncul seperti gambar berikut ini.
Gambar kotak merah tersebut didapatkan karena kita memasukan perintah pada tag dibawah script. Perintah tersebut adalah cara membuat objek kotak merah yang berada pada canvas. Dengan adanya tag canvas ini, diharapkan kedepannya kalian dapat membuat objek menarik tanpa perlu dari alat bantu diluar html seperti photoshop atau tools editing lainya. Keuntunganya adalah website kalian akan lebih ringan dibanding membuat gambar dengan tool editing image. Kalian bisa kembangkan lagi mengenai tag canvas ini agar menjadi lebih menarik lagi. Mudah bukan ?
Sekian pembahasan mengenai tag canvas pada html5. Semoga artikel kali ini menginspirasi dan bermanfaat bagi kalian semua. Sampai jumpa pada artikel menarik dan tidak kalah seru pada kesempatan yang akan datang lainya.
